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, UX Charts Best Practices, Chart Color Schemes

Parameters

Configuration

There are two ways to configure a column chart:

1. Set a record type as the data source and define fields to display on the chart.
2. Perform your own query and define lists of data within the categories and series.

The chart allows using an entity-backed or synced record type as the source. If you have one of these record types available as a source, we recommend using the record type as the source. This configuration is easier because Appian will perform the query for you and display the results in the bar chart directly. If you have complex requirements or your data source is not a entity-backed or synced record type, use the categories and series to construct the chart manually.

Using Record Data

Configuring a column chart using a record type as the source requires using two parameters: data and config. Once you provide a source record type in the data parameter and provide the fields in the config parameter, the chart displays the results.

See Chart Configuration Using Record Data for details on using a record type as the source.

Using Categories and Series

When using categories and series, you must provide the list of data labels and values directly to these parameters. See the notes below for guidance.

Categories

• 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 query result, and then use a!chartSeries() to create the chart series array.

Series

• A single Series item produces a bar for each Categories item with all bars the same color. The data parameter should contain a list of values that match the size of the list for categories.
• 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 furthest from the axis.
• Multiple Series items when Stacking is PERCENT_TO_TOTAL also shows a single bar for each category, but bars have a total height of 100%. Each value shows the percent contribution to the total within each category.
• 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.

Additional Notes

• Column charts with a height of "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.
• If data contains a!recordData or a record type reference, the categories and series parameters are ignored.
• The Percent to Total stacking will also update the axes and tooltips to show with a percentage. Also, the minimum and maximum y-axes values refer to percentages. For example, yAxisMax: 50 would set the maximum y-axis at 50%.
• When the chart is placed in a colored card, the chart background will match the color of the card. Text labels and lines in the chart will also adjust if a dark background color is used. See the UX Design Guide for best practices on using charts with background colors.

Examples

The examples below demonstrate how to configure your charts using categories and series. For examples on using record data, please see Chart Configuration Using Record Data. 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:

See also: a!queryRecordType(), Tempo Report Best Practices

Related Patterns

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 Drilldown to a Grid (Charts, Grids, Query Data): Displays a column chart with aggregate data from a record type and conditionally shows a grid with filtered records when a user selects a column on the 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.