My favorites | English | Sign in

Faster apps faster - GWT 2.0 with Speed Tracer New!

Google Visualization API

Visualization: Area Chart (Image)

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

Overview

An area chart that is rendered as an image using the Google Charts API.

By: Google

Example

Code it yourself on the Visualization Playground

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['imageareachart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Expenses');
        data.addColumn('number', 'Sales');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 900);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 1000);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 600);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 1000);

        var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>

Loading

The google.load package name is "imageareachart" 

  google.load('visualization', '1', {packages: ['imageareachart']});

The visualization's class name is google.visualization.ImageAreaChart 

  var visualization = new google.visualization.ImageAreaChart(container);

Data Format

Each column represents a line in the chart; each entry is the Y axis value at the same X axis point, and the visualization connects them with a straight line, then fills in the area below the line.

Data is processed by column, starting at column zero and increasing. You shoud write the highest lines first, then the lower lines, because if you painted a lower line first, a higher line would paint over and hide any lower lines. Therefore try to make column 1 have higher points than column 2, column 2 higher than column 3, and so on. If you have one or two points higher on a right column than a left column, it might partially obscure the lower line, but it should still be visible.

All data must be numeric type except for the first, which can be either numeric or string. If the first column is a string type, the first column entries will be displayed as labels on the X; if the first column is a number, no X axis labels will be shown. All columns (except the first) must be numbers. There is no limit to the number of columns.

Configuration Options

Name Type Default Description
colors Array of strings Default colors The colors to use for the chart elements. An array of strings. Each element is a string in the format #rrggbb. For example '#00cc00'.
height number Container's height Height of the chart in pixels.
legend string 'right' Position and type of legend. Can be one of the following:
  • 'right' - To the right of the chart.
  • 'left' - To the left of the chart.
  • 'top' - Above the chart.
  • 'bottom' - Below the chart.
  • 'none' - No legend is displayed.
max number automatic The maximal value to show in the Y axis.
min number automatic The minimal value to show in the Y axis.
showCategoryLabels boolean true If set to false, removes the labels of the categories (the X axis labels).
showValueLabels boolean true If set to false, removes the labels of the values (the Y axis labels).
title string no title Text to display above the chart.
width number Container's width Width of the chart in pixels.

Methods

Method Return Type Description
draw(data, options) none Draws the chart.

Events

No triggered events.

Data Policy

Please refer to the Chart API logging policy.