©2009 Google -
Code Home -
Terms of Service -
Privacy Policy -
Site Directory
Google Code offered in:
English -
Español -
日本語 -
한국어 -
Português -
Pусский -
中文(简体) -
中文(繁體)
An intensity map that highlights regions or countries based on relative values
By: Google
<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>
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);
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.
| 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. |
| 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. |
| 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 |
Map images are generated using the Google Charts API. Please refer to the Chart API logging policy.