Weight chart
| Date |
Weight (kg) |
Running (km) |
Cycling (km) |
remark |
| 2024.7.23 |
93.2 |
2.34 |
8.11 |
have a little cold |
| 2024.7.24 |
92.3 |
4.42 |
14.4 |
still have a little cough |
| 2024.7.25 |
91.0 |
4.18 |
6.78 |
feel good |
| 2024.7.26 |
90.9 |
3.79 |
8.48 |
|
| 2024.7.27 |
92.2 |
5.01 |
0 |
|
| 2024.7.28 |
91.2 |
0 |
20.7 |
|
| 2024.7.29 |
91.3 |
5.49 |
12.2 |
start a diet |
| 2024.7.30 |
91.2 |
3.01 |
8.33 |
buy a new gravel bike |
| 2024.7.31 |
90.8 |
4.54 |
11.4 |
|
| 2024.8.1 |
90.3 |
5.08 |
6.93 |
|
| 2024.8.2 |
90.4 |
0 |
12.7 |
|
| 2024.8.3 |
91.0 |
0 |
12.2 |
|
| 2024.8.4 |
91.1 |
0 |
9.24 |
|
| 2024.8.5 |
90.8 |
|
|
|
Line Graph
Weight Record
html code of line graph
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
| <html>
<head>
<title>Weight Record</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
var data = [
["2024.7.23", 93.2],
["2024.7.24", 92.3],
["2024.7.25", 91.0],
];
var dataSet = anychart.data.set(data);
var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
var chart = anychart.line();
var firstSeries = chart.line(firstSeriesData);
firstSeries.name("Weight");
chart.legend().enabled(true);
chart.title("Weight Record");
chart.container("container");
chart.draw();
});
</script>
</body>
</html>
|
Reference
https://www.freecodecamp.org/chinese/news/how-to-make-line-charts-in-javascript/