Vision - Pie Chart
Component Palette Icon:
Description​
The Pie Chart component displays a familiar-looking pie chart. A Pie Chart displays a list of named items, each of which has a value that is part of a total. The total is the sum of the value of each item. The key to the Pie Chart component is the Data property, which contains the items that will be displayed as pie wedges. Typically, this dataset will be bound to a SQL Query Binding in Vision to pull dynamic data out of an external database.
Extract Order​
Similar to other charts, the pie chart can actually accept data in two formats. You can tell the pie chart which format to use via its Extract Order property. The two extract orders are By Column or By Row. The following table shows the two styles for the data that created the pie chart in the screenshot.
By Column​
| Label | Value |
|---|---|
| Grapefruit | 7 |
| Apples | 15 |
| Bananas | 56 |
| Kiwis | 19 |
By Row​
| Grapefruit | Apples | Bananas | Kiwis |
|---|---|---|---|
| 7 | 15 | 56 | 19 |
Labels​
In addition to the color-coded legend, the pie chart can annotate each wedge with a label. The format of the label is controlled via the Label Format property.
For example, the format string used in the screenshot is " {0} = {2} ({3}) " This is a pattern string that uses the following placeholders:
- {0} - the item label
- {1} - the item value
- {2} - the item percentage
You can bring up a context menu for this component when right-clicking on it either in the Designer's Preview Mode or in a Vision Client. See the Charting - Right Click Menu page for more details.
Properties​
| Name | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| 3D Depth Factor | The depth of a 3D pie as a factor of the chart height. | double | .depthFactor | Appearance |
| Border | The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border. Note: The border is unaffected by rotation. Changed in 8.1.21 As of 8.1.21, the "Button Border" and "Other Border" options are removed. | Border | .border | Common |
| Chart Title | An optional title that will appear at the top of the chart. | String | .title | Appearance |
| Cursor | The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. | int | .cursorCode | Common |
| Data | The data driving the chart. | Dataset | .data | Data |
| Enforce Circularity? | If true, the pie cannot be an oval, even if the overall chart is. | boolean | .circular | Appearance |
| Extract Order | Controls whether or not a pie plot views columns as pies, or rows. | int | .extractOrder | Data |
| Foreground Transparency | The transparency of the pie (useful for 3D pies). Valid values are between 0 (0% opacity) and 1 (100% opacity). | double | .foregroundAlpha | Appearance |
| Label Font | The font for labels items, if there are labels. | Font | .labelFont | Appearance |
| Label Format | Formatting String. '{0}' is the wedge name, '{1}' is the value, '{2}' is the percent. | String | .labelFormat | Appearance |
| Labels? | Should labels be displayed near sections? | boolean | .labels | Appearance |
| Legend Font | The font for legend items, if there is a legend. | Font | .legendFont | Appearance |
| Legend? | Should there be an item legend below the chart? | boolean | .legend | Appearance |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Outline Colors | The colors to use for the pie wedge outlines. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | Color[] | .outlineColors | Appearance |
| Outline Visible | Whether to display an outline around the pie chart. | boolean | .outlineVisible | Appearance |
| Outline Stroke | The width for the section outline stroke. | float | .outlineStroke | Appearance |
| Plot Background | The background color for all plots, unless they override it. See Color Selector. | Color | .plotBackground | Appearance |
| Plot Insets | The padding to use around the actual plot rendering area. | int | .plotInsets | Appearance |
| Quality | The data quality code for any Tag bindings on this component. | QualityCode | .quality | Data |
| Rotation | Draw the wedges clockwise or counter-clockwise from the starting angle? | int | .rotation | Appearance |
| Section Colors | The colors to use for the pie wedge fills. See Color Selector. | Color[] | .sectionColors | Appearance |
| Selected Wedge | The currently selected wedge. (Read only. Usable in bindings and scripting.) | String | .selectedData | Uncategorized |
| Selection Enabled? | If true, the user will be able to select wedges on the chart. The selected wedge will be highlighted, and the "selectedData" property will reflect it. | boolean | .selectionEnabled | Behavior |
| Selection Highlight Color | The color of the selection highlight. See Color Selector. | Color | .selectionHighlightColor | Appearance |
| Selection Highlight Width | The line width of the selection highlight. | float | .selectionHighlightWidth | Appearance |
| Starting Angle | The start angle to draw the pie wedges. | int | .startAngle | Appearance |
| Style | Style of pie chart, standard, 3D, or ring. | int | .style | Appearance |
| Title Font | The font for the chart's title. | Font | .titleFont | Appearance |
| Tooltip Format | Formatting String. '{0}' is the wedge name, '{1}' is the value, '{2}' is the percent. | String | .tooltipFormat | Appearance |
| Tooltips? | Should tooltips be displayed when the mouse hovers over sections? | boolean | .tooltips | Behavior |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Scripting​
See the Vision - Pie Chart Scripting Functions page page for the full list of scripting functions available for this component.
Event Handlers​
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page
Customizers​
Examples​
#The following code will print named and value of the selected wedge to the console.
#Alternatively, this can be used to write to a custom property of a table that is used to create the 'Where' clause of a SQL query that populates a table.
selectedWedge = event.source.selectedData
print selectedWedge