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 | <!DOCTYPE html>
<html>
<head>
<!-- Load papaparse.js -->
<script src="papaparse.min.js"></script>
<!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="250"></canvas>
<script>
//Parse the data.
function parseData() {
csv = "Date,Time,Station_id,Ambient Humidity,Ambient Temperature,Light,Probe Temperature,DI1,DI2" + "\n" +
"2017-03-23,16:37:38,1,70.10,22.10,859,22.50,0,0" + "\n" +
"2017-03-23,16:42:51,1,70.50,22.30,820,21.88,0,0" + "\n" +
"2017-03-23,16:32:25,1,69.90,22.10,848,22.38,0,0" + "\n" +
"2017-03-23,16:27:12,1,70.30,22.10,866,22.25,0,0" + "\n" +
"2017-03-23,14:21:11,1,71.40,22.60,577,22.38,0,0" + "\n" +
"2017-03-23,13:02:45,1,73.10,22.60,558,22.31,0,0" + "\n" +
"2017-03-23,13:34:02,1,74.00,22.60,577,22.38,0,0" + "\n" +
"2017-03-23,12:20:59,1,75.20,22.50,435,22.25,0,0" + "\n" +
"2017-03-23,11:49:39,1,76.00,22.60,572,22.31,0,0";
var parsed_data = Papa.parse(csv);
//console.log(parsed_data);
createGraph(parsed_data.data);
}
function createGraph(pd) {
// Check the length of the data array
//console.log(pd.length);
var canvas = document.getElementById('myChart');
// Buffers for storing the selected array data for making chart
var time = [];
var light = [];
for (var i = 1; i < pd.length; i++) {
//console.log(pd[i][5]);
time.push(pd[i][1]); // Time Stamp
light.push(pd[i][5]); // Light Sensor Reading
}
// Double check the contents of the 2 arrays
console.log(time);
console.log(light);
var data = {
//labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: time, // X-Axis
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
//data: [65, 59, 80, 0, 56, 55, 40],
data: light, // Y-Axis
}
]
};
var option = {
showLines: true,
responsive: false
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
}
parseData();
</script>
</body>
</html>
|
Note, For info. on how to put the x-axis in ascending order, refer to my other post at http://wei48221.blogspot.tw/2017/03/how-to-sort-multi-dimensional-arrays-in.html.
Comments
Post a Comment