wip on plot graph

[pulsecounter.git] / web / index.html

diff --git a/web/index.html b/web/index.html
index b29c00f6d7bbcc52c8906a2977a668b6e09dc619..06ee992b34c2c18a8c64547fc5dd03de38eacbb0 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -8,39 +8,49 @@
   var context;
   var ww;
   var wh;
+  var hfact;
   var tmin;
   var tmax;
+  var tfact;
+  function px(x) {
+    return (x - tmin) * tfact;
+  }
+  function py(y) {
+    return (wh - y * hfact);
+  }
   function drawplot(times, color) {
-    var tfact = ww / (tmax - tmin);
     var i;
     var height = [];
     var hmax = 0;
-    var hfact;
 
+    tfact = ww / (tmax - tmin);
     for (i = 1; i < times.length; i++) {
-      height[i] = 1 / (times[i][0] - times[i-1][0]);
+      height[i] = (times[i][1] - times[i-1][1]) / (times[i][0] - times[i-1][0]);
       if (hmax < height[i]) hmax = height[i];
     }
     height[i+1] = height[i];
     hfact = wh / hmax;
+
     context.beginPath();
-    context.moveTo(0, wh - height[1]*hfact);
+    context.moveTo(px(times[0][1]), py(height[1]));
     for (i = 1; i < times.length; i++) {
-      context.lineTo((times[i][0] - tmin)*tfact,wh - height[i]*hfact);
-      context.lineTo((times[i][0] - tmin)*tfact,wh - height[i+1]*hfact);
+      context.lineTo(px(times[i][0]), py(height[i]));
+      context.lineTo(px(times[i][0]), py(height[i+1]));
     }
+    context.lineTo(px(tmax), py(height[i+1]));
+
     context.strokeStyle = color;
     context.stroke();
   }
   function gotdata(data) {
     canvas = document.getElementById("plot");
     context = canvas.getContext("2d");
-    ww = canvas.offsetWidth;
-    wh = canvas.offsetHeight;
+    ww = canvas.width;
+    wh = canvas.height;
     tmin = data.range.lo;
     tmax = data.range.hi;
-    document.getElementById("cold").innerHTML = data.current.cold;
-    document.getElementById("hot").innerHTML = data.current.hot;
+    document.getElementById("cold").innerHTML = data.current.cold / 100;
+    document.getElementById("hot").innerHTML = data.current.hot / 100;
     drawplot(data.cold, "blue");
     drawplot(data.hot, "red");
   }
@@ -50,12 +60,13 @@ h1 {
   text-align: center;
 }
 br {
-  clear: all;
+  clear: both;
 }
 div#currentvals {
-  width: 16em;
+  width: 14em;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 10px;
   text-align: center;
   font-size: 150%;
 }
@@ -63,7 +74,7 @@ div.current {
   position: relative;
   padding: 0.2em;
   border: solid 1px black;
-  margin: 1em;
+  margin: 0.2em;
 }
 div#cold {
   float: left;
@@ -74,8 +85,13 @@ div#hot {
   background-color: #ffd0e0;
 }
 canvas#plot {
+  padding-left: 0;
+  padding-right: 0;
   margin-left: auto;
   margin-right: auto;
+  display: block;
+  width: 640px;
+  height: 480px;
   border: solid 1px black;
 }
 </style>
@@ -95,6 +111,7 @@ canvas#plot {
 <script>
   var xmlhttp = new XMLHttpRequest();
   var url = "query.cgi";
+  var qstr = "?lo=2015-12-19+00:00:00&hi=2015-12-20+00:00:00";
 
   xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
@@ -103,7 +120,7 @@ canvas#plot {
       gotdata(myData);
     }
   }
-  xmlhttp.open("GET", url, true);
+  xmlhttp.open("GET", url+qstr, true);
   xmlhttp.send();
 </script>
 </body>