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 Type Description
Label label Text Optional text to display at the top of the chart.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "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.
Instructions instructions Text Optional text displayed below the field's label.
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".
Categories categories Text Array Text to display on the x-axis below each column or set of columns.
Series series Chart Series Array Array of chart series to display in the chart. Configured using a!chartSeries().
X-Axis Title xAxisTitle Text Optional value to use as a title for the horizontal axis.
Y-Axis Title yAxisTitle Text Optional value to use as a title for the vertical axis.
Stacking stacking Text Determines if multiple series values display as a set of separate columns or stacked within the same column, where "NONE" or a null entry displays them as separate and "NORMAL" displays them as stacked.
Reference Lines referenceLines Chart Reference Line Array 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 legend displays below the chart associating each series.label value with its color in the chart. Default is true.
Show data labels showDataLabels Boolean Determines if the series.data values are displayed on each column or column segment. Default is false.
Show tooltips showTooltips Boolean Determines if a tooltip displays the series.data value for a column or column segment when a user hovers over it. Default is true.
Allow decimal axis labels allowDecimalAxisLabels Boolean Allows y-axis values to display as decimal numbers, rather than integers. Default is false.
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, Aggregate Data from a Data Store Entity and Display in a Chart

FEEDBACK