Issue With Displaying Google Chart In A Bootstrap Tab

I have an issue with displaying a Google Chart in a Boostrap tab. I have two tabs, and a Google Chart in each. In the first one, the chart is correctly displayed, but in the second

Solution 1:

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;
}

Thanks.

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

Solution 2:

this is the result of drawing a chart while it's container is hidden, when there are no specific size settings in the options

to correct the issue, add specific size, or wait until the tab is visible before drawing the chart...

also, setOnLoadCallback only needs to be called once per page load

it can also be placed in the load statement

recommend setup similar to the following snippet...

google.charts.load('current', {
  callback: function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        switch ($(e.target).html()) {
          case'Players':
            drawTotalPlayerChart();
            break;

          case'Producers':
            drawTotalProducerChart();
            break;
        }
    });

    functiondrawTotalPlayerChart() {
      [...]
      var chart = new google.visualization.LineChart(document.getElementById('totalPlayerChart'));
      chart.draw(data, options);
    }

    functiondrawTotalProducerChart() {
      [...]
      var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));
      chart.draw(data, options);
    }

    // draw chart on initial tabdrawTotalPlayerChart();
  },
  packages: ['corechart']
});

Solution 3:

You need to initialize the chart on shown.bs.tab

Here is someone else's bootply demonstrating it, but this a Google Map (the same method applies): http://www.bootply.com/102241