Visualization: GeoChart

  • Geocharts are map visualizations that can display data for countries, continents, or regions in region, markers, or text modes.

  • The data format for a geochart depends on its display mode, requiring specific information like region location, addresses, or latitude/longitude.

  • Geocharts offer various configuration options to customize their appearance and behavior, including colors, dimensions, display mode, and interactivity.

  • To use geocharts, the "geochart" package needs to be loaded, and a mapsApiKey may be required for geocoding or nonstandard codes.

  • Geocharts support standard chart methods and events, including drawing, getting selection, and specific events like regionClick for region mode.
  1. Overview
  2. Region GeoCharts
  3. Marker GeoCharts
  4. Text GeoCharts
  5. Coloring your chart
  6. Loading
  7. Data format
  8. Configuration options
  9. Methods
  10. Events
  11. Data policy

Overview

A geochart is a map of a country, a continent, or a region with areas identified in one of three ways:

  • The region mode colors whole regions, such as countries, provinces, or states.
  • The markers mode uses circles to designate regions that are scaled according to a value that you specify.
  • The text mode labels the regions with identifiers (e.g., "Russia" or "Asia").

A geochart is rendered within the browser using SVG or VML. Note that the geochart is not scrollable or draggable, and it's a line drawing rather than a terrain map; if you want any of that, consider a map visualization instead.

Region GeoCharts

The regions style fills entire regions (typically countries) with colors corresponding to the values that you assign.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Marker GeoCharts