ECG Report using Spline Chart, Striplines - CanvasJS JavaScript Charts

ECG Report using Spline Chart, Striplines - CanvasJS JavaScript Charts

HTML

<script src="http://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: 400px; width: 100%;"></div>

JavaScript

var dps = []; // dataPoints

		var chart = new CanvasJS.Chart("chartContainer",{
			title :{
				text: "Live Random Data"
			},	
       axisX: {
                gridThickness: 1,
                gridColor: "#ec7893",
                interval: 20,
                labelFormatter: function (e) {
                    return "";
                }
            },
            axisY: {
                gridThickness: 1,
                gridColor: "#ec7893",
                interval: 40,
                minimum: -50,
                maximum: 500,
                labelFormatter: function (e) {
                    return "";
                }
            },
			data: [{
				type: "line",
				dataPoints: dps 
			}]
		});

		var xVal = 0;
		var yVal = 100;	
		var updateInterval = 100;
		var dataLength = 500; // 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));
				dps.push({
					x: xVal,
					y: yVal
				});
				xVal++;
			};
			if (dps.length > dataLength)
			{
				dps.shift();				
			}
			
			chart.render();		

		};

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

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