This repository has been archived by the owner on Jan 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgraph.html
90 lines (80 loc) · 2.41 KB
/
graph.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
<!DOCTYPE html>
<html><head><title>Thermostat history</title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/hot-sneaks/jquery-ui.min.css"/>
</head>
<body>
<div id="statGraph" style="width:90%; height:600px"></div>
<div id="controls">
</div>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/jquery.flot.mod.min.js"></script>
<script src="js/jquery.flot.time.js"></script>
<script src="js/moment.min.js"></script>
<script>
var flotOptions = {
xaxis:
{
mode: 'time',
timeformat: '%a %H:%M',
},
yaxis:
{
min: 5.5,
max: 25
},
series:
{
lines: { show: true }
},
grid: {hoverable:true}
};
var xaxis_array = [], allData = [];
$(function() {
// load data from node
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$.getJSON("/tstat/history", {}, function(data, stat, jqXHR)
{
// data.flotData
// data.xaxis
//xaxis_array = data.xaxis;
allData = data.flotData;
if (data.overrideTimes.length > 0 && data.overrideTimes.length % 2 === 0)
{
var markingObjs = [], i;
while (data.overrideTimes.length > 0)
{
markingObjs.push({'xaxis': {'from': data.overrideTimes.shift(), 'to': data.overrideTimes.shift()}, color:'rgba(174,196,233,0.5)'});
}
flotOptions.grid.markings = markingObjs;
}
else
{
delete flotOptions.grid.markings;
}
$.plot($('#statGraph'), data.flotData, flotOptions);
});
$("#statGraph").bind("plothover", function (event, pos, item)
{
if (item)
{
var time = moment(item.datapoint[0]).calendar(),
temp = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " at " + time + ": " + temp)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
</script>
</body>
</html>