Help with Dynamic chart, please !!!

[Sanjoy]

hitmanbaby2007,

I am expecting DOMContentLoaded is fired before window.onload. So, here something might go wrong. Please refer http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events

[cool1]

Sorry, doesn’t work :-(

Regards,
Cool1

[Sanjoy]

You have to replace the link with your PHP file. I have updated updateChart. Finally your code should look like…..

$(document).ready(function() {

	var chart;
	
	$.getJSON("ratingsdata.php", function(result) {

		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) {

			var data = {
					dataPoints: result
				};
			chart.options.data.push(data);
			chart.render();
		});

	};

	//Function for button click event

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

});

[cool1]

Hello Sanjoy,

Appreciate you taking time and reverting. Unfortunately, it is still not working.
And yes, i did update the php links….hehe :-)
I echoed the O/P to check if the json code returned from the second php file is proper, and yes it is. Could there be something fundamentally wrong in the updateChart function? like the new data is being assigned to a variable “data” instead of an array being used in the document ready function which works? Apologies if i am totally going bonkers here, i still am studying the basics.

By any chance, could u paste a working example with the sample json data format i provided earlier, on jsfiddle. I don’t have an account there and honestly never explored it. Though now may be the time to do it :-)

Thanks once again.
Cool1

[Sanjoy]

If your recived JSON format is [{"label":"rating1","y":6},{"label":"rating2","y":3},{"label":"rating3","y":4}]
then you can check with this working fiddle.

[cool1]

Sanjoy,

I am quite surprised to see the effort you have put in to assist me. It is truly commendable. Thanks:-)
I have checked the fiddle and see that, when we click the button, the new json data is appended to the chart while retaining the old data as well.(i.e the earlier columns, representing ratings of default product remain as it is, while the new columns representing ratings of new product are displayed besides them). My requirement is to clear the earlier columns completely and just display the new columns (representing the new data). Is this possible?

Also the earlier data if held in memory should be cleared altogether. As i don’t need any memory overhead.
Further, the code that seems to work in your fiddle isn’t working for me. I suspect it’s because of the new columns being populated in addition to the original columns (9 in my case) , it must be going out of the chart container width i have specified.

Ok, I just increased the container width and it still didn’t work. Looks like the only option now is to clear the earlier columns and replace it with new columns.

Regards,
Cool1

• This reply was modified 7 years, 10 months ago by cool1.
• This reply was modified 7 years, 10 months ago by cool1.
• This reply was modified 7 years, 10 months ago by cool1.

[Sanjoy]

Here is the updated fiddle as per your requirement.

And regarding the issue you were facing, columns not being show after 9 dataSeries, please create a jsfiddle so that we can look into it.

[DoMiNo]

Hello Sanjoy

I’m trying to test this canvas.js it looks awesome, but i dont have the stucture of json in your example.

Is it possible to modify the script ($.getJSON) I have a php api file that outputs json data with this structure:
[{“car1″:1568,”car2″:4398,”car3″:0,”car4″:0,”car5″:7388,”car5″:1112,”car6″:23371.76,”car7″:6807,”Totalt”:44644.76}]

Is that possible? Or do i have to modify the api to output json data in a diffrent way?

[Sanjoy]

DoMiNo,

You can change data-structure using any technology either in server side or client side to fit with CanvasJS. Here is an example to format in client side using JavaScript.

[cool1]

Sanjoy,

Though its not working for me at this moment, atleast i am assured that it should work. Thanks to u:-). I am checking stack overflow for similarly listed issues i.e (jsfiddle works but actual code doesnt work locally, and have found some things that i may try). I know, i have overdone it, however a humble request. The second attempt when the new data is plotted on the chart, can we make that animated too. The switchover happening from first plot to the second plot is kind of abrupt and doesn’t go with the flow visually.

No issues, if you are busy though. You have been awesome already.
Also, can someone from your sales team send a license quote on my email, as i may opt for it in near future. It is intended for a web application.

Cheers,
Cool1

[DoMiNo]

Sanjoy,

Awesome, many thanks.

[Sanjoy]

cool1,

Thanks for your suggestion, we will consider it for future versions. As of now chart animates only while rendering for the first time.