JSFiddle - React, Tailwind, and code Playground

by ow ow

HTML

<script src="http://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: 400px; width: 100%;"></div>
<button id="btnStop" type="button" onclick="btnStopClick()">Stop Display Update</button>

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",{
      	title :{
      		text: "Live Data"
      	},
        zoomEnabled: true,
      	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); 


function btnRefreshClick() {
   //Need to programatically stop the chart display update here, without stopping the data feed, just like it is done by CanvasJS when zooming into the live chart
   //Once the display is stop, need to zoom in withing a specific range of the data, e.g. between the X:10: X:20 marks
   //Once the user clicks on the CanvasJS Refresh button, the chart display shall resume, without showing any breaks, i.e. the Stop operation must not impact the actual dataseries update, just its display, just like it is done by CanvasJS when manually zooming into the live chart.
}