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
Here are examples of several different types of charts. Try them out on the Google Code Playground.
|
function drawLineChart() {
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);
}
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.
function drawBarChart() {
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);
}
function drawPieChart() {
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);
}
function drawRadarChart() {
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);
}
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("visualization", "1.1", {packages:["imagechart"]});
google.setOnLoadCallback(drawChart);
</script>
<script type='text/javascript'>
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: 'FFFFFF,EEEEEE,000000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
The google.load package name is 'imagechart'
google.load('visualization', '1', {'packages': ['imagechart']});
The visualization's class name is google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
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:
See the map chart type description in the Google Chart API 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:
chl or chxl parameter)
for charts that support it.annotationColumns option.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.
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 chart type in the Chart
API. 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'.
| 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: |
| color | string | Auto | Specifies a base color to use for all series; each series will be a gradation
of the color specified. Ignored if colors is specified. |
| colors | Array<string> | Auto | Use this to assign specific colors to each data series. Colors are specified
in #RRGGBB format (e.g. '#3399CC'). 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. |
| 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. This feature is similar to the multiple
data series feature ( |
| 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. |
| 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. |
| 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. |
Static image charts throw no events.
Data are sent to the Google Chart API service.
This visualization supports any localization supported by the Google Chart service.