我已将温度传感器连接到 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>
问题是这段代码不会移动,它只会向图形添加新的数据点,因为这个图形变得太复杂而无法查看。