JSFiddle - React, Tailwind, and code Playground

by ow ow

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

// dataPoints
var dataPoints1 = [];
var dataPoints2 = [];            
var runningIndex = 0;

var startDT = new Date("Mar 01 2017 16:24:13");
var dataPointsStore1 = [];
var dataPointsStore2 = [];
for (var i = 0; i < 1000; i++)
{
  //var dt = moment(startDT.getTime()).toDate();
  //dt.setSeconds(dt.getSeconds() + i);
  var dt = new Date("Mar 01 2017 16:24:13");
  dt.setSeconds(dt.getSeconds() + i);
  var dataPoint = new Object();
  dataPoint.x = dt;
  dataPoint.y = 36.302083333333336;
  dataPointsStore1.push(dataPoint);
  var dataPoint = new Object();
  dataPoint.x = dt;
  dataPoint.y = 50.924479166666664;
  dataPointsStore2.push(dataPoint);
}


chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Time Axis Interval Discrepancy"
  },
  axisX: {
    inteval: 4,
    intervalType: "second"
  },
  axisY:[
    {
      minimum: 0,
      maximum: 100
    }
  ],
  data: [{
    // dataSeries1
    type: "line",
    xValueType: "dateTime",
    axisYIndex: 0, //defaults to 0
    showInLegend: true,
    name: "DataSeries A",
    color: "green",
    dataPoints: dataPoints1
  },
         {
           // dataSeries2
           type: "line",
           xValueType: "dateTime",
           axisYIndex: 0,
           showInLegend: true,
           name: "DataSeries B",
           color: "orange",
           dataPoints: dataPoints2
         }]
});


var updateInterval = 1000;  // in milliseconds

var updateChart = function () {                   
  var viewportDataLength = 62; // number of dataPoints visible at any point in the viewport for each dataseries
  // pushing the new values
  dataPoints1.push({
    x: dataPointsStore1[runningIndex].x,
    y: dataPointsStore1[runningIndex].y
  });

  if (dataPoints1.length > viewportDataLength)
    dataPoints1.shift();                

  dataPoints2.push({
    x: dataPointsStore2[runningIndex].x,
    y: dataPointsStore2[runningIndex].y
  });

  if (dataPoints2.length > viewportDataLength)
    dataPoints2.shift();

 ...