My favorites | English | Sign in

Google Visualization API

Visualization: Intensity Map

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

Overview

An intensity map that highlights regions or countries based on relative values

By: Google

Example

Code it yourself on the Visualization Playground

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['intensitymap']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '', 'Country');
        data.addColumn('number', 'Population (mil)', 'a');
        data.addColumn('number', 'Area (km2)', 'b');
        data.addRows(5);
        data.setValue(0, 0, 'CN');
        data.setValue(0, 1, 1324);
        data.setValue(0, 2, 9640821);
        data.setValue(1, 0, 'IN');
        data.setValue(1, 1, 1133);
        data.setValue(1, 2, 3287263);
        data.setValue(2, 0, 'US');
        data.setValue(2, 1, 304);
        data.setValue(2, 2, 9629091);
        data.setValue(3, 0, 'ID');
        data.setValue(3, 1, 232);
        data.setValue(3, 2, 1904569);
        data.setValue(4, 0, 'BR');
        data.setValue(4, 1, 187);
        data.setValue(4, 2, 8514877);

        var chart = new google.visualization.IntensityMap(document.getElementById('chart_div'));
        chart.draw(data, {});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Loading

The google.load package name is "intensitymap" 

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

The visualization's class name is google.visualization.IntensityMap 

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

Data Format

The first column should be a string, and contain country ISO codes or USA state codes. Any number of columns can follow, all must be numeric. Each column is displayed as a separate map tab.

Configuration Options

Name Type Default Description
colors Array of strings Default colors The colors to use for each tab. An array of strings. Each element is a string in the format #rrggbb. For example '#00cc00'.
height number 220

Height of the map in pixels. The maximum height of the visualization is 220.

Note that this height assumes a one-row tab. If your tab text is long, it will wrap the tab to multiple lines, and the extra lines will exceed the specified height.
region string 'world' The required region. Possible values are: 'world', 'africa', 'asia', 'europe', 'middle_east', 'south_america', and 'usa'.
showOneTab boolean false The intensity map can display one or more numeric columns. Each column is displayed as a separate map, and tabs on top enable selection of which map to show. When the data table contains only one numeric column, the tabs are not displayed. To display tabs even for a single numeric column, set this option to true.
width number 440 Width of the map in pixels.
Note: The maximum width of the visualization is 440.

Methods

Method Return Type Description
getSelection() Array of selection elements Standard getSelection() implementation. Supports only selection of a single column.
setSelection(selection) none Standard setSelection() implementation. Supports only selection of a single column.

Events

Name Description Properties
select Standard select event None
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 the methods only after the event was fired None

Data Policy

Map images are generated using the Google Charts API. Please refer to the Chart API logging policy.