Google Charts

Visualization: Geochart

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy

Overview

A geochart is a map of a country, a continent, or a region with two modes:

  • The region mode colorizes whole regions, such as countries, provinces, or states.
  • The marker mode marks designated regions using bubbles that are scaled according to a value that you specify.

A Geochart is rendered within the browser using SVG or VML. Note that the map is not scrollable or draggable; if that's what you want, consider a map visualization instead.

Examples

Regions Example

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

Code it yourself on the Visualization Playground

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.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('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Markers Example

A marker style map renders bubble-shaped markers at specified locations with the color and size that you specify.
Try hovering over the cluttered markers around Rome, and a magnifying glass will open to show the markers in more detail. Note: the magnifying glass is not supported in Internet Explorer version 8 or earlier.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Displaying Proportional Markers

Normally, marker maps display the smallest marker value as a minimal point. If you instead want to display proportional marker values (say, because they're percentages), use the sizeAxis option to set minValue and maxValue explicitly.

For instance, here's a map of western Europe with populations and areas for three countries: France, Germany, and Poland. The populations are all absolute numbers (e.g., 65 million for France) but the areas are all percentages of the whole: the France marker is colored violet because it's population is middling, but is sized 50 (out of a possible 100) because it contains 50% of the combined area.

In this code, we use sizeAxis to specify marker sizes in the range from 0 to 100. We also use a colorAxis with RGB values to show the populations as a range of colors from orange to blue, a spectrum that will work well for users with color vision deficiencies. Finally, we specify western Europe with a region of 155, per the "Content Hierarchy and Codes" section later in this document.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country',   'Population', 'Area Percentage'],
        ['France',  65700000, 50],
        ['Germany', 81890000, 27],
        ['Poland',  38540000, 23],
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '155', // Western Europe
        displayMode: 'markers',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Loading

The google.load package name is "geochart".

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

The Geochart visualization class name is google.visualization.GeoChart

  var visualization = new google.visualization.GeoChart(container);

Data Format

The format of the DataTable varies depending on which display mode that you use: Regions or Markers

Regions mode format

The location is entered in one column, plus one optional column as described here:

  1. Region location [String, Required] - A region to highlight. All of following formats are accepted. You can use different formats in different rows:
    • A country name as a string (for example, "England"), or an uppercase ISO-3166-1 alpha-2 code or its English text equivalent (for example, "GB" or "United Kingdom").
    • An uppercase ISO-3166-2 region code name or its English text equivalent (for example, "US-NJ" or "New Jersey").
    • A metropolitan area code. These are three-digit metro codes used to designate various regions; US codes only supported. Note that these are not the same as telephone area codes.
    • Any value supported by the region property.
  2. Region color [Number, Optional] - An optional numeric column used to assign a color to this region, based on the scale specified in the colorAxis.colors property. If this column is not present, all regions will be the same color. If the column is present, null values are not allowed. Values are scaled relative to the sizeAxis.minValue/sizeAxis.maxValue values, or to the values specified in the colorAxis.values property, if provided.

Markers mode format

The number of columns varies depending on the marker format used, as well as other optional columns.

  • Marker location [Required]
    The first column is a specific string address (for example, "1600 Pennsylvania Ave").
       OR
    The first two columns are numeric, where the first column is the latitude, and the second column is the longitude.
  • Marker color [Number, Optional] The next column is an optional numeric column used to assign a color to this marker, based on the scale specified in the colorAxis.colors property. If this column is not present, all markers will be the same color. If the column is present, null values are not allowed. Values are scaled relative to each other, or absolutely to values specified in the colorAxis.values property.
  • Marker size [Number, Optional] An optional numeric column used to assign the marker size, relative to the other marker sizes. If this column is not present, the value from the previous column will be used (or default size, if no color column is provided as well). If the column is present, null values are not allowed.

 

Configuration Options

Name Type Default Description
backgroundColor string or object white The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.
backgroundColor.fill string white The chart fill color, as an HTML color string.
backgroundColor.stroke string '#666' The color of the chart border, as an HTML color string.
backgroundColor.strokeWidth number 0 The border width, in pixels.
colorAxis Object null An object that specifies a mapping between color column values and colors or a gradient scale. To specify properties of this object, you can use object literal notation, as shown here:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
colorAxis.minValue number Minimum value of color column in chart data. If present, specifies a minimum value for chart color data. Color data values of this value and lower will be rendered as the first color in the colorAxis.colors range.
colorAxis.maxValue number Maximum value of color column in chart data If present, specifies a maximum value for chart color data. Color data values of this value and higher will be rendered as the last color in the colorAxis.colors range.
colorAxis.values array of numbers null If present, controls how values are associated with colors. Each value is associated with the corresponding color in the colorAxis.colors array. These values apply to the chart color data. Coloring is done according to a gradient of the values specified here. Not specifying a value for this option is equivalent to specifying [minValue, maxValue].
colorAxis.colors array of color strings null Colors to assign to values in the visualization. An array of strings, where each element is an HTML color string, for example: colorAxis: {colors:['red','#004411']}. You must have at least two values; the gradient will include all your values, plus calculated intermediary values, with the first color as the smallest value, and the last color as the highest.
datalessRegionColor string 'F5F5F5' Colors to assign to regions with no associated data.
displayMode string 'auto'

Which type of map this is. The DataTable format must match the value specified. The following values are supported:

  • 'auto' - Choose based on the format of the DataTable.
  • 'regions' - This is a region map
  • 'markers' - This is a marker map.
enableRegionInteractivity boolean automatic

If true, enable region interactivity, including focus and tool-tip elaboration on mouse hover, and region selection and firing of regionClick and select events on mouse click.

The default is true in region mode, and false in marker mode.

forceIFrame boolean false Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.)
height number auto Height of the visualization, in pixels. The default height is 347 pixels, unless the width option is specified and keepAspectRatio is set to true - in which case the height is calculated accordingly.
keepAspectRatio boolean true

If true, the map will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio. If only one of the width and height options is specified, the other one will be calculated according to the aspect ratio.

If false, the map will be stretched to the exact size of the chart as specified by the width and height options.

legend Object / 'none' null

An object with members to configure various aspects of the legend, or 'none', if no legend should appear. To specify properties of this object, you can use object literal notation, as shown here:

 {textStyle: {color: 'blue', fontSize: 16}}
legend.numberFormat string auto A format string for numeric labels. This is a subset of the ICU pattern set. For instance, {numberFormat:'.##'} will display values "10.66", "10.6", and "10.0" for values 10.666, 10.6, and 10.
legend.textStyle Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

An object that specifies the legend text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

region string 'world'

The area to display on the map. (Surrounding areas will be displayed as well.) Can be one of the following:

  • 'world' - A map of the entire world.
  • A continent or a sub-continent, specified by its 3-digit code, e.g., '011' for Western Africa.
  • A country, specified by its ISO 3166-1 alpha-2 code, e.g., 'AU' for Australia.
  • A state in the United States, specified by its ISO 3166-2:US code, e.g., 'US-AL' for Alabama. Note that the resolution option must be set to either 'provinces' or 'metros'.
magnifyingGlass Object {enable: true, zoomFactor: 5.0}

An object with members to configure various aspects of the magnifying glass. To specify properties of this object, you can use object literal notation, as shown here:

 {enable: true, zoomFactor: 7.5}
magnifyingGlass.enable boolean true

If true, when the user lingers over a cluttered marker, a magnifiying glass will be opened.

Note: this feature is not supported in browsers that do not support SVG, i.e. Internet Explorer version 8 or earlier.

magnifyingGlass.zoomFactor number 5.0 The zoom factor of the magnifying glass. Can be any number greater than 0.
markerOpacity number, 0.0–1.0 1.0 The opacity of the markers, where 0.0 is fully transparent and 1.0 is fully opaque.
resolution string 'countries'

The resolution of the map borders. Choose one of the following values:

  • 'countries' - Supported for all regions, except for US state regions.
  • 'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.
  • 'metros' - Supported for the US country region and US state regions only.
sizeAxis Object null An object with members to configure how values are associated with bubble size. To specify properties of this object, you can use object literal notation, as shown here:

 {minValue: 0,  maxSize: 20}
sizeAxis.maxSize number 12 Maximum radius of the largest possible bubble, in pixels.
sizeAxis.maxValue number Maximum value of size column in chart data The size value (as appears in the chart data) to be mapped to sizeAxis.maxSize. Larger values will be cropped to this value.
sizeAxis.minSize number 3 Mininum radius of the smallest possible bubble, in pixels.
sizeAxis.minValue number Minimum value of size column in chart data The size value (as appears in the chart data) to be mapped to sizeAxis.minSize. Smaller values will be cropped to this value.
tooltip Object null

An object with members to configure various tooltip elements. To specify properties of this object, you can use object literal notation, as shown here:

 {textStyle: {color: '#FF0000'}, showColorCode: true}
tooltip.textStyle Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}

An object that specifies the tooltip text style. The object has this format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

tooltip.trigger string 'focus'

The user interaction that causes the tooltip to be displayed:

  • 'focus' - The tooltip will be displayed when the user hovers over an element.
  • 'none' - The tooltip will not be displayed.
width number auto Width of the visualization, in pixels. The default width is 556 pixels, unless the height option is specified and keepAspectRatio is set to true - in which case the width is calculated accordingly.

 

Continent Hierarchy and Codes

It is possible to show maps of continents/sub-continents by setting the region option to one of the following 3-digit codes. The codes and the hierarchy are based, with some exceptions, on those developed and maintained by the United Nations Statistics Division.

Continent Sub-Continent Countries
002 - Africa 015 - Northern Africa DZ, EG, EH, LY, MA, SD, TN
011 - Western Africa BF, BJ, CI, CV, GH, GM, GN, GW, LR, ML, MR, NE, NG, SH, SL, SN, TG
017 - Middle Africa AO, CD, ZR, CF, CG, CM, GA, GQ, ST, TD
014 - Eastern Africa BI, DJ, ER, ET, KE, KM, MG, MU, MW, MZ, RE, RW, SC, SO, TZ, UG, YT, ZM, ZW
018 - Southern Africa BW, LS, NA, SZ, ZA
150 - Europe 154 - Northern Europe GG, JE, AX, DK, EE, FI, FO, GB, IE, IM, IS, LT, LV, NO, SE, SJ
155 - Western Europe AT, BE, CH, DE, DD, FR, FX, LI, LU, MC, NL
151 - Eastern Europe BG, BY, CZ, HU, MD, PL, RO, RU, SU, SK, UA
039 - Southern Europe AD, AL, BA, ES, GI, GR, HR, IT, ME, MK, MT, CS, RS, PT, SI, SM, VA, YU
019 - Americas 021 - Northern America BM, CA, GL, PM, US
029 - Caribbean AG, AI, AN, AW, BB, BL, BS, CU, DM, DO, GD, GP, HT, JM, KN, KY, LC, MF, MQ, MS, PR, TC, TT, VC, VG, VI
013 - Central America BZ, CR, GT, HN, MX, NI, PA, SV
005 - South America AR, BO, BR, CL, CO, EC, FK, GF, GY, PE, PY, SR, UY, VE
142 - Asia 143 - Central Asia TM, TJ, KG, KZ, UZ
030 - Eastern Asia CN, HK, JP, KP, KR, MN, MO, TW
034 - Southern Asia AF, BD, BT, IN, IR, LK, MV, NP, PK
035 - South-Eastern Asia BN, ID, KH, LA, MM, BU, MY, PH, SG, TH, TL, TP, VN
145 - Western Asia AE, AM, AZ, BH, CY, GE, IL, IQ, JO, KW, LB, OM, PS, QA, SA, NT, SY, TR, YE, YD
009 - Oceania 053 - Australia and New Zealand AU, NF, NZ
054 - Melanesia FJ, NC, PG, SB, VU
057 - Micronesia FM, GU, KI, MH, MP, NR, PW
061 - Polynesia AS, CK, NU, PF, PN, TK, TO, TV, WF, WS

Methods

Method Return Type Description
clearChart() none Clears the chart, and releases all of its allocated resources.
draw(data, options) none Draws the chart. The chart accepts further method calls only after the ready event is fired. Extended description.
getImageURI() String

Returns the chart serialized as an image URI.

Call this after the chart is drawn.

See Printing PNG Charts.

getSelection() Array of selection elements Returns an array of the selected chart entities. Selectable entities are regions with an assigned value. A region correlates to a row in the data table (column index is null). For this chart, only one entity can be selected at any given moment. Extended description.
setSelection() none Selects the specified chart entities. Cancels any previous selection. Selectable entities are regions with an assigned value. A region correlates to a row in the data table (column index is null). For this chart, only one entity can be selected at a time. Extended description.

Events

Name Description Properties
error Fired when an error occurs when attempting to render the chart. id, message
ready The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired. None
regionClick Called when a region is clicked. This will not be thrown for the specific country assigned in the 'region' option (if a specific country was listed). An object with a single property, region, that is a string in ISO-3166 format describing the region clicked.
select Fired when the user clicks a visual entity. To learn what has been selected, call getSelection(). None

Data Policy

Locations are geocoded by Google Maps. Any data that does not require geocoding is not sent to any server. Please see the Google Maps Terms of Service for more information on their data policy.

Autenticação necessária

Você precisa fazer login com o Google+ para fazer isso.

Fazendo login...

O Google Developers precisa de sua permissão para fazer isso.