Visualization: Bar Chart (Image)

    • The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012, but will continue to work as per their deprecation policy.

    • This page provides an overview and example of an Image Bar Chart rendered using the Google Charts API.

    • Key aspects covered include how to load the chart, the required data format, available configuration options, methods, and events.

    • The data policy for using Image Bar Charts refers to the general Chart API logging policy.

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

    Example

     
    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      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" style="width: 400px; height: 240px;"></div>
  </body>
</html>

    Loading

    The google.charts.load package name is "imagebarchart" 

      
 google 
 . 
 charts 
 . 
 load 
 ( 
 "current" 
 , 
  
 { 
 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
    backgroundColor
    string
    '#FFFFFF' (white)
    The background color for the chart in the Chart API color format .
    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.
    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.
    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
    Container's width
    Width of the chart in pixels.

    Methods

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

    Events

    You can register to hear the events described on the Generic Image Chart page.

    Data Policy

    Please refer to the Chart API logging policy .
    Create a Mobile Website
    View Site in Mobile | Classic
    Share by: