Line Chart - Realtime - Adding Data

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<div id="cccMasterChart" ></div>
<p>
See <a href="http://jsfiddle.net/duarteleao/js9h2y46/">related sliding window</a> example, which won't go OOM.
</p>

CSS

http://jsfiddle.net/duarteleao/js9h2y46/#forkhttp://jsfiddle.net/duarteleao/js9h2y46/#fork

JavaScript

require(["ccc/pvc", "ccc/def"], function(pvc, def) {
    var updateCount = 0;
    
    var chart_one_data = {
      "resultset": [],
      "metadata": [{
        "colIndex": 0,
        "colType": "String",
        "colName": "name"
      }, {
        "colIndex": 1,
        "colType": "String",
        "colName": "Date"
      }, {
        "colIndex": 2,
        "colType": "Numeric",
        "colName": "Quantity"
      }]
    };

    var masterChart = new pvc.LineChart({
      canvas: 'cccMasterChart',
      width:  500,
      height: 300,
      animate:    false,
      legend: true,
      crosstabMode: false,
      line_interpolate: 'monotone',
      timeSeries: true,
      baseAxisDomainRoundMode: 'none'
    });

    function updateChart() {
      var time = Date.now();
      updateCount++;
      
      chart_one_data.resultset = [
        ["Anomaly",   time, Math.floor((Math.random() * 100) + 50)],
        ["Predictive",time, Math.floor((Math.random() * 100) + 50)]
      ];

      masterChart
        .setData(chart_one_data)
        .render({
          bypassAnimation: true, 
          recreate: true, 
          dataOnRecreate: 'add'
        });
      
      // Otherwise will go Out Of Memory
      if(updateCount < 50) {
        setTimeout(updateChart, 1000);
      }
    }

    updateChart();
});