如何实现传感器数据的实时图表？

Question

我已将温度传感器连接到 BeagleBone Black [BBB] 板，在间隔 1 秒后它会感应温度并传递给 BBB，beaglebone 将其转储到另一台计算机上的 mysql 数据库中。我想以图形格式显示温度数据。图表应每秒更新一次。

我尝试了各种库，如 c3、canvasJS，但我无法通过实时更新来实现。样本温度数据：

1 : 32

2 : 33

.

。 . . 等等..

以下是我试过的canvasJS代码

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>

问题是这段代码不会移动，它只会向图表添加新的数据点，因为图表变得太复杂了，看不到。

Answer 1

我在这里可能是错的，但您似乎只是在第一次加载页面时清空了 dps 数组：

var dps = [];

当您使用 setInterval 函数时，您似乎在 for 循环中对 dps 数组使用了 .push() 并且只使用了一次 .shift() 。我相信这会在您每次调用 updateChart 时向您的数组添加一组十个，但每次只从数组中删除一个项目。这是正确的吗？

如果是这样，将 dps.shift() 行放入 for each jquery 循环中应该可以解决问题...

$.each(result,function(key,value) {
    dps.push({
        x: xVal,
        y: value
    });
    xVal++;
    dps.shift();
});

Answer 2

下面是我如何解决这个问题的。

<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>

我用一些值初始化 dps[] 数据点数组。间隔后从服务器端我只检索到单个值而不是数十个值。刚刚添加到数据点并进行了以下安排以移动数组。 IE。添加一个数据点并删除一个数据点。

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

如何实现传感器数据的实时图表？

How to implement realtime graph for sensor data?

javascript

sensors

temperature

canvasjs