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

<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.
Note: The maximum height of the visualization is 220.
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.