Re: Column Charts Rendering Too Small in Hidden Divs

[Daniel LaLiberte]

Tim and Dani,

These problems with things showing up with the wrong sizes (there are many variations of this problem) are most likely due to a recent change that now requires rendering of charts to be done when the charts are visible.  So if you hide the chart before it gets rendered, that could cause this problem. To work around this problem, you might try to defer the hiding of the containing div until after a timeout, for example.   Another possibility is to hide the container with visibility:hidden instead of display:none.

We are looking into ways of avoiding these size-estimation problems so you can, again, render charts invisibly, but I don't know when we will have a solution.

dan

On Thursday, October 4, 2012 2:04:22 AM UTC-4, Tim Griffin wrote:

Bump.  I have the same problem :(

On Thursday, September 13, 2012 4:58:13 PM UTC+10, Dani wrote:

Why: I'm creating an interface where users can toggle between graphs.

What: The issue, however, is that once I draw a column chart, and immediately run a .hide() jquery method on the containing div for that chart, when I do .show() on that same div, it shows up like this: (where the chart area is super small and shows up at the top left corner of the div)

But if I use the category picker and chart redraws itself, and the width/height are correct. (below) I can theoretically draw the graph again every time the div is "unhidden", but I feel like that'd be a lot of extra drawing.

Does anyone know what the problem is? What I perhaps am doing incorrectly? Or even if there's a solution?

Thanks!

[Sergey Grabkovsky]

The accepted way to render a chart in a div that will be hidden is to either set its visibility:hidden (as opposed to doing display:none) or wait for the chart's ready event before hiding the containing div. Personally, I would recommend to draw the charts on demand, i.e. right when the div becomes visible.

- Sergey

On Tue, Apr 9, 2013 at 12:27 AM, Sandeep Parwal <skpa...@gmail.com> wrote:

Hi Guys,

Even I am facing the Re-size problem of Google Chart on hide/show.

I have used the visibility style and it works for me. But it is the temporary solution for it.

Mostly, We used the toggle functionality between the tabs. If anyone got the solution for it, Please reply to this.

Thanks & Regards,
-Sandeep Parwal

On Thursday, September 13, 2012 12:28:13 PM UTC+5:30, Dani wrote:

Why: I'm creating an interface where users can toggle between graphs.

What: The issue, however, is that once I draw a column chart, and immediately run a .hide() jquery method on the containing div for that chart, when I do .show() on that same div, it shows up like this: (where the chart area is super small and shows up at the top left corner of the div)

But if I use the category picker and chart redraws itself, and the width/height are correct. (below) I can theoretically draw the graph again every time the div is "unhidden", but I feel like that'd be a lot of extra drawing.

Does anyone know what the problem is? What I perhaps am doing incorrectly? Or even if there's a solution?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Chart API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chart-a...@googlegroups.com.

To post to this group, send email to google-c...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-chart-api?hl=en.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Evan Cooper]

This may not be the preferred way to do thing, but it seems to work. If you render the graph in a div with 0 height and overflow hidden, you can toggle the height and it will render correctly. Alternatively, you could just have your toggle display function also set the height to what it ought to be. I know this is an old thread, but thought that might be helpful to others running into this issue.