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

The markers style renders circles at specified locations on the geochart, 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. (The magnifying glass is not supported in Internet Explorer version 8 or earlier.)

<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'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.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 geocharts 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.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
     google.charts.load('current', {
       'packages': ['geochart'],
       // Note: Because markers require geocoding, you'll need a mapsApiKey.
       // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
       'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
     });
     google.charts.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>

Text GeoCharts

You can overlay text labels onto a geochart with displayMode: text.

Data & Options
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['South America', 600],
    ['Canada', 500],
    ['France', 600],
    ['Russia', 700],
    ['Australia', 600]
  ]);

  var options = { displayMode: 'text' };
Full HTML
<html>
 <head>
  <script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="regions_div" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: Because this chart requires geocoding, you'll need a mapsApiKey.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

   function drawRegionsMap() {
     var data = google.visualization.arrayToDataTable([
       ['Country', 'Popularity'],
       ['South America', 600],
       ['Canada', 500],
       ['France', 600],
       ['Russia', 700],
       ['Australia', 600]
     ]);

     var options = { displayMode: 'text' };

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

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

Coloring your chart

There are several options for customizing the colors of GeoCharts:

  • colorAxis: the spectrum of colors to use for the regions in the datatable.
  • backgroundColor: the background color for the chart.
  • datalessRegionColor: the color to assign to regions with no associated data.
  • defaultColor: the color to assign to regions in the datatable for which the value is either null or unspecified.

The colorAxis option is the important one: it specifies the range of colors for your data values. In the colorAxis array, the first element is the color given to the smallest value in your dataset, and the last element is the color given to the largest value in your dataset. If you specify more than two colors, interpolation will occur between them.

In the following chart, we'll use all four options. The colorAxis is used to display Africa with the colors of the pan-African flag, using the latitudes of the countries: from red in the north, through black, to green in the south. The backgroundColor option is used to color the background a light blue, datalessRegionColor to color the non-African countries a light pink, and defaultColor for Madagascar.
Options
        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };
Full Web Page
<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'],
        // Note: Because this chart requires geocoding, you'll need mapsApiKey.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country',   'Latitude'],
          ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
          ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
          ['Canary Islands', 28], ['Cape Verde', 15],
          ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
          ['Comoros', -12], ['Cote d\'Ivoire', 6],
          ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
          ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
          ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
          ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
          ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
          ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
          ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
          ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
          ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
          ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
          ['São Tomé and Principe', 0], ['Senegal', 15],
          ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
          ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
          ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
          ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
          ['Zimbabwe', -18]
        ]);

        var options = {
          region: '002', // Africa
          colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
          backgroundColor: '#81d4fa',
          datalessRegionColor: '#f8bbd0',
          defaultColor: '#f5f5f5',
        };

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

Loading

The google.charts.load package name is "geochart". Note that you shouldn't copy our mapsApiKey; that won't work. As long as your chart doesn't require geocoding or use nonstandard codes to identify locations, you don't need a mapsApiKey. For more details, see Load Settings. 

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: if your chart requires geocoding or uses nonstandard codes, you'll
    // need to get a mapsApiKey for your project. The one below won't work.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

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, markers, or text.

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.

    Note: Although we recommend ISO 3166 codes to be used for 'regions' mode, 'markers' mode works best with longer names for regions (like Germany, Panama, etc). This is because geocharts, when in 'markers' mode, uses Google Maps for geocoding the locations (converting a string location to a latitude and longitude). This may result in ambiguous locations not getting geocoded as you might expect; such as 'DE' standing for Germany or Delaware, or 'PA' standing for Panama or Pennsylvania.

  • 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.

Text mode format

The label is entered in the first column, plus one optional column:

  • Text label [String, Required] A specific string address (for example, "1600 Pennsylvania Ave").
  • Text size [Number, Optional] The second column is an optional numeric column used to assign the size of the label. If this column is not present, all labels will be the same size.

Configuration options

Name
backgroundColor

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.

Type: string or object
Default: white
backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string
Default: white
backgroundColor.stroke

The color of the chart border, as an HTML color string.

Type: string
Default: '#666'
backgroundColor.strokeWidth

The border width, in pixels.

Type: number
Default: 0
colorAxis

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']}
Type: object
Default: null
colorAxis.minValue

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.

Type: number
Default: Minimum value of color column in chart data
colorAxis.maxValue

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.

Type: number
Default: Maximum value of color column in chart data
colorAxis.values

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].

Type: array of numbers
Default: null
colorAxis.colors

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.

Type: array of color strings
Default: null
datalessRegionColor

Color to assign to regions with no associated data.

Type: string
Default: '#F5F5F5'
defaultColor

The color to use when for data points in a geochart when the location (e.g., 'US' ) is present but the value is either null or unspecified. This is distinct from datalessRegionColor, which is the color used when data is missing.

Type: string
Default: '#267114'
displayMode

Which type of geochart 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' - Color the regions on the geochart.
  • 'markers' - Place markers on the regions.
  • 'text' - Label the regions with text from the DataTable.
Type: string
Default: 'auto'
domain

Show the geochart as though it were being served from this region. For instance, setting domain to 'IN' will display Kashmir as belonging to India rather than as a disputed territory.

Type: string
Default: null
enableRegionInteractivity

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.

Type: boolean
Default: automatic
forceIFrame

Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.)

Type: boolean
Default: false
geochartVersion

The version of the GeoChart border data. Versions 10 and 11 are available.

Type: number
Default:10
height

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.

Type: number
Default: auto
keepAspectRatio

If true, the geochart 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 geochart will be stretched to the exact size of the chart as specified by the width and height options.

Type: boolean
Default: true
legend

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}}
Type: Object / 'none'
Default: null
legend.numberFormat

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.

Type: string
Default: auto
legend.textStyle

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.

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
region

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

  • 'world' - A geochart 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'.
Type: string
Default: 'world'
magnifyingGlass

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}
Type: Object
Default: {enable: true, zoomFactor: 5.0}
magnifyingGlass.enable

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.

Type: boolean
Default: true
magnifyingGlass.zoomFactor

The zoom factor of the magnifying glass. Can be any number greater than 0.

Type: number
Default: 5.0
markerOpacity

The opacity of the markers, where 0.0 is fully transparent and 1.0 is fully opaque.

Type: number, 0.0–1.0
Default: 1.0
regioncoderVersion

The version of the regioncoder data. Versions 0 and 1 are available.

Type: number
Default:0
resolution

The resolution of the geochart 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.
Type: string
Default: 'countries'
sizeAxis

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}
Type: object
Default: null
sizeAxis.maxSize

Maximum radius of the largest possible bubble, in pixels.

Type: number
Default: 12
sizeAxis.maxValue

The size value (as appears in the chart data) to be mapped to sizeAxis.maxSize. Larger values will be cropped to this value.

Type: number
Default: Maximum value of size column in chart data
sizeAxis.minSize

Mininum radius of the smallest possible bubble, in pixels.

Type: number
Default: 3
sizeAxis.minValue

The size value (as appears in the chart data) to be mapped to sizeAxis.minSize. Smaller values will be cropped to this value.

Type: number
Default: Minimum value of size column in chart data
tooltip

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}
Type: object
Default: null
tooltip.textStyle

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.

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

The user interaction that causes the tooltip to be displayed:

  • 'focus' - The tooltip will be displayed when the user hovers over the element.
  • 'none' - The tooltip will not be displayed.
  • 'selection' - The tooltip will be displayed when the user selects the element.
Type: string
Default: 'focus'
width

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.

Type: number
Default: auto

 

Continent Hierarchy and Codes

It is possible to show geocharts 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, SS, 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, 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
clearChart()

Clears the chart, and releases all of its allocated resources.

Return Type: none
draw(data, options)

Draws the chart. The chart accepts further method calls only after the readyevent is fired. Extended description.

Return Type: none
getImageURI()

Returns the chart serialized as an image URI.

Call this after the chart is drawn.

See Printing PNG Charts.

Return Type: string
getSelection()

Returns an array of the selected chart entities. Selectable entities are regions with an assigned value. For this chart, only one entity can be selected at any given moment. Extended description .

Return Type: Array of selection elements
setSelection()

Selects the specified chart entities. Cancels any previous selection. Selectable entities are regions with an assigned value. For this chart, only one entity can be selected at a time. Extended description .

Return Type: none

Events

Name
error

Fired when an error occurs when attempting to render the chart.

Properties: 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.

Properties: 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).

Properties: 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().

Properties: 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.