Visualization: Pie Chart (Old Version)

Deprecated

This visualization has been replaced with a new version; please use that instead. For easy migration, please refer to the release notes page.

  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 within the browser using SVG or VML. Displays tips when clicking on slices. Animates slices when clicking on legend entries.

By: Google

Example

Code it yourself on the Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

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

Loading

The google.load package name is "piechart"

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

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

  var visualization = new google.visualization.PieChart(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

Name Type Default Description
backgroundColor string or Object default color The background color for the main area of the chart. One of the following options:
  • A string with color supported by HTML, for example 'red' or '#00cc00', or
  • A description of a n object with the following properties:
    • stroke - An HTML color string describing the chart border color.
    • fill - An HTML color string describing the chart background color.
    • strokeSize - A number describing the thickness, in pixels, of the chart border. For no border, this can be set to 0.
      Example: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor string or Object default color The border around chart elements. Possible values are as those of the backgroundColor configuration option.
colors Array of strings or objects Default colors

An array of colors, where each element specifies the color of one series. You should specify one array element for each series.

  • If is3D=false, this is an array of HTML colors. Example: colors:['#00FF00','orange']
  • If is3D=true, this is an array of either HTML colors, or objects of this type: {color:face_color, darker:shade_color} where color is the element's face color, and darker is the shade color. However, if you specify an HTML color for a 3D object, face and shade will be the same color, and the 3D effect will be reduced. Example: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true If set to true, tooltips are shown when the user clicks on a slice.
focusBorderColor string or Object default color The border around chart elements that are in focus (pointed by the mouse). Possible values are as those of the backgroundColor configuration option.
height number Container's height Height of the chart in pixels.
is3D boolean false If set to true, displays a three-dimensional chart.
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.
  • 'label' - Labels near slices.
  • 'none' - No legend is displayed.
legendBackgroundColor string or Object default color The background color for the legend area of the chart. Possible values are as those of the backgroundColor configuration option.
legendFontSize number automatic The size of the legend font, in pixels.
legendTextColor string or Object default color The legend text color. Possible values are as those of the backgroundColor configuration option.
pieJoinAngle number 0 Any slice less than this angle will be combined into a generic slice labeled "Other".
pieMinimalAngle number 0

Any slice smaller than this angle will not be drawn in the pie chart (though it will still get a legend entry). The remaining slices will expand to fill the pie in fixed proportion. Note: This can distort the apparent values, especially when this number is large, because a quantity is being removed from the pie.

To calculate the sizes of the slices, first angles smaller than pieJoinAngle are joined to the "Other" slice, and then all slices larger than pieMinimalAngle are drawn
title string no title Text to display above the chart.
titleColor string or Object default color The color for the chart's title. Possible values are as those of the backgroundColor configuration option.
titleFontSize number automatic The font size for the chart title, in pixels.

tooltipFontSize		 number 11 The font size of the tooltip text. This might be reduced, if the tooltip is too small to hold the text in the specified font.
tooltipHeight
 number 60 The height of the tooltip, in pixels. The tooltip height is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than 1/3 the chart height will be cropped.
tooltipWidth number 120 The width of the tooltip, in pixels. The tooltip width is fixed; it will never grow or shrink to fit the length or font size of the text. But anything greater than the chart width will be cropped.
width number Container's width Width of the chart in pixels.

Methods

Method Return Type Description
draw(data, options) none Draws the chart.
getSelection() Array of selection elements Standard getSelection() implementation. Selected elements are row and cell elements. Multiple rows and/or a single cell can be selected at a time by the user.
setSelection() none Standard setSelection() implementation, but supports selection of multiple rows and/or one cell. Treats every selection entry as a row or cell selection.

Events

Name Description Properties
onmouseover Fired when the user mouses over a slice, and passes in the row and column indexes of the corresponding cell. row, column
onmouseout Fired when the user mouses away from a slice, and passes in the row and column indexes of the corresponding cell. row, column
ready The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired None
select

Fired when the user clicks a slice or legend. When a slice is selected, the corresponding cell in the data table is selected; when a legend is selected, the corresponding column in the data table is selected. To learn what has been selected, call getSelection().

Note: Clicking a slice does not toggle between selecting and deselecting a cell; clicking a slice always selects it. Clicking a legend entry, on the other hand, toggles between selecting and deselecting the row.

None

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.