1 <?xml version="1.0" encoding="utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
16 return (x - tmin) * tfact;
19 return (wh - y * hfact);
21 function drawplot(times, color) {
26 tfact = ww / (tmax - tmin);
27 for (i = 1; i < times.length; i++) {
28 height[i] = (times[i][1] - times[i-1][1]) / (times[i][0] - times[i-1][0]);
29 if (hmax < height[i]) hmax = height[i];
31 height[i+1] = height[i];
35 context.moveTo(px(times[0][1]), py(height[1]));
36 for (i = 1; i < times.length; i++) {
37 context.lineTo(px(times[i][0]), py(height[i]));
38 context.lineTo(px(times[i][0]), py(height[i+1]));
40 context.lineTo(px(tmax), py(height[i+1]));
42 context.strokeStyle = color;
45 function gotdata(data) {
46 canvas = document.getElementById("plot");
47 context = canvas.getContext("2d");
52 document.getElementById("cold").innerHTML = data.current.cold / 100;
53 document.getElementById("hot").innerHTML = data.current.hot / 100;
54 drawplot(data.cold, "blue");
55 drawplot(data.hot, "red");
76 border: solid 1px black;
81 background-color: #d0e0ff;
85 background-color: #ffd0e0;
95 border: solid 1px black;
98 <title>Water Meters</title>
100 <h1>Water Meters</h1>
101 <div id="currentvals">
103 <div class="current" id="cold">cold</div>
104 <div class="current" id="hot">hot</div>
107 <canvas id="plot" width="640" height = "480"></canvas>
112 var xmlhttp = new XMLHttpRequest();
113 var url = "query.cgi";
114 var qstr = "?lo=2015-12-19+00:00:00&hi=2015-12-20+00:00:00";
116 xmlhttp.onreadystatechange = function() {
117 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
118 document.getElementById("debug").innerHTML = xmlhttp.responseText;
119 var myData = JSON.parse(xmlhttp.responseText);
123 xmlhttp.open("GET", url+qstr, true);