Visualization: Pie 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 documentation for creating a pie chart rendered as an image using the Google Charts API.

  • Key sections covered include an overview, examples, loading instructions, data format requirements, configuration options, available methods, and information on events and data 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 pie 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:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Loading

The google.charts.load package name is "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

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

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

Data Format

Two columns. The first column should be a string, and contain the slice label. The second column should be a number, and contain the slice value.

Configuration Options

You can specify the following options as part of the options object passed into the visualization's draw() method.

Name Type Default Description
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.
height number Container's height Height of the chart in pixels.
is3D boolean false If set to true, displays a three-dimensional chart.
labels string 'none'

What label, if any, to show for each slice. Choose from the following values:

  • 'none' - No labels.
  • 'value' - Use the slice value as a label.
  • 'name' - Use the slice name (the column name).
legend string 'right' The location of the legend on the chart. Choose from one of the following values: 'top', 'bottom', 'left', 'right', 'none'.
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

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

Data Policy

Please refer to the Chart API logging policy.