I’m working on a jQuery plugin to build up tabbed pages of charts using the Google Annotated Timeline Visualization.
I have a page using jQuery TOOLS Tabs to show multiple pages of charts, I have numerous pages already authored using charts generated by a web service through static img tags, my plugin replaces those images with a visualization by replacing the img tag with a div and then pulling the raw data from the same service and dropping it into the Google chart on that div.
Everything works pretty well, my charts load up (slowly) and when they fire the ready event I set the date range to be the last two weeks.
My problem is that when switching back to the main tab from another tab the charts return to showing the entire timeline, not just the last two weeks and the ready event does not fire again to trigger my date range selection code.
Is there a way to force an update to all the charts on the jQuery event of switching tabs? Alternatively is there an event that fires on a google chart object when it becomes visible?
Update: This appears to work ONLY in IE8, the chart date ranges stay when switching between tabs. The issue i’m having crops up in Firefox 4, Chrome (dev channel) and Safari 5.
I solved this by reloading the charts completely when I switch tabs, it’s slow and slightly frustrating but it does work.