Function: a!columnChartField()
Displays numerical data as vertical bars. Use a column chart to graphically display data that changes over time. If trend is more important than specific values, consider using a line chart.
See also: Line Chart, Bar Chart, Pie Chart, Chart Series, UX Charts 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. |
Categories |
|
List of Text String |
Text to display on the x-axis next to each column. |
Series |
|
List of ColumnChartSeries |
Array of data series created with a!chartSeries(). |
X-Axis Title |
|
Text |
Title for the independent (horizontal) axis. |
Y-Axis Title |
|
Text |
Title for the dependent (vertical) axis. |
Min Y-Axis |
|
Number (Decimal) |
Determines the minimum displayed point on the vertical axis. |
Max Y-Axis |
|
Number (Decimal) |
Determines the maximum displayed point on the vertical axis. |
Stacking |
|
Text |
Determines if series values display as separate columns or stacked within one column. Valid values: |
Reference Lines |
|
List of Variant |
Array of reference line values for each threshold to be defined on the chart. Configured using a!chartReferenceLine(). |
Show legend |
|
Boolean |
Determines if a color legend displays below the chart. Default: true. |
Show data labels |
|
Boolean |
Determines if data values are displayed on each column. Default: false. |
Show tooltips |
|
Boolean |
Determines if a tooltip displays the data value for a column. Default: true. |
Allow decimal axis labels |
|
Boolean |
Allows dependent (vertical) values to display as decimal numbers instead of integers. 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: |
Height |
|
Text |
Determines the chart height. Valid values: |
X-Axis Style |
|
Text |
Determines how to display the labels and axis separators for the X-Axis. Valid values: |
Y-Axis Style |
|
Text |
Determines how to display the labels, axis separators, and grid lines for the Y-Axis. Valid values: |
[Category #]
displays on the x-axis with #
as the index number in the Categories array of the null or empty item. For example, [Category 1]
.a!chartSeries()
to create the chart series array.NONE
or null produces a set of bars for each Categories item - one bar for each Series item with each bar in that set a different color. The order of the label items determine the display order of the columns in each set with the first label item appearing at the top of the set.NORMAL
produces a single bar for each categories item with each Series item displayed as a different segment of the bar in a different color, so they appear stacked on top of each other. The order of the series.label items determine the display order of the bar segments with the first series.label item appearing furthest from the axis.true
, so user's know what each color represents. When you only have one Series item, you can use the Label or Instructions fields to tell users what the data represents.[Series #]
with #
as the index number of the data value. For example, [Series 1]
.true
."TALL"
, "MEDIUM"
or "SHORT"
will show a scroll bar if too many categories are provided. "MICRO"
charts will only show scroll bars on mobile devices; on a web browser, these charts will adjust to fit the size of the column.Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Single Series Column Chart with Label, Y-Axis Title, and Tooltips
1
2
3
4
5
6
7
8
9
10
a!columnChartField(
label: "Most Tasks",
categories: {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"},
series: {
a!chartSeries(label: "Tasks", data: {34, 30, 30, 27, 24, 19, 18, 16})
},
yAxisTitle: "Tasks",
showLegend: false,
showTooltips: true
)
Displays the following:
Multiple Series Column Chart with Label, X-Axis Title, Y-Axis Title, and Legend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a!columnChartField(
label: "2012 Tempo Usage Trends",
categories: {"Qt 1", "Qt 2", "Qt 3", "Qt 4"},
series: {
a!chartSeries(label: "IT", data: {92, 94, 93, 95}),
a!chartSeries(label: "Human Services", data: {84, 83, 85, 86}),
a!chartSeries(label: "Sales", data: {70, 63, 90, 72}),
a!chartSeries(label: "Marketing", data: {90, 70, 90, 90})
},
colorScheme: "SUNSET",
xAxisTitle: "Quarter",
yAxisTitle: "% Active",
showLegend: true
)
Displays the following:
Multiple Series Column Chart with Label, X-Axis Title, Stacking, Legend, and Data Labels
1
2
3
4
5
6
7
8
9
10
11
12
13
a!columnChartField(
label: "Defect Tickets",
categories: {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"},
series: {
a!chartSeries(label: "Internal", data: {3, 1, 2, 2, 2, 1, 0, 1, 0, 1, 0, 1}),
a!chartSeries(label: "Customer", data: {4, 3, 3, 2, 4, 2, 1, 2, 0, 0, 1, 2})
},
colorScheme: "MOSS",
yAxisTitle: "Number of Tickets Logged",
stacking: "NORMAL",
showLegend: true,
showDataLabels: true
)
Displays the following:
Column charts with more than 10 points of data in a series can cause performance issues on the Appian Android application.
See also: a!queryRecordType(), Tempo Report Best Practices
The following patterns include usage of the Column Chart Component.
Aggregate Data from a Data Store Entity by Multiple Fields and Display in a Chart (Reports, Charts, Query Data): Aggregate data from a data store entity by multiple fields, specifically the total number of employees for each title in each department, to display in a stacked column chart.
Configure a Chart to Grid Toggle (Charts, Grids): Display a column chart with a toggle to display an alternate grid view of the data.
Drilldown Report Pattern (Grids, Charts, Reports): The drilldown report pattern consists of a bar chart and column chart, which each drill down into a grid.
Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.