Visualization: Generic Image Chart

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.

  1. Overview
  2. Examples
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy
  9. Localization

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:

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 chl 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 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 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:

  • 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. 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.
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:

  • '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.
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 the chof=json parameter to the raw chart type to see a list of available names. See chof=json 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 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.