Google chart not working on boot tab

Question

I am using google goot diagram with bootstrap tab. It loads correctly on the first page, but when I click on another tab, it does not display the chart and does not display the error message “Unable to read the length of the“ null ”property. My codes are below. Please help me if anyone has an 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

Received solution from ryenus. Thanks to him. Why are Bootstrap tabs showing tab delimiters with the wrong width when using tall charts?

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