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

This topic contains 26 replies, has 5 voices, and was last updated by  Sanjoy 2 years, 2 months ago.

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #10586

    Sanjoy
    Participant

    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

    #10589

    cool1
    Member

    Sorry, doesn’t work :-(

    Regards,
    Cool1

    #10592

    Sanjoy
    Participant

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

    cool1
    Member

    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

    #10598

    Sanjoy
    Participant

    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.

    #10612

    cool1
    Member

    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 2 years, 2 months ago by  cool1.
    • This reply was modified 2 years, 2 months ago by  cool1.
    • This reply was modified 2 years, 2 months ago by  cool1.
    #10658

    Sanjoy
    Participant

    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.

    #10661

    DoMiNo
    Member

    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?

    #10662

    Sanjoy
    Participant

    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.

    #10896

    cool1
    Member

    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

    #11039

    DoMiNo
    Member

    Sanjoy,

    Awesome, many thanks.

    #11082

    Sanjoy
    Participant

    cool1,

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

Viewing 12 posts - 16 through 27 (of 27 total)

You must be logged in to reply to this topic.