Issue with displaying Google Chart in a bootstrap

Question

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 one, the chart is tiny and compressed. I don't understand why..

Here is my code :

<div class="tab-pane active" id="player">
    <h3>Players' resources</h3>
    <div id="totalPlayerChart" style="height: 500px;"></div>
</div>

<div class="tab-pane" id="producer">
    <h3>Producers' resources</h3>
    <div id="totalProducerChart" style="height: 500px;"></div>
</div>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawTotalPlayerChart);
    google.charts.setOnLoadCallback(drawTotalProducerChart);

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

    function drawTotalProducerChart() {
        [...]
        var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));
        chart.draw(data, options);
    }
</script>

Answer 1

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

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

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

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

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

Thanks.

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

Answer 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