Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy.
Overview
The Generic Image Chart is a generic wrapper for all charts produced by the Google Chart API. Please read the Chart API documentation before trying to use this visualization. Note that you can send up to 16K of data using this visualization, unlike the 2K limit in direct calls to the Chart API.
All data is passed to the charts using a DataTable or DataView. Additionally, some labels are passed as columns in the data table.
All other Chart API URL parameters (except for chd) are passed as
options.
By: Google
Examples
Here are examples of several different types of charts.
Line Chart
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Vertical Bar Chart
Note that in the wrapped bar charts, you do not need to specify chxt='x' as you would if calling the chart yourself; if you do not specify an axis, the Generic Image Chart tries to set the chart up properly by default.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Pie Chart
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Radar Chart
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Map Chart
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Loading
The google.charts.load package name is 'imagechart'
google.charts.load('current', {'packages': ['imagechart']});
The visualization's class name is google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Data Format
There are two generalized data formats: one for map charts, and one for all other charts. Note that the only numeric format supported for data is the JavaScript Number type.
Note You should not URL-encode any string values passed as data or options.
Map Charts
A map chart takes a data table with two required columns:
- First column - [string] Country or state/province code.
- Second column - [number] The value for that country or state.
See the map chart documentation for more information.
Non-Map Charts
Non-map charts take a data table with two optional columns (one at the beginning, one at the end), and one or more data columns in between:
- First column - [optional, string] Each entry represents a label
used on the X axis (equivalent to the
chlorchxlparameter) for charts that support it. - Next columns - Any number of numeric columns, each representing a data series.
- Last columns - [optional, string] Any number of string columns
after the data columns, where each entry represents a data
point label for charts that support it. If you want to use this column,
you must specify the
annotationColumnsoption.
The data will be displayed in different ways, depending on the chart type. See the documentation for your chart.
A note about column indexes: The Generic Image Chart
visualization strips out string columns from the data table before sending the
table to the Chart API service. Therefore, column indexes in the options, methods,
and events defined on this page include the string columns in the index count;
but column indexes in any options handled by the Chart API service (for example,
the chm option) ignore the string columns in the index count.
Configuration Options
The following options are defined for this visualization. Define them in the options
object passed into the visualization's draw() method.
Not all of the following options are supported for all chart types; see the documentation
for your static image chart type. You can pass any Chart API URL parameter as an option. For example, the
URL parameter chg=50,50 from a Chart visualization would be specified
this way: options['chg'] = '50,50'.
A note about colors: Color options
such as colors, color and backgroundColor
are specified in the Chart API color format.
This format is similar to #RRGGBB format except that it includes an optional
fourth hexadecimal number to indicate transparency. Human-readable colors,
such as 'red', 'green', 'blue' etc. are not supported. The Chart API color
format does not include the leading # symbol, but the generic image chart
visualization options will accept color codes with or without a #.
| Name | Type | Default | Description |
|---|---|---|---|
| annotationColumns | Array<object> | none | Data point labels for various types of charts. This is an array of objects, each assigning a formatted label to one data point on the chart. This option is available only for charts that support data points (see the linked topic to learn which ones), and the data table must have at least one of the string label columns. Each object in the array has the following properties:
Example - This snippet defines a black, 12 pixel text
label, with text taken from column 0, and assigned to the data point
in column 2 of the same row: |
| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the Chart API color format. |
| color | string | Auto | Specifies a base color to use for all series; each series will be a gradation
of the color specified. Colors are specified in the Chart API color format.
Ignored if colors is specified. |
| colors | Array<string> | Auto | Use this to assign specific colors to each data series. Colors are specified
in the Chart API color format.
Color i is used for data column i, wrapping around to the beginning
if there are more data columns than colors. If variations of a single
color is acceptable for all series, use the color option
instead. |
| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See Events below. |
| fill | boolean | false | If true, fills in the area under each line. Available only for line charts. |
| firstHiddenColumn | number | none | A data column index. The column listed, as well as all following columns, will not be used to draw the main chart series elements (such as lines on a line chart, or bars on a bar chart), but instead are used as data for markers and other annotations. Note that string columns are included in this index count. |
| height | number | 200 | Height of the chart, in pixels. If missing or not in an acceptable range, the height of the containing element is used. If that is also outside the acceptable range, the default height will be used. |
| labels | string | 'none' | [Pie chart only] What label, if any, to show for each slice. Choose from the following values:
|
| legend | string | 'right' | Where to display a chart legend, relative to the chart. Specify one of the following: 'top', 'bottom', 'left', 'right', 'none'. Ignored in charts that do not include legends (such as map charts). |
| max | number | Maximum data value | The maximum value shown on the scale. Ignored for pie charts. The default is the maximum data value, except for bar charts, where the default is the maximum data value. This is ignored for bar charts when the table has more than one data column. |
| min | number | Mimimum data value | The minimum value shown on the scale. Ignored for pie charts. The default is the minimum data value, except for bar charts, where the default is zero. This is ignored for bar charts when the table has more than one data column. |
| showCategoryLabels | boolean | true | Whether labels should appear on the category (i.e. row) axis. Available only for line and bar charts. |
| showValueLabels | boolean | true | True displays a label on the value axis. Available only for line and bar charts. |
| singleColumnDisplay | number | none | Renders only the specified data column. This number is a zero-based index into the table, where zero is the first data column. The color assigned to the single column is the same as when all columns are rendered. Cannot be used with pie or map charts. |
| title | string | Empty string | The chart title. If not specified, no title will be displayed. The equivalent
chart parameter is chtt. |
| valueLabelsInterval | number | Auto | The interval at which to show value axis labels. For example, if min
is 0, max is 100, and valueLabelsInterval
is 20, the chart will show axis labels at (0, 20, 40, 60, 80 100). |
| width | number | 400 | Width of the chart, in pixels. If missing or not in an acceptable range, the width of the containing element is used. If that is also outside the acceptable range, the default width will be used. |
Methods
| Method | Return Type | Description |
|---|---|---|
draw(data, options) |
None | Draws the map. |
getImageUrl() |
String | Returns the Google Chart API URL used to request the chart. Note that this can be more than 2,000 characters long. See the Google Chart API for more details. |
Events
If you set the enableEvents property to true, then supporting charts
will throw events for user events listed in the table below. All of these events
return an event object with the following properties:
type- A string representing the type of event.region- An ID for the region affected. Add thechof=jsonparameter to the raw chart type to see a list of available names. Seechof=jsonfor more details.
| Name | Description | type Value |
|---|---|---|
error |
Fired when an error occurs when attempting to render the chart. | id, message |
onmouseover |
Fired when the user mouses over a chart element. | "mouseover" |
onmouseout |
Fired when the user mouses away from a chart element. | "mouseout" |
onclick |
Fired when a user clicks on a chart element. | "click" |
Which charts support events?
Any charts that support the chof=json parameter
support throwing events (that is, all charts except special charts, for example
QR codes).
Event Handling Example
Here is an example showing a bar that records mouse clicks.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Data Policy
Data are sent to the Google Chart API service.
Localization
This visualization supports any localization supported by the Google Chart service.