Live Random Data - CanvasJS

Live Random Data - CanvasJS

by canvasjs

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

var dps = []; // dataPoints

		var chart = new CanvasJS.Chart("chartContainer",{
			title :{
				text: "Live Random Data"
			},			
			data: [{
				type: "line",
				dataPoints: dps 
			}]
		});

		var xVal = 0;
		var yVal = 100;	
		var updateInterval = 100;
		var gap = 50; // difference between head and tail of line
		var dataLength = 500; // number of dataPoints visible at any point

		for(var i = 0; i< dataLength; i++)
			dps.push({y: null});
			
		var updateChart = function (count) {
			var count = count || 1;
			
			// count is number of times loop runs to generate random dataPoints.
			for (var j = 0; j < count; j++) {
				xVal ++;
				yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
				dps[xVal % dataLength].y = yVal;
				dps[(xVal+gap) % dataLength].y = null;
			};
			
			chart.render();		

		};

		// generates first set of dataPoints
		updateChart(dataLength); 

		// update chart after specified time. 
		setInterval(function(){updateChart()}, updateInterval);