Function: a!chartSeries()
Defines a series of data for a bar, column, line, or pie chart.
See also: Bar Chart, Column Chart, Line Chart, Pie Chart, UX Charts Best Practices
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Name that corresponds to the data value or data values to display in the legend. |
Data |
|
Decimal Array |
Value displayed for the related series.label. |
Links |
|
Array of Links |
Array of values that determine what occurs when a user clicks a data point in the chart. Create links with a!authorizationLink(), a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), and a!safeLink(). |
Color |
|
Text |
Overrides the auto-assignment of series color with a specific value. Valid values: Any valid hex color or |
Visibility |
|
Boolean |
Determines whether the series is displayed on the interface. When set to false, the series is hidden and is not evaluated. Default: true. |
Chart series color
The color of chart series can be defined by an overall chart color scheme or it can be configured individually. If a user has selected or created a color scheme, they can swap out the color of any individual series.
Users can choose between the assigned color scheme color, the environment’s accent color, a color such as "SKYBLUE"
or "BLUEGRAY"
, or a custom color defined by a hex code. Any series configurations will take precedence over the assigned color scheme colors.
a!chartseries() is always used within a chart component. Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Single series bar chart with label, Y-axis title, and no legend
1
2
3
4
5
6
7
8
9
10
a!barChartField(
categories: {"Baseball", "Hockey", "Soccer"},
series: {
a!chartSeries(label: "Points", data: {8.3, 3.02, 2.71})
},
colorScheme: "CLASSIC",
yAxisTitle: "Average Point per Professional Game",
showLegend: false,
showDataLabels: true
)
Displays the following:
Multiple series line 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
15
16
17
18
19
20
21
22
a!lineChartField(
label: "Tempo Usage Trends",
categories: {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"},
series: {
a!chartSeries(label: "IT", data: {92, 94, 93, 95, 96, 99, 98, 100, 99, 91, 98, 99}),
a!chartSeries(label: "Human Services", data: {84, 83, 85, 86, 87, 89, 91, 90, 89, 83, 93, 95}),
a!chartSeries(label: "Sales", data: {70, 63, 90, 72, 74, 74, 76, 89, 72, 65, 100, 85}),
a!chartSeries(label: "Marketing", data: {80, 80, 80, 90, 90, 90, 90, 90, 90, 70, 90, 90})
},
colorScheme: a!colorSchemeCustom(
colors: {
"#c27ba0",
"#93c47d",
"#8e7cc3",
"#ffd966",
}
),
xAxisTitle: "Month",
yAxisTitle: "% Active",
yAxisMax: 100,
showLegend: true
)
Displays the following:
The following patterns include usage of the Chart Series 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.
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.
Aggregate Data from a Data Store Entity using a Filter and Display in a Chart (Reports, Charts, Query Data, Filtering): Aggregate data from a data store entity, specifically the total number of employees for each title in the Engineering department, to display in a bar 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.
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.
Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.
Use a Filter to Adjust Chart Reference Lines (Filtering, Charts): Using a dropdown, filter the results of a data set while also adjusting a chart reference line.
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.