实时数据可视化与C3.js

我是JavaScript的新手，并希望使用C3.js流式时间序列数据可视化。我想在图表上显示最近的5个数据点。新的数据点每2秒传输一次。因此，显示器应丢弃最旧的数据点并使用此附加数据点刷新图形。实时数据可视化与C3.js

实施例： x轴具有时间（秒）：

xData = [ 0, 2, 4, 6, 8] 
yData = [10, 11, 12, 13, 14]

新的数据点（2秒后到达的）将是x = 10, y = 16
所以，我要更新的XDATA和YDATA数组作为，

xData = [ 2, 4, 6, 8, 10] 
yData = [ 11, 12, 13, 14, 16]

我看着C3.js的'flow'API example。但它看起来像是每次都创建一个新的数组。

有人请说明如何在c3中完成此操作吗？我正在使用node.js.

来源

2015-11-04 memC

我写了一个小脚本，可以满足您的需求。这里是[链接]（https://gist.github.com/nikhil38/5b1df27f25f421a1048f87fa14af2fed） – Nikhil

好吧，如果你不计较以前的数据点，你可以简单地这样做：

success: function(data, textStatus, xhr) { 
    xData.shift(); 
    yData.shift(); 
    xData.push(data.x); 
    yData.push(data.y); 
    // now you can recall the chart function to use the new data 
}

此外，如果你想保持过去的数据点的记录，您随时都可以做这样的事情historicalXpointArray.push（xData.shift（））的记录移出的数量;

来源

2015-11-04 20:00:49 Pete

用你想要的数据初始化你的初始图表。比方说：

var data = [ 
    ['x', 0, 2, 4, 6, 8], 
    ['data1', 10, 11, 12, 13, 14], 
];

添加数据，限制将持续5个元素，并回流图表：

data[0].push(10); 
data[1].push(16); 

for (var i=0; i<data.length; i++) { 
    //Restrict to last 5 elements (Preserves first element) 
    data[i] = [data[i][0]].concat(data[i].slice(1).slice(-5)); 
} 

/* 
* Data now looks like this: 
[ 
    ["x", 2, 4, 6, 8, 10], 
    ["data1", 11, 12, 13, 14, 16] 
] 
* 
*/ 

//Reflow chart with new data

来源

2015-11-04 19:20:52 FrankerZ

谢谢这很有用！ – memC

实时数据可视化与C3.js

回答

相关问题