Google Charts in tabs - chart size and position incorrect in hidden tab
google-visualization
Solution
Your suspicion is correct: if the chart's container div (or a parent element) is hidden when the draw call is made, the Visualization API's dimensional measurements get messed up, and effects like the one you've noticed show up. There are a few different solutions you can go with:
- draw the charts before you initialize your tabs, so all divs are visible at draw time
- set up event handlers on your tabs to draw all charts within a tab when it is first opened
- unhide all divs immediately prior to drawing the charts, then re-hide divs as necessary in "ready" event handlers for the charts
Problem
I have a set of two tabs. Each tab has a Google chart inside it. Both these charts should be identical in terms of size and position. When the page is loaded, the position of the chart is how I want it (regardless of which tab you are initially on). When you then move to the other tab (initially hidden) the chart's position and sizing changes. You can see this in the example here: http://cb.tortoise-dev.co.uk/ To simplify things I've added fixed widths and heights to the chart container, but this hasn't helped. I'm pretty sure that the problem is to do with the hidden container having no dimensions when the page is loaded and the chart being drawn to a sort of default size rather than filling the container (like it does in the initially visible tab). I'm not sure what the solution is though. Any help would be greatly appreciated. Thanks in advance.