Google chart is not working on bootstrap tab

Question

I am using google donut chart with bootstrap tab. It loads correctly in the first page, but when i click on another tab it does not show the chart and give an error message "Cannot read property 'length' of null". My codes are below. Please help me if any one have any idea.

<ul id="myTab1" class="nav nav-pills nav-justified">
    <li class="active"><a href="#cons18" data-toggle="tab">18</a></li>
    <li><a href="#cons31" data-toggle="tab">31</a></li>   
</ul>

  <div class="panel-heading">
      <div id="myTabContent" class="tab-content">
           <div class="tab-pane fade in active" id="cons18">
                <div class="row">  
 <div class="well" id="donutchart_cons18" style="width: 100%; height: 24.5em;"></div>
                </div>
           </div>

           <div class="tab-pane fade" id="cons31">
                <div class="row">
 <div class="well" id="donutchart_cons31" style="width: 100%; height: 24.5em;"></div>
                </div>
           </div>

       </div>
  </div>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart1);
  function drawChart1() {
    var data = google.visualization.arrayToDataTable([
      ['Items', 'Percentage'],
      ['Fruit1',     40],
      ['Fruit2',      10],
      ['Fruit3',  35],
      ['Fruit4', 10],
      ['Fruit5',    5]
    ]);

    var options = {
      title: 'Fruits: 18 to 30',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart_cons18'));
    chart.draw(data, options);
  }
</script>


<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart2);
  function drawChart2() {
    var data = google.visualization.arrayToDataTable([
      ['Items', 'Percentage'],
      ['Fruit1',     40],
      ['Fruit2',      10],
      ['Fruit3',  35],
      ['Fruit4', 10],
      ['Fruit5',    5]
    ]);

    var options = {
      title: 'Fruits: 31 to 50',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart_cons31'));
    chart.draw(data, options);
  }
</script>

Could you create a jsfiddle , http://jsfiddle.net – dreamweiver Sep 09 '14 at 09:52 — dreamweiver, Sep 09 '14 at 09:52

score 12 · Answer 1 · edited May 23 '17 at 12:24

12

Got the solution from ryenus. Thanx to him. Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;     /* undo display:none          */
height: 0;          /* height:0 is also invisible */ 
overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
height: auto;       /* let the content decide it  */
} /* bootstrap hack end */

edited May 23 '17 at 12:24

Community

1
1

answered Nov 08 '14 at 14:33

Priyank Dey

1,104
1
19
43

This should be marked as the correct answer. Worked like a charm for me even in 2017. I was struggling with this tabs and multiple google charts for two days..... – Thush-Fdo Oct 24 '17 at 13:52
Excellent answer. I did not have the same problem but it did solve it. – Wouter Bouwman May 06 '19 at 08:46
Awesome thank you so much! Googled for a long time and this is the only working solution! – Logan Yang Jul 28 '19 at 19:57
Working on 2021 awesome – Antonios Lampros Jan 22 '21 at 11:58

Google chart is not working on bootstrap tab

1 Answers1