Google Chart with Bootstrap Tabs

Question

I am using two (or more) Google charts in a page with Bootstrap tabs. Depending on my tab navigation, the chart lose the size going for a default(?) size. Bellow is a reduced test case with a step to see the problem:

https://jsfiddle.net/73o0rfqe/

How to reproduce:

Situation #1:

• Click Two tab. The chart resizes to the actual size only after the tab click. I am looking for a way render it after page loads (before the tab click).

Situation #2:

• Click Two tab, click TwoC tab, click One tab, click Two tab, click TwoA tab. Now the chart loses the actual size. Click One tab, click Two tab. Now the chart renders with the actual size again.

This part of the code:

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
}); 

I am using to try this, but it is not working like it should. Any help will the helpful.

PS.: Any suggestion on optimizing this code will the helpful too. Thanks.

Answer 1

The problem lies in that you redraw your chart with

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
}); 

when you change around with tabs. I have no clue why it draws with incorrect size when you do it the way you wrote, but I've never worked with bootstrap.

(as a side note, I don't see why you load the google package on tab changes, this causes a lot of loads from googles servers. Something like

$("a[href='#One']").on('shown.bs.tab', function (e) {
    drawChart();
}); 

would be enough.)

A solution is to render both charts on page load and then being done with them, check this fiddle and you'll see it works.

Answer 2

While implementing the charts, graphs inside the tabs, the content resize issue may occur.

Reason for this type of issue

In Bootstrap tab, while we switching tabs only the active tab will have the property display: block; rest of the tab-contents are applied to display: none;.

This is the major cause of this issue if the div element has a property display: none;, there the width is also considered as 0px.

To override this issue I have added the following CSS, Instead of hiding the tabs by using display: none;, I handled with height & overflow property by this method the width will not set to 0px.

---

CSS

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

I have forked your code from you jsfiddle link give in the question (https://jsfiddle.net/73o0rfqe/).

Here is the link which having the updated code(i.e, just only added the above-given CSS )

https://jsfiddle.net/swasatz/28qttaqb/2/

Check out fiddle hope this may helpful for you

Thanks.

Note: This is one of the methods to resolve this issue using CSS.