Help with Dynamic chart, please !!!

[hitmanbaby2007]

Here is the original example code :
https://canvasjs.com/html5-javascript-dynamic-chart/

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 !

• This topic was modified 8 years, 7 months ago by hitmanbaby2007.
• This topic was modified 8 years, 7 months ago by hitmanbaby2007.

[Vishwas R]

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.

[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 8 years, 7 months ago by hitmanbaby2007.

[Sanjoy]

Hi,

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

[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 !

[Sanjoy]

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

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

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

[Sanjoy]

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.

[cool1]

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

});

});

[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 8 years, 6 months ago by hitmanbaby2007.
• This reply was modified 8 years, 6 months ago by hitmanbaby2007.

[Sanjoy]

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.

[Sanjoy]

Hi cool1,

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

[cool1]

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

[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.

[Sanjoy]

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 8 years, 6 months ago by Sanjoy.