JSFiddle - React, Tailwind, and code Playground

by Michael

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];   //dataPoints. 

      var chart = new CanvasJS.Chart("chartContainer",{
      	exportEnabled: true,
        title :{
      		text: "Live Data"
      	},
      	axisX: {						
      		title: "Axis X Title"
      	},
      	axisY: {						
      		title: "Units"
      	},
      	data: [{
      		type: "line",
      		dataPoints : dps
      	}]
      });

      chart.render();
      var xVal = dps.length + 1;
      var yVal = 15;	
      var updateInterval = 1000;

      var updateChart = function () {
      	
      	
      	yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
      	dps.push({x: xVal,y: yVal});
      	
      	xVal++;
      	if (dps.length >  10 )
      	{
      		dps.shift();				
      	}

      	chart.render();		

	// update chart after specified time. 

};

setInterval(function(){updateChart()}, updateInterval);