Pie Chart

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, queryrecord(), Tempo Report Best Practices, Chart Color Schemes

Parameters

Series

• The labels and data arguments in the Series are shown in the data labels and tooltips (if enabled).
• If a Series has a non-null label value paired with a 0, null, or empty data value, the data value is treated as 0 and is still displayed if Show data labels is set to true. For example, Americas: 0.
• If a Series argument has a null or empty label paired with a non-null data value, the label is displayed as [Series #] with # as the label's index number in the Series if Show data labels is set to true. For example, [Series 1]: 0.
• If a Series argument has both a null or empty label paired with a 0, null, or empty data value, the above behaviors are combined and the following is displayed if Show data labels is set to true: [Series 1]: 0.

Notes

• If a data value is negative, the data label shows it as negative (for example -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.
• Since pie chart values do not have an x-axis for reference, Appian recommends setting Show data labels as true.
• When values are shown as percentages, they are rounded to one decimal place. If values in the second decimal place are 5 or higher, the first decimal number is rounded up.

Examples

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:

Related Patterns

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 (Grids, Filtering): Filter the data in a read-only grid using a dropdown. When the user selects a value to filter by, update the grid to show the result.

• 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.