Geo Chart Example

An example of a Google Geo Chart.

by zakkarygrahamm

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['geochart']}]}"></script>
<div id="chart_container">
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>
<br>
Note: an area of 200km<sup>2</sup> indicates missing data.

CSS

#chart_container {
   border: 1px solid #CCCCCC;
   margin: 2px;
   width: 900px;
}

JavaScript

google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Percent Black African', 'Population'],
        ['Johannesburg',76.4,4949347],
        ['Cape Town',38.6,4005016],
        ['eThekwini',73.8,3702231],
        ['Ekurhuleni',78.7,3379104],
        ['Tshwane',75.4,3275152],
        ['Nelson Mandela Bay Distict Municipality',60.1,1263051],
        ['Buffalo City Metropolitan Municipality',85.1,834997],
        ['Polokwane Local Municipality',92.9,797127],
        ['Mangaung Metropolitan Municipality',83.3,787803],
        ['Emfuleni Local Municipality',85.4,733445],
        ['Mbombela Local Municipality',89.4,695913],
        ['Msunduzi Local Municipality',81.1, 679039],
        ['Rustenburg Local Municipality',88.5, 626522],
        ['Bushbuckridge Local Municipality',99.5, 546215],
        ['Local Municipality of Madibeng',89.3, 536110],
        ['Thulamela Local Municipality',99.3, 497237],
        ['Fetakgomo/Greater Tubatse Local Municipality',99, 489902],
        ['King Sabata Dalindyebo Local Municipality',98.5, 488349],
        ['Emalahleni Local Municipality, Mpumalanga',81.3, 455228],
        

      ]);

      var options = {
        region: 'ZA',
        displayMode: 'markers',
        colorAxis: {colors: ['#0000ff', '#00ff00']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
        
      google.visualization.events.addListener(chart, 'select', function() {
        var selectionIdx = chart.getSelection()[0].row;
        var cityName = data.getValue(selectionIdx, 0);
        window.open('http://en.wikipedia.org/wiki/' + cityName + '#Climate');
      });
    };