Performance issues using multiple charts on the same page

[mgarneau]

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?

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

[chumba]

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 February 12, 2010 by Guest

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

[chumba]

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?

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

[chumba]

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

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

[chumba]

here it is...

snippet.txt

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

[chumba]

can you supply the generic code for this?

 

 

 

I don't understand

[chumba]

Any help with this?

[mgarneau]

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

[chumba]

Good luck with that !

 

 

 

Let me know how it goes.

[nytr0x]

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 - DOH!!! FC_Loaded does just the trick]

Edited July 28, 2010 by Guest

[Sanjukta]

Hi,

Glad that your issue is resolved.

Thanks for sharing the idea.

Happy FusionCharting!

[nytr0x]

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.