title: real time data visualization with C3.js
body: <p>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. </p>
  
  <p>Example: 
  x axis has time in seconds:  </p>
  
  <pre><code>xData = [ 0, 2, 4, 6, 8] 
  yData = [10, 11, 12, 13, 14]
  </code></pre>
  
  <p>The new data point (arriving after 2 seconds) would be <code>x = 10, y = 16</code><br>
  So, I want to update the xData and yData arrays as, </p>
  
  <pre><code>xData = [ 2, 4, 6, 8, 10] 
  yData = [ 11, 12, 13, 14, 16]
  </code></pre>
  
  <p>I looked at the 'flow' API <a href="http://c3js.org/samples/api_flow.html" rel="nofollow">example</a> of C3.js. But it appears like a new array is created everytime. </p>
  
  <p>Could someone please illustrate how to accomplish this in c3?  I am using node.js.</p>