[hitmanbaby2007]

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.

[hitmanbaby2007]

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

• This reply was modified 7 years, 11 months ago by hitmanbaby2007.
• This reply was modified 7 years, 11 months ago by hitmanbaby2007.

[hitmanbaby2007]

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() ?

[hitmanbaby2007]

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 !

[hitmanbaby2007]

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&#8243; 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

• This reply was modified 7 years, 11 months ago by hitmanbaby2007.

[hitmanbaby2007]

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