Stay organized with collectionsSave and categorize content based on your preferences.
Important:The Image Charts portion of Google Chart Tools has beenofficially deprecatedas of April 20, 2012. It will continue to work as per ourdeprecation policy.
Specifies a base color to use for all series; each series will be a gradation
of the color specified. Colors are specified in theChart API color format.
Ignored ifcolorsis specified.
colors
Array<string>
Auto
Use this to assign specific colors to each data series. Colors are specified
in theChart 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 thecoloroption
instead.
enableEvents
boolean
false
Causes charts to throw user-triggered events such as click or mouse over.
Supported only for specific chart types. SeeEventsbelow.
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 theGeneric
Image Chartpage.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-10 UTC."],[],[],null,["# Visualization: Pie Chart (Image)\n\n**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](/chart/terms). \n1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Loading](#Loading)\n4. [Data Format](#Data_Format)\n5. [Configuration Options](#Configuration_Options)\n6. [Methods](#Methods)\n7. [Events](#Events)\n8. [Data Policy](#Data_Policy)\n\nOverview\n--------\n\n\nA pie chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/pie_charts).\n\nExample\n-------\n\n\\\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\\\u003e\\\u003c/script\\\u003e \\\u003cscript type=\"text/javascript\"\\\u003e google.charts.load('current', {'packages':\\['imagepiechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e 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'}); } \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"imagepiechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n var data = google.visualization.arrayToDataTable([\n ['Task', 'Hours per Day'],\n ['Work', 11],\n ['Eat', 2],\n ['Commute', 2],\n ['Watch TV', 2],\n ['Sleep', 7]\n ]);\n\n var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));\n\n chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoading\n-------\n\n\nThe `google.charts.load` package name is `\"imagepiechart\"`: \n\n```gdscript\n google.charts.load('current', {packages: ['imagepiechart']});\n```\n\n\nThe visualization's class name is `google.visualization.ImagePieChart` \n\n```gdscript\n var visualization = new google.visualization.ImagePieChart(container);\n```\n\nData Format\n-----------\n\n\nTwo columns.\nThe first column should be a string, and contain the slice label.\nThe second column should be a number, and contain the slice value.\n\nConfiguration Options\n---------------------\n\nYou can specify the following options as part of the *options* object passed into\nthe visualization's `draw()` method.\n\n| Name | Type | Default | Description |\n|-----------------|-----------------|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). |\n| 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](/chart/image/docs/chart_params#gcharts_rgb). Ignored if `colors` is specified. |\n| colors | Array\\\u003cstring\\\u003e | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). 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. |\n| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See [Events](#Events) below. |\n| height | number | Container's height | Height of the chart in pixels. |\n| is3D | boolean | false | If set to true, displays a three-dimensional chart. |\n| 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). |\n| legend | string | 'right' | The location of the legend on the chart. Choose from one of the following values: 'top', 'bottom', 'left', 'right', 'none'. |\n| title | string | no title | Text to display above the chart. |\n| width | number | Container's width | Width of the chart in pixels. |\n\nMethods\n-------\n\n| Method | Return Type | Description |\n|-----------------------|-------------|------------------|\n| `draw(data, options)` | none | Draws the chart. |\n\nEvents\n------\n\nYou can register to hear the events described on the [Generic\nImage Chart](/chart/interactive/docs/gallery/genericimagechart#Events) page.\n\nData Policy\n-----------\n\n\nPlease refer to the [Chart API logging policy](/chart/interactive/faq#logging)."]]
