Dynamic Chart - CanvasJS JavaScript Charts

Dynamic Chart - CanvasJS JavaScript Charts

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 yVal = 100;	
		var updateInterval = 100;
		

		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));//assign y-value here
				dps.push({
					y: yVal
				});
			};
			
			
			chart.render();		

		};

		// update chart after specified time. 
      setInterval(function(){updateChart()}, updateInterval); //Remove setInterval and call updateChart when y-vlaue is available