clemens.s

Toggeling display:none/block causes rerendering of chart

Recommended Posts

Hi,

 

 

 

first of all: neat work! - keep it up.

 

 

 

Now my issue:

 

We are using the charts for reporting in a tabbed interface. Basicly it looks like this:

 

< div id="tab1" onclick="switchTab(this)" >

 < div id="chartdiv_1" >Here goes the first Chart< /div >

< /div >

< div id="tab2" onclick="switchTab(this)" >

 < div id="chartdiv_2" >Here goes the second Chart< /div >

< /div >

 

 

 

To switch between the tabs, we change the display-attribute of the different tabs (e.g.: if we want to see tab1, we will display:block on tab1 and display:none on tab2).

 

 

 

So when look at the chart on tab1, switch to tab2 (look at the chart there), and switch to tab1 back, the chart is displaying a "loading ..." message, and rendering the chart again. That would be ok - if the data wouldn't been pushed from the server again.

 

 

 

If seen this behaviour in the following browsers: Firefox 3.5, Opera, Safari and Chrome. Only in IE6 and IE7 it worked like I would expect it (one of those scary "omg it works in IE but in all other browsers not"-moments).

 

 

 

Is there any way to get rid of this behavior?

 

 

 

Greetings,

 

Clemens

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Rajroop

hi,

 

 

 

You are correct, this is memory management of all mozilla based browsers. These unloads all flash movies when hidden and again reloads and renders when shown up!!:P

 

 

 

Could you please let us know, whether you are using data using dataURL method?

Share this post


Link to post
Share on other sites

Hi,

 

 

 

thanks for the answer and clearing it up.

 

 

 

I'm not sure if i understand your question (english issn't my first language) - i use the "dataURL" method to get the XML into the chart (which is served by a PHP script).

 

 

 

Is there any way to work around this problem?

 

 

 

Greetings,

 

Clemens

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Rajroop

Hello,

 

 

 

You could try using setDataXML, in which the redering function call and the data stays witin in the HTML, and try to work around this issue.

 

 

 

Looking forward to your feedback on this. :P

Share this post


Link to post
Share on other sites

Hi,

 

 

 

i've tried it out, and this would solve the 'rerendering' problem.

 

Unfortunately there seems to be a limitation (acording to your documentation @ FusionCharts_Enterprise_3.1.1/Contents/DataXML.html) of the length a DataXML can have:

 

 

 

With this method, however, there can sometimes be problems when you're working with larger chunks of data. This problem happens due to the limitation on dataXML string length imposed by the browser. When you specify a larger chunk of data using dataXML method, the browser ignores everything after a certain length. This causes FusionCharts to hang (nothing would be displayed on-screen) as the full data has not been supplied to it. Therefore, dataURL method is recommended for larger chunks of data (basically - multi-series/combination charts).

 

 

 

Since I expect (and i know there will be) a an large amount of data, the DataXML-Method seems to be not the best solution for me.

 

 

 

I've played around with setting the DataXML per javascript, but i think this is just not possible (or is it?).

 

 

 

Thanks for your time.

 

Greetings,

 

Clemens

Share this post


Link to post
Share on other sites
Guest Rajroop

Hello Clemens,

 

 

 

The DataXML method would be suitable for your situation, only and only if you had some knowledge about the amount of data you'll be dealing with.

 

 

 

However, in this case since you expect a large amount of data, as you have observed yourself, the DataXML method wouldn't exactly be the right choice of inputting data. :P

 

 

 

There might be a workaround for this using the DataURL method. But before we go into any ideas/workarounds, it is necessary to set the registerWithJS to one, if you haven't done that already. :P Also, could you please confirm whether the FC_Rendered is being called on, everytime the tabs are switched?

 

 

 

Now, could you please try the following steps and see if it solves your issue:

 

 

 

1. Load the XML in a JS variable.

 

2. Load the chart as a blank chart. E.g.-<chart/>

 

3. Now, if on every rendering of the chart(switching of the tabs i.e.) when the FC_Rendered is called, set the XML(stored in the JS variable) to the chart.

 

 

 

Thereby, by following the above steps the chart can be restricted from rendering the data of the chart on every tab switch. :w00t:

 

 

 

Please give me your feedback on this idea.

 

 

 

Hope it helps. :P

Share this post


Link to post
Share on other sites

Hi there!

 

 

 

Sry that I kept you waiting - I was on a short vacation :P

 

 

 

I've tried your suggestion and it _kinda_ works.

 

The charts itself is rendered again, but it is much faster (and the loading-bar is gone).

 

 

 

I'm going to get the XMLData once per Ajax, store it and get it the next time faster (after switching tabs).

 

 

 

Thanks again for your time and patience.

 

Greetings,

 

Clemens

Share this post


Link to post
Share on other sites
Guest Rajroop

Hey Clemens,

 

 

 

I'm glad to hear the idea is working out for you. :P

 

 

 

You are most welcome. :hehe:

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