Issue displaying Geocharts in tabs

25 views
Skip to first unread message

Noel G.

unread,
Mar 9, 2019, 9:48:15 AM3/9/19
to Google Visualization API
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>


Noel G.

unread,
Mar 11, 2019, 10:36:33 AM3/11/19
to Google Visualization API
Okay, I figured it out.  I needed to added width and height options and use the same numbers for all 3 maps, as shown below for the first map.


 var optionsD = 
        {'width':575,
         'height':350,
         region: 'US',
          displayMode: 'regions',
          resolution: 'provinces',
          backgroundColor: { fill:'transparent' },
          colorAxis: {colors: ['#D53E4F', '#F46D43', '#FDAE61', '#FEE08B', '#E6F598', '#ABDDA4', '#66C2A5', '#3288BD']},
          datalessRegionColor: '#D3D3D3',
        };



Reply all
Reply to author
Forward
0 new messages