# Visualization: Generic Image Chart
**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](https://developers.google.com/chart/terms).
1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Overview)
2. [Examples](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Example)
3. [Loading](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Loading)
4. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Data_Format)
5. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Configuration_Options)
6. [Methods](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Methods)
7. [Events](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Events)
8. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#Data_Policy)
9. [Localization](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#localization)
## Overview
The Generic Image Chart is a generic wrapper for all charts produced by the [Google
Chart API](https://developers.google.com/chart/image). 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
```
```
### 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.
```
```
### Pie Chart
```
```
### Radar Chart
```
```
### Map Chart
```
```
## 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](http://en.wikipedia.org/wiki/ISO_3166-2).
- Second column - \[*number*\] The value for that country or state.
See the [map chart
documentation](https://developers.google.com/chart/interactive/docs/gallery/geomap) 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 [`chl`](https://developers.google.com/chart/image/docs/chart_params#pie_labels) or `chxl` parameter) 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](https://developers.google.com/chart/image/docs/chart_params#data_point_labels) for charts that support it. If you want to use this column, you must specify the `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.
## Configuration
Options
The following options are defined for this visualization. Define them in the options
object passed into the visualization's `https://developers.google.com/chart/interactive/docs/reference#visdraw` 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](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb).
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\ | none | [Data point labels](https://developers.google.com/chart/image/docs/chart_params#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: - `column` \[*number*\] - The zero-based index of the column that holds the text used in the annotation. You do not need a value in every row of this column. - `positionColumn` \[*number*\] - The zero-based index of the column that holds the data point being labelled. The default is the first data column. - `color` \[*string* \] - The color of the annotation text in the [Chart API color format](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). The default is '#000000' (black). - `size` \[*number*\] - The font size of the annotation, in pixels. - `priority` \[*string*\] - Either 'low', 'medium', or 'high', specifying the layer into which the label should be drawn. The default is 'medium', which specifies that the label is drawn after bars and lines, but before other labels. - `type` \[*string*\] - Either 'text' or 'flag'. 'text' creates a plain text annotation, and 'flag' creates a speech-balloon annotation. **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: `options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];` |
| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). |
| 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](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). Ignored if `colors` is specified. |
| colors | Array\ | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb). 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](https://developers.google.com/chart/interactive/docs/gallery/genericimagechart#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: - 'none' - No labels. - 'value' - Show the slice value as a label. - 'name' - Show the slice name (the column name) as a label. |
| 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`](https://developers.google.com/chart/image/docs/chart_params#chart_title). |
| 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](https://developers.google.com/chart/image) 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 the `chof=json` parameter to the raw chart type to see a list of available names. See [`chof=json`](https://developers.google.com/chart/image/docs/chart_params#gcharts_chof) for 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`](https://developers.google.com/chart/image/docs/chart_params#gcharts_chof) 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.
```
Google Image Events Sample
```
## Data Policy
Data are sent to the [Google Chart API](https://developers.google.com/chart/image) service.
## Localization
This visualization supports any localization supported
by the Google Chart service.