-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtest.html
99 lines (86 loc) · 3.03 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<section>
Chart
<canvas id="weatherChart" width="800" height="200"></canvas>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<!-- http://jsbin.com/kalilayohu/1/edit?html,js,output
https://pusher.com/tutorials/graph-javascript/
http://jsbin.com/kalilayohu/1/edit?html,js,output
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script type="text/javascript">
function ajax(url, method, payload, successCallback){
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
if (xhr.readyState != 4 || xhr.status != 200) return;
successCallback(xhr.responseText);
};
xhr.send(JSON.stringify(payload));
}
var chartConfig = {
type: 'line',
labels: [],
datasets: [
{
label: "Line1 length",
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: 1,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
// pointHoverBorderWidth: 1,
pointRadius: 1,
pointHitRadius: 10,
data: [],
spanGaps: false,
}
]
};
var ctx = document.getElementById("weatherChart").getContext("2d");
var weatherChartRef = new Chart(ctx,chartConfig);
function renderWeatherChart(weatherData) {
var ctx = document.getElementById("weatherChart").getContext("2d");
weatherChartRef = new Chart(ctx,chartConfig).Line(weatherData);
}
ajax("http://lineatkaf.herokuapp.com/line?line=1","GET",{},onFetchTempSuccess);
function onFetchTempSuccess(response){
var respData = JSON.parse(response);
var dates = respData["date"].split("-");
var label = dates[3]+":"+dates[4]+":"+dates[5];
chartConfig.labels.push(label)
chartConfig.datasets[0].data.push(respData["line"]);
renderWeatherChart(chartConfig)
}
// update data every 5 seconds
// only do this during business hours
var d = new Date();
var counter = 0;
if (d.getHours() < 17) {
var interval = setInterval(function(){
ajax("http://lineatkaf.herokuapp.com/line?line=1","GET",{},onFetchTempSuccess);
counter++
if (counter > 20) {
clearInterval(interval)
}
}, 5000);
}
</script>
<!-- Masthead -->
</body>
</html>