HTML5 Dynamic Chart - CanvasJS

An HTML5 Dynamic Chart built using CanvasJS. Updates every 20 milliseconds

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<p class="description">An HTML5 Dynamic Chart built using CanvasJS. Updates every 20 milliseconds.<br/> Built using <a href="http://canvasjs.com" title="CanvasJS HTML5 Charts" target="_blank">CanvasJS HTML5 Charts</a>
</p>

CSS

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

JavaScript

var dps = []; // dataPoints

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


	var xVal = 0;
	var yVal = 100;
	var updateInterval = 20;  // milliseconds
	var dataLength = 500; // number of dataPoints visible at any point

    // Add (Remove) dataPoints to (from) dps and call chart's render method
	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));
	        dps.push({
	            x: xVal,
	            y: yVal,
	        });
	        xVal++;
	    };
	    if (dps.length > dataLength) {
	        dps.shift();
	    }

	    chart.render();

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

	};

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