nam37

Bug when loading multiple charts on a page...

Recommended Posts

It looks like IE (I've tested both v7 and v8 on different machines) has a problem rendering more than one chart per page.

When the following page renders often one or more of the charts only show "Loading Chart...".  The same thing is happening with your sample code at: /FusionChartsDOM_v1.0/Examples/basic_simple_multiple.html

I also have issues loading your page at: http://www.fusioncharts.com/DOM/demo/multiple.asp

For testing I've used the following, which is basically just your sample multiple times on the same page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
<script type="text/javascript" src="http://www.fusioncharts.com/DOM/docs/JavaScripts/FusionCharts.js"></script>
<script type="text/javascript" src="http://www.fusioncharts.com/DOM/docs/JavaScripts/FusionChartsDOM.js" 
parameters="swfPath: 'http://www.fusioncharts.com/DOM/docs/FusionCharts/'"></script>
</head>
<body>
<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>
<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>
<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>

<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>

<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>

<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>

<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>

<fusioncharts chartType="Doughnut2D" width="100%">
  <data><!--[CDATA[
   <chart caption="Usage share of Web Browsers"
  subcaption="Third quarter of 2008" numberSuffix="%"
  palette='3' pieRadius='90' >
 
  <set name="IE6" tooltext="Internet Explorer 6" value="33.13" />
  <set name="IE7" tooltext="Internet Explorer 7" value="39.09" />
  <set name="Chrome" tooltext="Chrome" value="0.26" />
  <set name="FF" tooltext="Mozilla Firefox" value="19.48" />
  <set name="N" tooltext="Netscape" value="0.68" />
  <set name="Opera" tooltext="Opera" value=".71" />
  <set name="Safari" tooltext="Safari" value="6.39" />
  <set name="Others" tooltext="Others" value="0.26" />
   </chart>
  ]]--></data>
</fusioncharts>
</body>
</html>

Edited by Guest

Share this post


Link to post
Share on other sites

...

Hello nam37,

In accordance with the normal behaviour of FusionCharts, you cannot include FusionCharts SWF files using absolute http:// URLS that are outside your working domain.

In simpler words, your code will work provided you run the JS locally and have your SWF files stored locally. When running your web-pages on servers, you are advised to use only relative URLs as swfPath.

You should download the available DOM codes from http://www.fusioncharts.com/DOM/ and upload the evaluation Charts and corresonding JavaScripts onto your own web server. In case you are running them locally, you need to keep them alongside the HTML files where you have coded to include the charts. In case your HTML files are located elsewhere, you can provide a relative path within the <fusioncharts> tag or parameters="" section to point to the FusionCharts SWF files.

Thus effectively, the <head> section of your code has to be (in case your FusionCharts codes are one directory higher than your working HTML):

<head>

<title>Untitled</title>

<script type="text/javascript" src="../FusionCharts/JavaScripts/FusionCharts.js"></script>

<script type="text/javascript" src="../FusionCharts/JavaScripts/FusionChartsDOM.js"

  parameters="swfPath: '../FusionCharts/'"></script>

</head>

Edited by Guest

Share this post


Link to post
Share on other sites

I also see this problem in IE7 (with all files being referenced locally). The first chart loads (I think) but then is reduced to only show the labels all stacked on top of each other, then the second chart loads correctly.

Share this post


Link to post
Share on other sites

...

Hello sapha and nam37,

Thank you for testing out FusionCharts DOM. I have compiled the code from the post by nam37 and have attached to this post.

Running the code on an isolated Virtual Machine with Flash Player 10 and Internet Explorer 6, Internet Explorer 7, Opera 9.20 and Firefox 3.0 returned no error. Multiple charts were loading just fine. It would help us a lot if you could kindly run the attached code on your machines and let us know whether it worked fine. Kindly note that when you are testing locally in IE with Windows XP SP2 or above, you need to "Allow Blocked Content" on the yellow "Information Bar" that appears on top when you first open the test-code.

FusionCharts DOM is an advanced JavaScript Framework to simply make it easier for you to include FusionCharts into your webpages. In case there is any error with the presentation within the chart, we would have to treat this issue differently and as not related to FusionCharts DOM.

Furthermore, the errors you were facing at http://www.fusioncharts.com/DOM/demo/multiple.asp has been resolved. Now you should not face any difficulty in loading this demo. Do remember to clear your browser-cache in case you intent to re-visit this demo page. Thanks a lot nam37 for pointing out this issue on the demo page.

TestId 11383-61-1.zip

Edited by Guest

Share this post


Link to post
Share on other sites

I'm facing the same problem. Sometimes all the charts render, othertimes one or two just say "Loading Chart ...". This also happens with the attached TestId example.

 

 

 

I'd really like to use the DOM but atm it doesn't seem to work reliably. I am using IE6, with Flash 10.

 

 

 

How do I use the RenderAllCharts() function to force a reload of all charts? Maybe that will help.

 

 

 

Many thanks,

 

N.

Share this post


Link to post
Share on other sites
nytr0x (2/26/2009)
I'm facing the same problem. Sometimes all the charts render, othertimes one or two just say "Loading Chart ...". This also happens with the attached TestId example.

 

 

 

I'd really like to use the DOM but atm it doesn't seem to work reliably. I am using IE6, with Flash 10.

 

 

 

How do I use the RenderAllCharts() function to force a reload of all charts? Maybe that will help.

 

 

 

Many thanks,

 

N.

 

 

 

bump.

Share this post


Link to post
Share on other sites

...

Gondrong (3/10/2009)
How can I use FusionDOM but in the JS code directly? because in here it looks like it is placed in the html.

 

Thanks

Hello Gondrong,

FusionCharts DOM framework is meant to be used within HTML itself and not within JavaScripts. The JavaScript Framework within FusionChartsDOM.js does all the hard work of converting your HTML code in appropriate FusionCharts objects.

Share this post


Link to post
Share on other sites

...

nytr0x (2/26/2009)
I'm facing the same problem. Sometimes all the charts render, othertimes one or two just say "Loading Chart ...". This also happens with the attached TestId example.

 

I'd really like to use the DOM but atm it doesn't seem to work reliably. I am using IE6, with Flash 10.

 

How do I use the RenderAllCharts() function to force a reload of all charts? Maybe that will help.

 

Many thanks,

N.

Hello nytr0x,

FusionCharts DOM has some known issues with Internet Explorer. We are currently in the process of resolving them.

In the meanwhile, you can try setting "renderOnLoad" setting to be false in global script settings (refer to the last point of "Features Explained" section in our DOM related documentation at http://www.fusioncharts.com/DOM/docs/.)

<script type="text/javascript" src="FusionCharts/FusionChartsDOM.js" settings="renderOnLoad: false"></script>

After setting this to false, you can try doing FusionChartsDOM.RenderAllCharts(true); sometime onLoad of the page or on some other event. Note that you should allow the page to fully load prior to calling any render function.

This may or may not be of help as the results are still yet to be fully tested with certain results. Do let us know if it helped resolving your issues.

Share this post


Link to post
Share on other sites
shamasis (3/12/2009)
...

nytr0x (2/26/2009)
I'm facing the same problem. Sometimes all the charts render, othertimes one or two just say "Loading Chart ...". This also happens with the attached TestId example.

 

I'd really like to use the DOM but atm it doesn't seem to work reliably. I am using IE6, with Flash 10.

 

How do I use the RenderAllCharts() function to force a reload of all charts? Maybe that will help.

 

Many thanks,

N.

Hello nytr0x,

FusionCharts DOM has some known issues with Internet Explorer. We are currently in the process of resolving them.

In the meanwhile, you can try setting "renderOnLoad" setting to be false in global script settings (refer to the last point of "Features Explained" section in our DOM related documentation at http://www.fusioncharts.com/DOM/docs/.)

<script type="text/javascript" src="FusionCharts/FusionChartsDOM.js" settings="renderOnLoad: false"></script>

After setting this to false, you can try doing FusionChartsDOM.RenderAllCharts(true); sometime onLoad of the page or on some other event. Note that you should allow the page to fully load prior to calling any render function.

This may or may not be of help as the results are still yet to be fully tested with certain results. Do let us know if it helped resolving your issues.

Hi,

I tried that and I still get the loading charts problem.

Share this post


Link to post
Share on other sites

...

Hello dlai101,

 

It would help us a lot if you could let us know whether your environment same as others facing this issue: IE6 with Flash 10?

Edited by Guest

Share this post


Link to post
Share on other sites

Unfortunately it still occasionally fails to load one or two of the charts.

 

However, this is only when I have a fast connection, ie on my LAN or running locally.

 

When running over VPN connection I have not had it fail yet.

 

Hope this helps.

 

 

 

N.

Share this post


Link to post
Share on other sites

We are thinking that it is a javascript syncronization problem.

If you are on a slow connection then everything can syncronously execute without crashing.

A solution to solve this would be to forcefully syncronize the loading of multiple charts

Share this post


Link to post
Share on other sites

...

Greetings,

This issue is being actively worked upon and we envisage that this issue will be solved soon.

In technical terms, the issue is primarily hapenning when FusionCharts JS framework is simultaneously building XML Islands within the page. Addressing this is more like doing a workaround for a browser limitation and we would do this for the next release of this framework.

Essentially, if you are presently using FusionCharts DOM, it is very likely that the next update will not break any of the existing implementations.

Share this post


Link to post
Share on other sites

Hello,

I've fixed the problem when loading multiple charts on the same page.

The cause was due to the fact that some charts would have the same id. The ids are based on date time and if the ids are assigned too quickly, there would be multiple charts with the same id.

Please visit my blog to obtain the correct FusionChartsDOM.js and to see a detailed explanation on the bug.

http://www.davidlai101.com/blog/index.php/2009/04/28/fusion-charts-dom-fix

Thanks

David

Edited by Guest

Share this post


Link to post
Share on other sites

...

Greetings,

It is really nice for you to implement the workaround. :) I have as well followed the conversaion in your post.

However, we are still implementing a slight architectural change of the framework and would fix all issues in DOM 1.0.2

Share this post


Link to post
Share on other sites

...

Greetings,

Can you please try out the BETA release posted at http://www.fusioncharts.com/forum/Topic14049-61-1.aspx and let me know if this solves your issue.

Note that if you are FusionCharts Free user, this JS is default configured for v3. User chartVersion="free" in your fusioncharts tag (temporarily) before the final JS is released

Edited by Guest

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