Hello,
I have independent GeoCharts displayed in 3 tabs and can't figure out why
the map on the first tab is larger than the maps on tabs 2 and 3. I've
tried applying "style="width: 900px; height: 500px;", but that didn't make
a difference. Could someone please take a look at the following code and
advise?
Thank you,
Noel
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";>
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js";></script>
<style type="text/css">
body{
padding: 5px;
}
</style>
</head>
<body>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<div class="col-md-12">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#Four" data-toggle="tab">Departures</a>
</li>
<li>
<a href="#Five" data-toggle="tab">Destinations</a>
</li>
<li>
<a href="#Six" data-toggle="tab">Combined</a>
</li>
</ul>
<div class="tab-content" style="padding: 0px;">
<div class="tab-pane active" id="Four">
<div class="tabbable">
<div class="tab-content" style="padding: 0px;">
<div class="tab-pane active" id="FourA">
<div class="row">
<div class="col-md-12">
<div id="geochart3" align="center" display= 'inline-block'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Five">
<div class="tabbable">
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="FiveA">
<div class="row">
<div class="col-md-12">
<div id="geochart4" align="center" display= 'inline-block'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="Six">
<div class="tabbable">
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="SixA">
<div class="row">
<div class="col-md-12">
<div id="geochart5" align="center" display= 'inline-block'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart'],'mapsApiKey':
'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var dataD = google.visualization.arrayToDataTable([
['States', '2018 Departures'],
['Alabama', 2],
['Arizona', 17],
['Arkansas', 8],
['California', 67],
['Colorado', 9],
]);
var dataE = google.visualization.arrayToDataTable([
['States', '2018 Destinations'],
['Alabama', 1],
['Arizona', 8],
['Arkansas', 11],
['California', 8],
['Colorado', 4],
]);
var dataF = google.visualization.arrayToDataTable([
['States', '2018 Combined Activity'],
['Alabama', 3],
['Arizona', 25],
['Arkansas', 19],
['California', 75],
['Colorado', 13],
]);
var optionsD = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
backgroundColor: { fill:'transparent' },
colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
'#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
datalessRegionColor: '#D3D3D3',
};
var optionsE = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
backgroundColor: { fill:'transparent' },
colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
'#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
datalessRegionColor: '#D3D3D3',
};
var optionsF = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
backgroundColor: { fill:'transparent' },
colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B',
'#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
datalessRegionColor: '#D3D3D3',
};
var chartD = new
google.visualization.GeoChart(document.getElementById('geochart3'));
var chartE = new
google.visualization.GeoChart(document.getElementById('geochart4'));
var chartF = new
google.visualization.GeoChart(document.getElementById('geochart5'));
chartD.draw(dataD, optionsD);
chartE.draw(dataE, optionsE);
chartF.draw(dataF, optionsF);
}
</script>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/79b08149-525a-4829-8029-c4da7781a407%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
