charts/canvas/breaker-live-broken.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: "Live Power <?php echo $_GET['id'];?>"
  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'];?>', 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);
  36                                         console.log(amps);
  37                                         //time =10;
  38                                         //amps = 10;
  39                                         dps.push({
  40                                                 x: time,
  41                                                 y: amps
  42                                         });
  43                                 }
  44                         });
  45
  46                         //count = count || 1;
  47                         // count is number of times loop runs to generate random dataPoints.
  48
  49                         //for (var j = 0; j < count; j++) {
  50                         //      yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
  51                         //      dps.push({
  52                         //              x: xVal,
  53                         //              y: yVal
  54                         //      });
  55                         //      xVal++;
  56                         //};
  57
  58                         //if (dps.length > dataLength)
  59                         //{
  60                         //      dps.shift();
  61                         //}
  62                         chart.render();
  63
  64                 };
  65
  66                 // generates first set of dataPoints
  67                 updateChart(dataLength);
  68
  69                 // update chart after specified time.
  70                 setInterval(function(){updateChart()}, updateInterval);
  71
  72         }
  73         </script>
  74         <script type="text/javascript" src="canvasjs.min.js"></script>
  75 </head>
  76 <body>
  77         <div id="chartContainer" style="height: 300px; width:100%;">
  78         </div>
  79 </body>
  80 </html>