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'],
        ['Cape Town', 15.84,433688],
        ['Johannesburg',64.21,957441],
        ['Durban', 64.21,595061],
        ['Soweto', 98.54,1271628],
        ['Pretoria',41.95,741651],
        ['Port Elizabeth',30.60,312392],
        ['Pietermaritzburg',69.99,223448],
        ['Benoni',45.19,158777],
        ['Tembisa',98.93,463109],
        ['East London',70.09,267007],
        ['East London',70.09,267007],
      ]);

      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');
      });
    };