chumba

Performance issues using multiple charts on the same page

Recommended Posts

Hi,

I'm rendering about 10 charts on the same page.

When the page first loads, the browser seems to freeze for the first 3-4 seconds. Does someone know a solution to this?

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

Could you please try using animation='0' in the <chart> element?

Also, could you please let us know whether you are using datURL method or dataXML method for rendering the chart.

Awaiting your reply. :) 

Share this post


Link to post
Share on other sites

Hi

 

 

 

I have a similar issue. I have created a dashboard that contains quite a number of graphs.

 

 

 

The browser does freeze during loading - i'm sure this is browser/bandwidth issue rather than fusioncharts but is there anyway to display an overall loading layer on the page?

 

 

 

FYi I am using:

 

 

 

chart1.setDataXML

 

 

 

 

 

 

 

There is lots of this on the page:

 



                           var chart1 = new FusionCharts("graphs/MSColumn2D.swf", "23", "800", "500", "0", "0");

                           chart1.setDataXML("");

                           chart1.render("22009div");

 

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi Chumba,

Could you please try customizing your code such that before the chart gets rendered, it would display the loading image in the same DIV and would get rendered in the same div replacing/overlapping the loading image?

Hope this helps. :)

Share this post


Link to post
Share on other sites
Basundhara Ghosal (2/12/2010)
Hi Chumba,

 

 

 

Could you please try customizing your code such that before the chart gets rendered, it would display the loading image in the same DIV and would get rendered in the same div replacing/overlapping the loading image?

 

 

 

Hope this helps. :)

 

 

 

Hi Basundhara.

 

 

 

I'd like to try your suggestion. how do i do this?

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi Chumba,

Could you please try the following steps:-

1) Set the chart and the loading image on the same DIV.

2) Set the transparency of the chart to true so that the loading image gets displayed on top of the chart.

3) Set the tranparency of the chart to false once the hasRendered function gets fired.

Please refer to the links below for further details on the same.

Ref.- http://www.fusioncharts.com/docs?/JS_API.html

http://www.fusioncharts.com/docs?/FAQ.html

Hope this helps. :)

Share this post


Link to post
Share on other sites
Basundhara Ghosal (2/16/2010)
Hi Chumba,

 

 

 

Could you please try the following steps:-

 

 

 

1) Set the chart and the loading image on the same DIV.

 

 

 

2) Set the transparency of the chart to true so that the loading image gets displayed on top of the chart.

 

 

 

3) Set the tranparency of the chart to false once the hasRendered function gets fired.

 

 

 

Please refer to the links below for further details on the same.

 

 

 

Ref.- http://www.fusioncharts.com/docs?/JS_API.html

 

http://www.fusioncharts.com/docs?/FAQ.html

 

 

 

Hope this helps. :)

 

 

 

i tried the following code but it doesnt work

 

would you mind checking the attachment.

 

 

 

I have given each chart a unique div and id - thats what the php code is for.

snippet.txt

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi Chumba,

We are not able to access the code that you have sent us. This might happen due to some error in the process.

Could you please re-send the code ?

Awaiting your reply. :)

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi Chumba,

Could you please try customizing your code using your own JavaScript logic so that you:-

1) Set the chart and the loading image on the same DIV.

2) Set the transparency of the chart to true so that the loading image gets displayed on top of the chart.

3) Set the tranparency of the chart to false once the hasRendered function gets fired.

Hope this helps. :)

Share this post


Link to post
Share on other sites

I am working on a solution for this. Basically I load the charts using AJAX instead of loading them with the page.

So when the page loads I show ajax loader images for a few seconds while the charts are being loaded by the AJAX call. When a chart is ready I hide the AJAX loader image and display the chart

What I am now trying to do is to display the ajax loader image until FC_rendered is called (because even though the AJAX call returns with success, the flash chart is not fully rendered yet).

Share this post


Link to post
Share on other sites

I've done something similar to this but my problem is that FC_Rendered isn't firing until after the chart has finished animating. Thus the chart has an ugly "loading..." message on top of it until it finishes animating. Of course I could get rid of the animation but that's one of the "wow" factors with your charts.

 

 

 

Is there another option? A setting to get FC_Rendered to fire before the chart starts animating? or another event I can use to hide my loading message just as the chart starts to animate?

 

 

 

I've been trawling the forum looking for a solution but haven't found one.

 

 

 

Many thanks ...

 

 

 

[EDIT :blush: - DOH!!! FC_Loaded does just the trick]

Edited by Guest

Share this post


Link to post
Share on other sites

Although I have a nice "Loading..." message displayed for each chart, the performance via ajax/javascript appears a lot slower than via traditional direct dataURL links. I am using ASP.Net and AJAX with IE6.

 

 

 

I have a dashboard page with 6 charts. When the page loads, 6 ajax calls are made to prepare the xml. On completion of each Ajax call the XML is returned and the chart rendered. I have it working with both setDataURL and setDataXML and both behave the same.

 

 

 

I would expect each of my charts to render independently at slightly staggered intervals. However it seems the charts try to render together. At least 4 charts render at the same time (sometimes 5), meaning they start animating (or appear if I disable animation) at exactly the same time. This would be nice if it took only a few seconds, however it is more like 10-15 seconds after the first chart has received its XML.

 

 

 

Its as if the flash charts are working together and when the first chart is ready it waits for the next, and the next waits for the next, and so on until there's at least 4 charts are ready and then they render together. The remaining charts then render once these finish animating.

 

 

 

Is this by design, or is Flash/IE doing something? Thanks for advice as I'd like to use the AJAX methodology with each chart rendering as soon as it is ready. Giving users the perception of increased speed even if the whole dashboard is actually taking the same amount of time to load.

 

 

 

Thanks. N.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now