C3.js实现实时数据可视化

Question

I am new to javascript and want to use C3.js for streaming time series data visualization. I want to display the 5 most recent data points on the chart. The new data point is streamed every 2 seconds. So, the display should discard the oldest data point and refresh the graph with this additional data point.

Example: x axis has time in seconds:

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

The new data point (arriving after 2 seconds) would be x = 10, y = 16
So, I want to update the xData and yData arrays as,

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

I looked at the 'flow' API example of C3.js. But it appears like a new array is created everytime.

Could someone please illustrate how to accomplish this in c3? I am using node.js.

Answer 1

Initialize your initial chart with the data you want. Let's say:

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

Add data, restrict to last 5 elements, and reflow the chart:

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

Answer 2

Well, if you don't care about prior data points you could simply do this:

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
}

Also if you want to keep a record of past data points you can always record the shifted off number by doing something like historicalXpointArray.push(xData.shift());