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);
}