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

【问题标题】：How to implement realtime graph for sensor data?如何实现传感器数据的实时图？
【发布时间】：2016-03-12 11:14:19
【问题描述】：

我已将温度传感器连接到 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);

}

&lt;div id="chartContainer" style="height: 300px; width:100%;"&gt;&lt;/div&gt;

问题是这段代码不会移动，它只会将新的数据点添加到图形中，因为这个图形变得太复杂而无法查看。

【问题讨论】：

标签： javascript sensors temperature canvasjs

【解决方案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();
});

【讨论】：

你是对的@branden-keck 我改变了你提到的但现在图形不会渲染。图表未显示任何数据点。空图！
@VaibhavrajS.Roham 网页的其余部分是否正确呈现？而且，图形渲染但没有数据？
@VaibhavrajS.Roham 再想一想，每次调用 updateChart 函数时清空数组可能会更好，因为无论如何您都要从头开始重新填充数组。尝试把 dps = [];声明作为函数的第一行并取出 dps.shift();共。此外，将 updateChart 函数从 onload 函数中取出可能是个好主意，因为无论如何您都会调用它......将它留在 onload 中可能会导致问题
你是对的，它就像你说的那样工作，最后清空 dps[] 并加载新值，但问题是它删除了所有值，但我需要删除单个值。
我犯了一个愚蠢的错误！我在这里发布我所做的。

【解决方案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();
   }

【讨论】：