web/index.html

   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">
   5 <head>
   6 <script>
   7   var canvas;
   8   var context;
   9   function drawplot(times, color) {
  10     var tmin = times[0][0];
  11     var tfact = 640/(times[times.length-1][0] - tmin);
  12     var i;
  13     var height = [];
  14     var hmax = 0;
  15     var hfact;
  16
  17     for (i = 1; i < times.length; i++) {
  18       height[i] = 1 / (times[i][0] - times[i-1][0]);
  19       if (hmax < height[i]) hmax = height[i];
  20     }
  21     height[i+1] = height[i];
  22     hfact = 480 / hmax;
  23     context.beginPath();
  24     context.moveTo(0, 480 - height[1]*hfact);
  25     for (i = 1; i < times.length; i++) {
  26       context.lineTo((times[i][0] - tmin)*tfact,480 - height[i]*hfact);
  27       context.lineTo((times[i][0] - tmin)*tfact,480 - height[i+1]*hfact);
  28     }
  29     context.strokeStyle = color;
  30     context.stroke();
  31   }
  32   function gotdata(data) {
  33     canvas = document.getElementById("plot");
  34     context = canvas.getContext("2d");
  35     drawplot(data.cold, "blue");
  36     drawplot(data.hot, "red");
  37   }
  38 </script>
  39 </head><body>
  40 <canvas id="plot" width="640" height = "480"
  41         style="border:solid 1px #000000;"></canvas>
  42 <hr/>
  43 <div id=debug>
  44 </div>
  45 <script>
  46   var xmlhttp = new XMLHttpRequest();
  47   var url = "query.cgi";
  48
  49   xmlhttp.onreadystatechange = function() {
  50     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  51       document.getElementById("debug").innerHTML = xmlhttp.responseText;
  52       var myData = JSON.parse(xmlhttp.responseText);
  53       gotdata(myData);
  54     }
  55   }
  56   xmlhttp.open("GET", url, true);
  57   xmlhttp.send();
  58 </script>
  59 </body>