-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
107 lines (96 loc) · 3.87 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
<!doctype html>
<html>
<head>
<title>CO2 Monitor</title>
<script src="Chart.bundle.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:100%;height:100%;">
<canvas id="canvas"></canvas>
</div>
<script>
window.onload = function() {
var xmlhttp = new XMLHttpRequest();
var url = "data.json";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
var l = [];
var co2 = [];
var temp = [];
for(var i = 0; i < myArr.length; i++ ) {
l.push( myArr[i]["time"])
co2.push( myArr[i]["co2"] )
temp.push( myArr[i]["temp"] )
}
var lineChartData = {
labels: l,
datasets: [{
label: 'CO2 (ppm)',
borderColor: "red",
backgroundColor: "red",
fill: false,
data: co2,
yAxisID: 'y-axis-1',
}, {
label: 'Temperature (\u2103)',
borderColor: "blue",
backgroundColor: "blue",
fill: false,
data: temp,
yAxisID: 'y-axis-2'
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Weather'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
min: 400,
max: 1500,
}
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
ticks: {
min: 10.0,
max: 30.0,
},
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
</script>
</body>
</html>