Google Charts inside BS# tabs
Google Charts inside BS# tabs
HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-sm-12">
<div class="thumbnail">
<h3>Title</h3>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#BUS">Bus</a></li>
<li><a data-toggle="tab" href="#RES">Res</a></li>
</ul>
<div class="tab-content">
<div id="BUS" class="tab-pane active">
<div class="row">
<h3>BUS title</h3>
<div class="col-sm-9">
<div id="AreaB1"></div>
</div>
<div class="col-sm-3">
<div id="PieB1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsB()
{
var view;
var AreaOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 },
};
var PieOpt = {
height: 200,
legend: { position: 'bottom', maxLines: 1 }
};
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
...