My favorites | English | Sign in

Faster apps faster - GWT 2.0 with Speed Tracer New!

Google Visualization API

Visualization: Bar Chart (Image)

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

Overview

A bar 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:["imagebarchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>

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

Loading

The google.load package name is "imagebarchart" 

  google.load("visualization", "1", {packages: ["imagebarchart"]});

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

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

Data Format

The first column should be a string, and contain the category label. Any number of columns can follow, all must be numeric. Each column is displayed as a set of bars. When the data table contains more than one numeric column, values in a row are displayed as stacked bars.

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.
isStacked boolean true Controls whether multiple data columns will be displayed as stacked (as opposed to grouped) bars.
isVertical boolean false Controls whether the bars will be vertical.
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.
showValueLabels boolean true If set to false, removes the labels of the values.
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.