JSFiddle - React, Tailwind, and code Playground

by nidhipathak

HTML

<body>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js" >  </script>
<div id = "chartContainer"/>
</body>

JavaScript

var xAxisStripLinesArray = [];
var yAxisStripLinesArray = [];
var dps = [];
var xlab;
var chart = new CanvasJS.Chart("chartContainer",
	{
	
        exportEnabled: true,
  	title:{
      	text:"ECG Report",
      },

        axisX:{
	stripLines:xAxisStripLinesArray,
      	gridThickness: 0.7,
        gridColor:"red",
        tickColor:"transparent",
	interval: 1,
        labelFontColor:"blue",
        //labelFontSize: 10,
        labelFormatter: function(e){
	xlab = e.value; //console.log(xlab);
	return  "" + e.value;} 
	
        },
	
	axisY:{
	stripLines:yAxisStripLinesArray,
      	gridThickness: 0.5,
        gridColor:"#DC74A5",
        tickColor:"transparent",
        labelFontColor:"transparent",
	minimum: 0,
	maximum: 7,
        interval: 0.2,
        labelFontSize: 10, 
        },
      data: [
      {
        type: "spline",
        color:"transparent",	
        dataPoints: dps
      }
      ]
    });

	var xVal = 0; 
	var yVal = 0, updateCount = 0;
	var xx = 0;
        var yy = 0;
	var updateInterval = 1000;
	var dataLength = 10; // number of dataPoints visible at any point



var updateChart = function (count) {
	
	count = count || 1;
	// count is number of times loop runs to generate random dataPoints.
	
	for (var j = 0; j < count; j++) 
	{	
		yVal =  yVal + Math.round(5 + Math.random() *(-5-5));
	        xVal = xVal + 1;      	
		//dps.shift();
		dps.push({y: yVal, x : xVal});
		xx++;
	
	}
 	
	yAxisStripLinesArray.push({value:yy,thickness:0.7, color:"red",labelFontColor:"black",label:yy});
	yy = yy+1;		
	  

	var tt = xlab; 
        if (tt % 1 == 0)	{
		console.log("XLAB-----"); console.log(xlab);
		var itemp = xlab; //console.log("itemp"); console.log(itemp);		
		for ( j = 0; j < 5; j++)
		{
			console.log("INSIDE FOR");
			xAxisStripLinesArray.push({value:itemp,thickness:0.7, color:"pink"});
			itemp = itemp+0.2; 
		}         

	 }  
	//console.log("+++++");
      
                  
	if (dps.length > dataLength) {
		dps.shift(); dps.push({y: yVal, x...