Line Chart - Realtime - Adding Data - Sliding Window

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" />

JavaScript

require(["ccc/pvc", "ccc/def"], function(pvc, def) {
    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',
      slidingWindow:true,
      slidingWindowLength:'20s',
      baseAxisDomainAlign:'max'
    });

    function updateChart() {
      var time = Date.now();
      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'
        });

      setTimeout(updateChart, 1000);
    }

    updateChart();
});