How to implement realtime graph for sensor data?

Question

I have connected temperature sensor to BeagleBone Black [BBB] board, after interval of 1 sec it sense the temperature and pass to BBB and beaglebone dumps it into mysql database on another computer. I want to show temperature data in graphical format. Graph should be updated after each second.

I tried various libraries like c3, canvasJS but i was unable to implement with realtime updates. Sample Temperature Data:

1 : 32

2 : 33

.

. . . so on..

Following is the canvasJS code which I tried

window.onload = function() {

  var dps = []; // dataPoints

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Tempreture Input From XBee"
    },
    data: [{
      type: "line",
      dataPoints: dps
    }]
  });
  var xVal = 0;
  var updateInterval = 1000;
  var dataLength = 10; // number of dataPoints visible at any point

  var updateChart = function(count) {
    $.getJSON("http://localhost/smartfarm/admin/getGraphJson", function(result) {
      $.each(result, function(key, value) {
        dps.push({
          x: xVal,
          y: value
        });
        xVal++;
      });
    });
    dps.shift();
    chart.render();

  };

  // generates first set of dataPoints
  updateChart(dataLength);

  // update chart after specified time.
  setInterval(function() {
    updateChart()
  }, updateInterval);

}

<div id="chartContainer" style="height: 300px; width:100%;"></div>

Problem is that this code wont shift,It only adds new datapoints to graph because of this graph becomes too complicated to see.

Answer 1

Here is how i overcome the issue.

<script type="text/javascript">
window.onload = function () {

  var dps = [
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
    {x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},{x: 0, y: 0},
  ]; // dataPoints

    var chart = new CanvasJS.Chart("chartContainer",{
    title :{
    text: "Tempreture Input From XBee"
    },
    data: [{
    type: "line",
    dataPoints: dps
    }]
  });
var xVal = 0;
var updateInterval = 1000;
var dataLength = 10; // number of dataPoints visible at any point

var updateChart = function (count) {
  $.getJSON("<?=base_url("admin/getGraphJson");?>", function (result) {
    //alert(result);
    $.each(result,function(key,value) {
      dps.push({
        x: xVal,
        y: value
      });
      xVal++;
    });
  });
  dps.shift();
  chart.render();
  //dps.length=0;

  if (dps.length >  20 )
  {
    dps.shift();
  }
};

// generates first set of dataPoints
updateChart(dataLength);

// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);

}
</script>

I initialize dps[] datapoints array with some values. From server side after interval I retrieved only single value rather than tens of values. just added to datapoints and made following arrangement to shift the array. ie. adding one datapoint and removing one datapoint.

   if (dps.length >  70 )
   {
     dps.shift();
   }