Google Chart size on bootstrap hidden tab

[Jose Alberto Suárez López]

Hi,

I'm using GCharts in a bootstrap template, each widget have 3 tabs, in page load 1st tab is active, and the other are hidden. Chart in the active tabs works well and the size is correct (based on container div), but in hidden tabs chart are smaller and not in center.

I think GChart generator cannot calculate the size on a hidden container. Somebody found  a solution for this?

TIA

[Sergey Grabkovsky]

You are correct, Google Charts cannot be drawn on a container that is hidden. There are a few workarounds for this:

• Draw all the charts then hide the divs.
• Draw each chart on demand.
• Use visibility:hidden instead of display:none.

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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/groups/opt_out.
 
 

[José Alberto Suárez López]

Thanks Sergey,

I finally load charts on demand :)

--
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/-vf43JoZsLE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Khrys]

I am facing exact the same situation. How can I load the charts on demand when I click in a hidden tab? What was your solution Jose?

Thanks.

On Tuesday, June 25, 2013 12:41:33 PM UTC-3, Jose Alberto Suárez López wrote:

Thanks Sergey,

I finally load charts on demand :)

On Tue, Jun 25, 2013 at 3:45 PM, Sergey Grabkovsky <gra...@google.com> wrote:

You are correct, Google Charts cannot be drawn on a container that is hidden. There are a few workarounds for this:

• Draw all the charts then hide the divs.
• Draw each chart on demand.
• Use visibility:hidden instead of display:none.

- Sergey

On Tue, Jun 25, 2013 at 4:43 AM, Jose Alberto Suárez López <jalbe...@gmail.com> wrote:

Hi,

I'm using GCharts in a bootstrap template, each widget have 3 tabs, in page load 1st tab is active, and the other are hidden. Chart in the active tabs works well and the size is correct (based on container div), but in hidden tabs chart are smaller and not in center.

I think GChart generator cannot calculate the size on a hidden container. Somebody found  a solution for this?

TIA

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

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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/groups/opt_out.
 
 

--
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/-vf43JoZsLE/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[David Suchomel]

Hello, 

 on my way i know if i have chart(s) on tab. So you can create href <a href="#graph" data-toggle="tab" data-graf="1">tab1</a>

on js side: 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

  var isgraf = $(this).data("graf");

if (isgraf) {

 drawChart();

}

})

done