Positioning Google Charts inside Bootstrap tabs [duplicate] - css

Question

This question already has answers here:
Issue with displaying Google Chart in a bootstrap tab
(2 answers)
Closed 5 years ago.
I created Bootstrap3 tabs RES and BUS. In each of these two tabs I want to position two Google charts (Area and Pie carts). So inside bootstrab tab-pane I put bootstrap row and split it into columns col-sm-9 (for larger AreaChart) and col-sm-3 (for smaller PieChart).
Identical content is inside both BUS and RES tabs! but position on second (RES) tab is ruined. WHY? And how to fix it?
<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"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
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"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
google.charts.load("current",{callback:drawChartsR,packages:["corechart"]});
</script>
External JSFiddle: enter link description here

Answer 1

need to wait until container is visible before drawing the chart,
or need to set specific size settings in the chart options...
also, recommend calling the load statement only once...
try setup similar to following...
<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"}]);
(new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
}
</script>
</div>
<div id="RES" class="tab-pane">
<div class="row">
<h3>RES title</h3>
<div class="col-sm-9">
<div id="AreaR1"></div>
</div>
<div class="col-sm-3">
<div id="PieR1"></div>
</div>
</div><!-- .row -->
<script type="text/javascript">
function drawChartsR()
{
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"}]);
(new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);
view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
(new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
}
</script>
</div>
</div><!-- .tab-content -->
</div><!-- .thumbnail -->
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
<script type="text/javascript">
google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).html()) {
case 'Bus':
drawChartsB();
break;
case 'Res':
drawChartsR();
break;
}
});
</script>