Function: a!pieChartField()
Represents numerical data as slices of a single circle. Use a pie chart to graphically display parts of a whole.
See also: Column Chart, Bar Chart, Line Chart, Chart Series, UX Charts Best Practices, a!queryRecordType(), Tempo Report Best Practices, Chart Color Schemes
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Text to display as the field label. |
Instructions |
|
Text |
Supplemental text about this field. |
Series |
|
List of PieChartSeries |
Array of data series created with a!chartSeries(). |
Show data labels |
|
Boolean |
Determines if data values are displayed with each pie slice. Default: false. |
Show tooltips |
|
Boolean |
Determines if a tooltip displays the data value for a pie slice. Default: false. |
Show as percentage |
|
Boolean |
Determines if the data is shown as a percentage. Default: false. |
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
Help Tooltip |
|
Text |
Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Visibility |
|
Boolean |
Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true. |
Color scheme |
|
Any type |
Determines which color scheme to use in the chart. Use one of the following valid values: |
Style |
|
Text |
Determines if the chart displays as a full pie or as a donut. Valid values: |
Series Label Style |
|
Text |
Determines where to display the series labels. Valid values: |
Height |
|
Text |
Determines the chart height. Valid values: |
true
. For example, Americas: 0
.[Series #]
with #
as the label's index number in the Series if Show data labels is set to true
. For example, [Series 1]: 3
.true
: [Series 1]: 0
.LEGEND
and data labels are displayed, the data labels are shown in the legend in parentheses. For example, West Region (25%)
.LEGEND
or NONE
series label styles will ensure consistent sizing of the pie for any columns of the same width. When ON_CHART
is used for the series label style, the pie changes size based on the length of the series label.ON_CHART
style will usually use screen space more effectively than the LEGEND
. Since showing the legend guarantees the same size pies across columns of the same width, there may be extra whitespace if a short label is used in the legend.MEDIUM
width columns or narrower; in wider columns the legend will show adjacent to the chart. The legend always displays below the pie on phones.-20
), but it still displays as a pie slice. To avoid any confusion, negative values should only be used with bar, column, and line charts.true
.Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Pie Chart with Label, Instructions, and Data Labels
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a!pieChartField(
label: "New Hires by Department",
instructions: "The number of new employees hired by each department in 2019",
series: {
a!chartSeries(label: "Engineering", data: 12),
a!chartSeries(label: "Professional Services", data: 9),
a!chartSeries(label: "Sales", data: 8),
a!chartSeries(label: "Finance", data: 6),
a!chartSeries(label: "HR", data: 4)
},
colorScheme: "OCEAN",
showDataLabels: true,
showTooltips: true,
showAsPercentage: false
)
Displays the following:
Pie Chart with Label, Instructions, Data Labels, Tooltips, and Percentage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!pieChartField(
label: "Opportunity Sources",
instructions: "Leads are calculated based on the initial mode of contact",
series: {
a!chartSeries(label: "Existing Client", data: 12),
a!chartSeries(label: "Inbound Call", data: 6),
a!chartSeries(label: "Tradeshow", data: 8),
a!chartSeries(label: "Web Site", data: 6),
a!chartSeries(label: "Referral", data: 7)
},
colorScheme: "MIDNIGHT",
showDataLabels: true,
showTooltips: true,
showAsPercentage: true
)
Displays the following:
Donut Style Chart with Legend and Colors Assigned in Series
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a!pieChartField(
label: "Employee Credential Status",
labelPosition: "ABOVE",
series: {
a!chartSeries(label: "Active Credential", data: 1374, color: "BLUEGRAY"),
a!chartSeries(label: "Expires within 30 Days", data: 343, color: "AMBER"),
a!chartSeries(label: "Expired", data: 97, color: "RED")
},
height: "SHORT",
seriesLabelStyle: "LEGEND",
colorScheme: "CLASSIC",
style: "DONUT",
showDataLabels: true,
showAsPercentage: true
)
Displays the following:
The following patterns include usage of the Pie Chart Component.
Aggregate Data from a Data Store Entity and Conditionally Display in a Chart or Grid (Reports, Charts, Query Data, Grids): Aggregate data from a data store entity, specifically the total number of employees in each department, to display in a pie chart.
Aggregate Data from a Data Store Entity and Display in a Chart (Reports, Charts, Query Data): Aggregate data from a data store entity, specifically the total number of employees in a given department, to display in a pie chart.
Configure a Chart Drilldown to a Grid (Charts, Grids, Query Data): Display a pie chart with aggregate data from a data store entity that the user can interact with to display related grid data.
Filter the Data in a Grid Using a Chart (Charts, Grids, Filtering): Display an interactive pie chart with selectable sections so that a user may filter the results in a grid.
Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous action automatically.