-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (106 loc) · 2.98 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
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket;
function getURLParam(key) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
function updateChart(fn) {
socket = io.connect('http://localhost');
socket.on('update', fn);
}
var chart;
updateChart(function (data) {
var obj = JSON.parse(data);
chart.series[0].addPoint([parseInt(obj.time), parseInt(obj.value)], true, true);
});
//var socket = io.connect('http://localhost');
//socket.on('update', function (data) {
// var obj = JSON.parse(data);
// chart.series[0].addPoint([new Date().getTime(), parseInt(obj.value)], true, true);
//});
</script>
<body>
<script>
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'tempcontainer',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Temperature',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 60
});
}
return data;
})()
}]
});
});
socket.emit('subscribe', {island: $('#island').val(), actor:$('#actor').val()});
</script>
<table id="subscriptionsContainer">
</table>
Island: <input type="textfield" id="island" />
Actor: <input type="textfield" id="actor" />
<button id="subscribeButton">Subscribe</button>
<div id="tempcontainer" style="width:100%; height:400px;"></div>
<ul id="console"><li>init</li></ul>
</body>
</html>