[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

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

[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

[cool1]

Sorry, doesn’t work :-(

Regards,
Cool1

[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

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

});

});