Home
Manage Your Code
Snippet: Google Data Visualization (HTML)
Title: Google Data Visualization Language: HTML
Description: map page Views: 328
Author: Kevin Isom Date Added: 6/10/2009
Copy Code  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['geomap']});

    function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addRows(6);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');
      data.setValue(0, 0, 'Otago');
      data.setValue(0, 1, 200);
      data.setValue(1, 0, 'Canterbury');
      data.setValue(1, 1, 300);
      data.setValue(2, 0, 'Bay of Plenty');
      data.setValue(2, 1, 400);
      data.setValue(3, 0, 'Waikato');
      data.setValue(3, 1, 500);
      data.setValue(4, 0, 'Wellington');
      data.setValue(4, 1, 600);
      data.setValue(5, 0, 'Auckland');
      data.setValue(5, 1, 700);
      
      
          var options = {};
          options['region'] = 'NZ';
      options['showLegend'] = true;
     
      var geomap = new google.visualization.GeoMap(
          document.getElementById('visualization'));
      geomap.draw(data, options);
    }
    

    google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</body>
</html>