JSFiddle - React, Tailwind, and code Playground

by unixssh

JavaScript

<!DOCTYPE html>
<html>
<head> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
<script type="text/javascript">
window.onload = function () {

var bigArray = [];
var dataObj = {type: "spline", dataPoints: []};
bigArray.push(dataObj);

var hoursList = [];
var hoursLimit = 24;
var y=0;

//generateHours();
	for ( var j = 0; j < hoursLimit; j++ ) {
		y += Math.round( 10 + Math.random() * (-10 -10));
		var date2 = new Date();
		date2.setHours(j);
		date2.setMinutes(0);
		date2.setSeconds(0);
		date2.setMilliseconds(0);
		dataObj.dataPoints.push({x:date2, y:y})
	}
	
	var chart = new CanvasJS.Chart("chartContainer", { 
		title: {
			text: "Adding & Updating dataPoints"
		},		
		zoomEnabled:true,
		rangeChanged:function(e){
		
				chart.options.title.text = "Last DataPoint Updated";
				chart.options.data[0].dataPoints = [];	
			
				var minuteList = [];
				var minuteLimit = 500;
			//var w;
				for ( var i = 0; i < minuteLimit; i++ ) {
				var w = Math.round( 10 + Math.random() * (-10 -10));
				var date1 = new Date();
				
				date1.setMinutes(i);
				date1.setSeconds(0);
				date1.setMilliseconds(0);
			
				chart.options.data[0].dataPoints[i] = {x:date1, y:w};
			}

		chart.render();
		
		},
		data: bigArray
		
	});
	
	chart.render();	
	

	
	

	$("#addDataPoint").click(function () {


	chart.options.title.text = "New DataPoint Added at the end";
	chart.options.data[0].dataPoints.push({ y: 25 - Math.random() * 10});
	chart.render();

	});

	$("#updateDataPoint").click(function () {
	
	

	});
}
</script>
</head>  
<body>  
<div id="chartContainer" style="width:100%; height:280px"></div>  
<button id="addDataPoint">Add Data Point</button>  
<button id="updateDataPoint">Update Data Point</button>  
</body>
</html>