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>

Answer 1

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 */