Dear Mr.Sanjoy, I did try your advice and I thought the problem is still exist somewhere in updateChart() function.
Let’s get back to my data example :
if (!!window.EventSource) {
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++) {
yVal = parseInt(e.data.substr(k, 5)));
}
}, false);
}
else {
console.log('sse not supported');
}
}, false );
Here you can see I’ve add up yVal variable to store the data. This time, the signal will be plot with the old updateChart() function :
var updateChart = function (count) {
var count = count || 1;
for (var j = 0; j < count; j++) {
xVal ++;
dps[xVal % dataLength].y = yVal;
dps[(xVal+gap) % dataLength].y = null;
};
chart.render();
};
However, the plotted signal is still depend on setInterval() function and the result is wrong, indeed.
Ok, I changed the updateChart() function with your code above :
var updateChart = function (yVal) {
xVal ++;
dps[xVal % dataLength].y = yVal;
dps[(xVal+gap) % dataLength].y = null;
chart.render();
};
With this one, the signal has not been plotted even though I removed or keep the setInterval() as well.
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);
}
Looks like I’m misunderstanding somewhere…
For example : My data receive from Event Source :
if (!!window.EventSource) {
var source = new EventSource(‘http://localhost:49999/api/chart/’);
source.addEventListener(‘message’, function (e) {
console.log(e.data);
yVal = parseInt(e.data, 10);
}, false);
);
Here you can see I set yVal variable to receive e.data
How can canvasjs dynamic chart update this yVal data without setInterval() ?
Thank you Mr.Sanjoy, you are my sunshine !!!
However, how can I update my yVal and remove the setInterval(), seems like remove it does not make thing work at all. my yVal is a global variable and yVal receive a signal from somewhere, example from serial port. How can we update it automatically without using setInterval() ? If you can make an example with yVal receive data by a click button (I think this method is the same with receiving serial port data) and it plot right after this click !
Thank you so much, sir !
Thank you for your answer Mr.Vishwas, however it’s not what I mean.
1. After xVal reach the maximum datalength, it will go back to xVal = 0, remove old signal then plot again.
Like this
<iframe src=”https://www.motionelements.com/embed/c/1673394″ allowfullscreen style=”width:480;height:379;border:none;”></iframe>
2. Remove setInterval() seems like not make sense at all, I tried with the example code but it’s not working
Why it doesn’t work ?
<!DOCTYPE html>
<?PHP
$file_handle = fopen("testgraph.txt", "r");
while (!feof($file_handle) ) {
$line_of_text = fgets($file_handle);
$parts = explode(' ', $line_of_text);
//print $parts[0]. "<BR>";
// $parts[0]. $parts[1].
}
fclose($file_handle);
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Generating DataPoints in a loop - jsFiddle demo by anjalij</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var limit = 100; //increase number of dataPoints by increasing this
var y = 0;
var x=0;
var data = []; var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
y = <?php echo $parts[i] ?>;
dataPoints.push({
x: i,
y: y
});
x+= 0.25;
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
title:{
text: "Generating DataPoints in a loop"
},
axisX:{
//minimum: 0,
//maximum: 300 ,
valueFormatString:"0.00"
},
data: data,
});
chart.render();
}//]]>
</script>
</head>
<body>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
My .txt file is here :
http://ladykillernicky.uni.me/testgraph.txt