Re: IE FF Glitch with Multiple Google Charts in jQuery Slider

[asgallant]

I don't know what the slider does in the background, but it probably involves making the div's hidden.  Drawing charts in hidden divs is known to cause problems (it has something to do with dimensions as I recall), so the general rule of thumb is to draw the chart before you hide the div (use a "ready" event handler for the chart to hide the div when it's done drawing).  Most charts draw fast enough that users never see the chart before the div gets hidden.  Alternatively, you can draw the chart immediately after the div is unhidden.  The slider should expose some kind of event to determine when the slider is moved, so you should be able to hook that event inside your drawing functions to get the right chart drawn at each stage.

On Sunday, September 9, 2012 11:31:06 PM UTC-4, Gwi7d30 wrote:

I've been trying to solo this one myself, but I've hit a brick wall. I have a collection of 6 different Google Charts all on one page in a jQuery slider. Everything is perfect when viewed in Chrome, but it's glitchy inside FF and IE. In FF and IE, the first framed Google Chart is fine, but when you advance the slider to a different Google Chart, the legend, hAxis, and vAxis titles are thrown off. When the charts are outside the slider, the graphs are fine. I'm figuring it's some kind of CSS conflict, but I haven't figured it out yet. I've been FireBugging like crazy and can't get a solution. The one thing I've noticed in the iframe that Google creates to produce the Google Chart is the consistency of the x & y aligned by the text tag it uses. It's actually different when inside the jQuery slider. Any help or insight would be greatly appreciated. The first link below is the Google Chart/jQuery slider combo. The second is the Charts without the slider.

With slider: http://www.burlington-weather.com/current_weather_conditions.php?cityzip=05401

Without Slider: http://www.burlington-weather.com/current_old.php?cityzip=05401

PS...yes I did try a totally different slider and I got the same result!

[Gwi7d30]

Hi asgallant,

The slider does involve making the divs hidden. When a portion of the slider is made "active", then it shows or "unhides" that corresponding div. I rearranged all the scripts so that the slider scripts were last, but that didn't cut it. I guess I'll have to try your method of using a "ready"event handler or have the chart draw after the div is unhidden. Thanks for your input!

[Gwi7d30]

I got IE to work with:

<script type="text/javascript">

$(window).load(function () {

        $('.ls-layer').css("display","none");

});

</script>

but FireFox still continues to be an issue.

Someone recently emailed this option...

document.getElementById('chart_div').style.display = 'block';
google.visualization.events.addListener(chart, 'ready', function () {
    document.getElementById('chart_div').style.display = 'none';
}); 

I might give this a shot considering the jQuery isn't working in Firefox...

[Juan Carlos Loáisiga Montiel]

Did you found any solution?

[Garrett Gwiazda]

Hi Juan,

I actually took the site down a few months ago that had this issue. With FF at least, I think things began to work again? I honestly can't remember because it has been so long since I last worked on this issue.

Best,

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/TX0jyTuCW0U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Garrett Gwiazda Meteorologist Web Developer Systems Administrator ggwi...@gmail.com (802)399-4157 19 Springbrook Way Hudson Falls, NY 12839