-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (104 loc) · 2.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/simple.css">
<title>Weight Table</title>
</head>
<body>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<h1>Weight Chart</h1>
<div id="container"> </div>
<script>
var xField = 'date';
var yField = 'weight';
var selectorOptions = {
buttons: [{
step: 'month',
stepmode: 'backward',
count: 1,
label: '1m'
}, {
step: 'month',
stepmode: 'backward',
count: 6,
label: '6m'
}, {
step: 'year',
stepmode: 'todate',
count: 1,
label: 'YTD'
}, {
step: 'year',
stepmode: 'backward',
count: 1,
label: '1y'
}, {
step: 'all',
}],
};
Plotly.d3.csv("result.csv", function (err, rows) {
if (err) throw err;
function unpack(rows, key) {
return rows.map(row => row[key]);
}
// Sort rows by date in descending order
rows.sort((a, b) => new Date(b.date) - new Date(a.date));
var headerValues = Plotly.d3.keys(rows[0]);
var cellValues = headerValues.map(header => unpack(rows, header));
var table = {
type: 'table',
columnwidth: Array(headerValues.length).fill(200),
columnorder: headerValues.map((_, i) => i),
header: {
values: headerValues,
align: "center",
},
cells: {
values: cellValues,
align: "center",
},
domain: { x: [0, 1], y: [0, 0.5] }
};
var trace1 = {
x: unpack(rows, 'date'),
y: unpack(rows, 'weight'),
mode: 'lines',
name: 'Weight',
connectgaps: true
};
var data = [table, trace1];
var layout = {
title: "Weight",
height: 1000,
xaxis: {
domain: [0, 1],
rangeselector: selectorOptions,
showline: true,
zeroline: false,
showgrid: true,
mirror: true,
ticklen: 9,
autorange: true
},
yaxis: {
domain: [0.60, 0.98],
showgrid: true,
showline: true,
gridcolor: '#bdbdbd',
gridwidth: 1,
showline: true,
zeroline: false,
showgrid: true,
mirror: true,
ticklen: 9,
autorange: true
}
};
Plotly.plot('container', data, layout);
});
</script>
</body>
</html>