Как реализовать график в реальном времени для данных датчиков?

Я подключил датчик температуры к плате BeagleBone Black [BBB], после интервала в 1 секунду он определяет температуру и передает ее на BBB, а beaglebone сбрасывает ее в базу данных mysql на другом компьютере. Я хочу показать данные температуры в графическом формате. График должен обновляться каждую секунду.

Я пробовал различные библиотеки, такие как c3, canvasJS, но мне не удалось реализовать обновления в реальном времени. Пример данных температуры:

1 : 32

2 : 33

.

. . . so on..

Ниже приведен код 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>

Проблема в том, что этот код не смещается, он только добавляет новые точки данных на график, потому что этот график становится слишком сложным для просмотра.


javascript sensors temperature canvasjs
person Vaibhavraj S. Roham    schedule 07.12.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я могу ошибаться здесь, но похоже, что вы очищаете свой массив dps только при первой загрузке страницы:

var dps = [];

Когда вы используете функцию setInterval, кажется, что вы используете .push() для массива dps в цикле for и используете .shift() только один раз. Я считаю, что это добавляет набор из десяти в ваш массив каждый раз, когда вы вызываете свой updateChart, но каждый раз удаляете только один элемент из массива. Это верно?

Если это так, то размещение этой строки dps.shift() в вашем цикле for each jquery должно решить проблему...

$.each(result,function(key,value) {
    dps.push({
        x: xVal,
        y: value
    });
    xVal++;
    dps.shift();
});
person Branden Keck    schedule 07.12.2015
comment
Вы правы @branden-keck, я изменил, как вы упомянули, но теперь график не отображается. График не показывает никаких точек данных. Пустой график! - person Vaibhavraj S. Roham; 08.12.2015
comment
@ VaibhavrajS.Roham Остальная часть веб-страницы отображалась правильно? А график отрендерился, но без данных? - person Branden Keck; 08.12.2015
comment
@VaibhavrajS.Roham Если подумать, вам может быть лучше просто очищать массив каждый раз, когда вы вызываете функцию updateChart, так как вы все равно собираетесь пополнять массив с нуля. Попробуйте поставить dps = []; оператор в качестве первой строки в функции и выньте dps.shift(); вообще. Кроме того, может быть хорошей идеей вывести функцию updateChart из функции загрузки, поскольку вы все равно ее вызываете... оставление ее в загрузке может вызвать проблемы. - person Branden Keck; 08.12.2015
comment
вы правы, это работает, как вы сказали, чтобы наконец очистить dps[] и загрузить новые значения, но проблема в том, что он удаляет все значения, но мне нужно удалить одно значение. - person Vaibhavraj S. Roham; 08.12.2015
comment
Я получил свою глупую ошибку! здесь я публикую то, что я сделал. - person Vaibhavraj S. Roham; 08.12.2015

arrow_upward
0
arrow_downward

Вот как я преодолеваю проблему.

<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[] некоторыми значениями. Со стороны сервера после интервала я получил только одно значение, а не десятки значений. только что добавил к точкам данных и принял следующие меры для смещения массива. т.е. добавление одной точки данных и удаление одной точки данных.

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

person Vaibhavraj S. Roham    schedule 08.12.2015