How to initialize charts properly when <div> display property is set to "none"

[knight]

Hi all,

We have a CSS tab based webpage, and there are multiple google column
charts of the same width, only one of which is visible at a time.
Similarly, there are multiple google table charts only one of which is
visible at a time. The rest are not seen as the <div> container has
display set to "none" during pageload.

The problem is that for all such charts, certain issues are seen:
- The legend width is not calculated properly, leading to legend texts
which appear on each other (seen in Firefox, not in Chrome)
- The table header is not fixed while scrolling vertically, it moves
up like the rest of the table (seen in both FF and Chrome)

Only the charts whose display was set to "block" during pageload
appear correctly.

What can be the workaround for this? I tried showing all charts
initially, and then hide them on a <ready> event from the charts, but
ran into a timing problem. Should I experiment with z-index or what
do you guys suggest?

thanks a lot...

[Roni Biran]

Why not just drawing the charts only when the div is visible?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

Set your divs display properties to 'block'.  Before calling the draw() function of each chart, assign a 'ready' listener for that chart, and have the listener set the div's display property to 'none'.  Ex: 

var chart1 = new google.visualization.BarChart(document.getElementById('chart1'));
google.visualization.events.addListener(chart1, 'ready', function () {
    document.getElementById('chart1').style.display = 'none';
});
chart1.draw(data1, options1);

This draws the chart correctly and hides it near instantaneously.  I used this method on a page with 30+ charts and never noticed any weird problems or artifacts.