Issue with displaying Google Chart in a bootstrap tab

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

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