Forum Replies Created by hitmanbaby2007

Viewing 6 posts - 1 through 6 (of 6 total)
  • in reply to: Help with Dynamic chart, please !!! #10579

    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.

    in reply to: Help with Dynamic chart, please !!! #10566

    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); 
    	}
    in reply to: Help with Dynamic chart, please !!! #10561

    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/&#8217;);
    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() ?

    in reply to: Help with Dynamic chart, please !!! #10554

    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 !

    in reply to: Help with Dynamic chart, please !!! #10545

    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

    in reply to: How can I plot values from .txt file ? #6773

    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

Viewing 6 posts - 1 through 6 (of 6 total)