Home forums Using CanvasJS Help with Dynamic chart, please !!! Reply To: Help with Dynamic chart, please !!!

#10566

hitmanbaby2007
Participant

Dear Mr.Sanjoy, I did try exact the same thing you did above before I’ve post the question. The weird things is, what wrong inside over here ? This is my full code :

document.addEventListener( 'DOMContentLoaded', function () {
	if (!!window.EventSource) {
		var source = new EventSource('data');
		source.addEventListener('message', function(e) {      
            for(var k = 0; k < e.data.length; k +) {
               updateChart(parseInt(e.data.substr(k, 5)));
	         }
		}, false);
	}
	else {
		console.log('sse not supported');
	}
}, false );

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

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

		for(var i = 0; i< dataLength; i++)
			dps.push({y: null});
			
	        var updateChart = function (yVal) {	
			xVal ++;
			dps[xVal % dataLength].y = yVal;
			dps[(xVal+gap) % dataLength].y = null;
			chart.render();		
		};

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