Chart viz in UI tabs won't render

[Jon]

Hi guys, I've been struggling with this issue for over a month and
can't get it right. I'm using Fusion Tables to populate a couple of
bar charts. I tabbed them using the Jquery UI tabs widget. When loaded
in IE, the viz under the second tab doesn't show the labels on the
chart. This isn't a problem in Firefox, safari or chrome. I've checked
out Jquery Ui widget, which suggested I do some tweaking to the CSS of
the tabs, but that didn't seem to do the trick. Anyone have any ideas?
The code can be seen below at the link.


http://jondavenport.com/test/PilotCharts.html

[asgallant]

Charts often don't render properly (especially in IE) when drawn in hidden divs (which is what the second tab is).  You'll have to initialize your tabs after all the charts are finished drawing.  Also, you only want to call the google#setOnLoadCallback() method once - you can use that to call an initializing function that calls all your other functions.  I did up a quick-and-dirty rewrite for you: http://jsfiddle.net/WFG9c/

I also noted that you are drawing both data sets from the same fusion table, so you could combine those queries into a single query and use views to filter out the columns you don't want for a particular chart.  You could even use a Dashboard, which would alleviate the problem of tracking which charts are finished drawing (as, IIRC, the 'ready' events for each chart bubble up to the Dashboard, so you only need to register the event handler for the Dashboard).

[Jon]

Thanks for the quick response, but I still can't get these things to
hide in the tabs. I used your js, which was a good tip, but the issue
seems to be that if you call the tabs method at any point after
starting a drawViz function then the divs act like they can't support
that method. Any insight?

New code here: http://media.hamptonroads.com/media/content/pilotonline/2011/10/charts.html

On Feb 8, 8:52 am, asgallant <drew_gall...@abtassoc.com> wrote:
> Charts often don't render properly (especially in IE) when drawn in hidden
> divs (which is what the second tab is).  You'll have to initialize your

> tabs *after* all the charts are finished drawing.  Also, you only want to

[asgallant]

I wasn't able to get your tabs to work at all in jsfiddle, even without the charts, so I'm not quite sure what's going on.  You definitely have to remove the:

<script>
$(function() {
    // :first selector is optional if you have only one tabs on the page 

    $(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>

section, though.  I have used this method with jQuery UI tabs before, so I know it works.

[asgallant]

You're also trying to load jQuery and the visualization API twice.  You could be having some issues with loading the jQuery tools js before the google.load("jquery", "1.5"); AJAX call finishes loading, too.  Try loading jQuery directly from a CDN (like http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) instead of calling google.load().