charts/canvas/breaker.php

   1 <!DOCTYPE HTML>
   2 <html>
   3
   4 <head>
   5         <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
   6         <script type="text/javascript">
   7         window.onload = function () {
   8
   9                 var dps = []; // dataPoints
  10
  11                 var chart = new CanvasJS.Chart("chartContainer",{
  12                         title :{
  13                                 text: "Usage of <?php echo $_GET['id'];?> since <?php echo date('r', $_GET['t']);?>"
  14                         },
  15                         axisX:{
  16                                 valueFormatString: " ",
  17                         },
  18                         data: [{
  19                                 type: "line",
  20                                 dataPoints: dps
  21                         }]
  22                 });
  23
  24                 var xVal = 0;
  25                 var yVal = 20;
  26                 var updateInterval = 5000;
  27                 var dataLength = 60; // number of dataPoints visible at any point
  28
  29                 var updateChart = function (count) {
  30
  31                         $.getJSON('http://192.168.5.205:8000/power.php?id=<?php echo $_GET['id'];?>&t=<?php echo $_GET['t'];?>', function(data) {
  32                                 for (var key in data) {
  33                                         //console.log(data[key].amps);
  34                                         var time = parseInt(data[key].time);
  35                                         var amps = parseFloat(data[key].amps); // was data[key].amps
  36                                         //console.log(amps);
  37                                         //time =10;
  38                                         //amps = 10;
  39                                         dps.push({
  40                                                 x: time,
  41                                                 y: amps
  42                                         });
  43                                 }
  44                                 chart.render();
  45                         });
  46
  47                         //count = count || 1;
  48                         // count is number of times loop runs to generate random dataPoints.
  49
  50                         //for (var j = 0; j < count; j++) {
  51                         //      yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
  52                         //      dps.push({
  53                         //              x: xVal,
  54                         //              y: yVal
  55                         //      });
  56                         //      xVal++;
  57                         //};
  58
  59                         //if (dps.length > dataLength)
  60                         //{
  61                         //      dps.shift();
  62                         //}
  63                         //chart.render();
  64
  65                 };
  66
  67                 // generates first set of dataPoints
  68                 updateChart(dataLength);
  69
  70                 // update chart after specified time.
  71                 //setInterval(function(){updateChart()}, updateInterval);
  72
  73         }
  74         </script>
  75         <script type="text/javascript" src="canvasjs.min.js"></script>
  76 </head>
  77 <body>
  78         <div id="chartContainer" style="height: 300px; width:100%;">
  79         </div>
  80 </body>
  81 </html>