Home forums Using CanvasJS Help with Dynamic chart, please !!!

This topic contains 26 replies, has 5 voices, and was last updated by  Sanjoy 6 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #10534

    hitmanbaby2007
    Participant

    Here is the original example code :

    Dynamic Chart Gallery

    I’m working with Live Random Data chart !

    I need to update the value without setInterval(), I mean whenever the yAxis got a value somewhere, then it will plot automatically without time delay. One more thing, I dont’t want to shift the graph while the value reach datalength, when it reach the maximum datalength, clear all the old plotted data, go back to 0 point and plot again.

    Thank you for your support !

    #10538

    Vishwas R
    Keymaster

    You can remove dps.shift from the example to avoid shifting. Check this example.

    And you can remove setInterval to avoid update of charge based on time-basis and you can manually push y-value to dataPoints and render chart whenever you get y-value.

    #10545

    hitmanbaby2007
    Participant

    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

    #10553

    Sanjoy
    Moderator

    Hi,

    I hope this example will help you to implement the same as your link.

    #10554

    hitmanbaby2007
    Participant

    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 !

    #10556

    Sanjoy
    Moderator

    If you want to update on Click of button instead of setInterval you can use

    document.getElementById("updateButtonId").onclick = function(){ updateChart(5); }

    #10561

    hitmanbaby2007
    Participant

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

    #10562

    Sanjoy
    Moderator

    In this case you have to change updateChart function as

    var updateChart = function (yVal) {
    			
    			xVal ++;
    			dps[xVal % dataLength].y = yVal;
    			dps[(xVal+gap) % dataLength].y = null;
    			
    			chart.render();		
    
    		};

    And in your eventListner function you have to call updateChart(e.data);
    I hope this will help you to implement required chart.

    #10564

    cool1
    Member

    Hi,

    I am a novice user and have put up the below code with help from some forums. I am able to get json data from a php page and display the same on a chart using document ready function. However, now i am pulling json data from another php page and trying to redraw it on the same chart on a button click event. I am new to web programming and have been unsuccessful in tracing where I am going wrong. Could you please review the code and suggest. I have registered just now and in haste didnt find the new post option so appended below this post which is somewhat relevant.

    //When page is loaded the below function loads the chart with a default product rating

    $(document).ready(function () {

    $.getJSON(“ratingsdata.php”, function (result) {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Product Ratings”
    },

    animationEnabled: true,

    data: [

    {
    dataPoints: result
    }
    ]
    });

    chart.render();

    //Function to render the chart on button click

    var updateChart = function () {

    $.getJSON(“selected_product.php”, function (result) {

    data: [

    {
    dataPoints: result
    }
    ]

    });

    alert(“success”);
    chart.options.data.push(result);
    chart.render();
    };

    //Function for button click event

    document.getElementById(“viewratings”).onclick = function(){
    updateChart(); }

    });

    });

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

    Sanjoy
    Moderator

    himanbaby2007

    It is tough to guess the issue without knowing your data format. Can you provide your sample data? For now I can suggest you to

    1) In line 5 instead of k+ use k++
    2) Move your document.addEventListener( 'DOMContentLoaded', function (){..code..} in place of updateChart(dataLength).
    3) Check the url in EventSource.

    #10575

    Sanjoy
    Moderator

    Hi cool1,

    Can you post your sample JSON data. So that we can help you out.

    #10576

    cool1
    Member

    Hi Sanjoy,

    Below is the json data format returned by the php page. It is ratings for a product.
    Please note that the default json data (rating for a default product) returned initially on document ready function displays as needed on the canvasjs chart. However the second attempt to populate the same chart using json data from another php file (ratings of another product) doesn’t work.

    json data:
    [{“label”:”rating1″,”y”:6},{“label”:”rating2″,”y”:3},{“label”:”rating3″,”y”:4}]

    Regards,
    Cool1

    #10579

    hitmanbaby2007
    Participant

    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.

    #10585

    Sanjoy
    Moderator

    cool1,

    Replacing your updateChart with below would render the chart.

    var updateChart = function() {
        $.getJSON("selected_product.php", function(result) {
            var data = {
                dataPoints: result
            };
            chart.options.data.push(data);
            chart.render();
        });
    };
    
    • This reply was modified 6 months, 1 week ago by  Sanjoy.
Viewing 15 posts - 1 through 15 (of 27 total)

You must be logged in to reply to this topic.