Column Chart Component

Column Chart

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

Parameters

Name Keyword Types Description

Label

label

Text

Text to display as the field label.

Instructions

instructions

Text

Supplemental text about this field.

Categories

categories

List of Text String

Text to display on the x-axis next to each column.

Series

series

List of ColumnChartSeries

Array of data series created with a!chartSeries().

X-Axis Title

xAxisTitle

Text

Title for the independent (horizontal) axis.

Y-Axis Title

yAxisTitle

Text

Title for the dependent (vertical) axis.

Min Y-Axis

yAxisMin

Number (Decimal)

Determines the minimum displayed point on the vertical axis.

Max Y-Axis

yAxisMax

Number (Decimal)

Determines the maximum displayed point on the vertical axis.

Stacking

stacking

Text

Determines if series values display as separate columns or stacked within one column. Valid values: "NONE" (default), "NORMAL".

Reference Lines

referenceLines

List of Variant

Array of reference line values for each threshold to be defined on the chart. Configured using a!chartReferenceLine().

Show legend

showLegend

Boolean

Determines if a color legend displays below the chart. Default: true.

Show data labels

showDataLabels

Boolean

Determines if data values are displayed on each column. Default: false.

Show tooltips

showTooltips

Boolean

Determines if a tooltip displays the data value for a column. Default: true.

Allow decimal axis labels

allowDecimalAxisLabels

Boolean

Allows dependent (vertical) values to display as decimal numbers instead of integers. Default: false.

Label Position

labelPosition

Text

Determines where the label appears. Valid values:

  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.

Help Tooltip

helpTooltip

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 "COLLAPSED".

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Visibility

showWhen

Boolean

Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

Notes

  • The order of items in the Categories array determines the display order of categories on the chart with the left-most item in the array appearing on the far left of the x-axis.
  • For each null or empty item in the array passed to Categories, [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].
  • The index of each item in the Categories array must match with the index of its Series data value. You can retrieve a dictionary from the data field of a queryrecord() function result, and then use a!chartSeries() to create the Chart Series array.
  • A single Series item produces a single bar for each Categories item with all bars the same color.
  • Multiple Series items when Stacking is 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.
  • Multiple Series items when Stacking is 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 closest to the axis.
  • When you have multiple Series items, Appian recommends setting Show legend to 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.
  • If the Series argument has a non-null label value paired with a 0, null, or empty data value, the data value still displays in the legend.
  • If the Series argument has a null or empty label value paired with a non-null data value, the label value displays as [Series #] with # as the index number of the data value. For example, [Series 1].
  • If series.data values are small and less than a whole number, Appian recommends settings allowDecimalAxisLabels to true.

Examples

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", "Sep", "Oct", "Nov", "Dec"},
  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
=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})
  },
  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
=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})
  },
  yAxisTitle: "Number of Tickets Logged",
  stacking: "NORMAL",
  showLegend: true,
  showDataLabels: true
)

Displays the following:

See also: queryrecord(), Tempo Report Best Practices

The following patterns include usage of the Column Chart Component.

FEEDBACK