Function: a!lineChartField()
Displays a series of numerical data as points connected by lines. Use a line chart to visualize trends of data that changes over time. If specific values are more important than the trend, consider using a column chart.
See also: Column 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
|
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 data point. |
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. |
Min Y-Axis Label | yAxisMin | Decimal | Optional value that determines the minimum length of the horizontal axis regardless of series.data values. |
Max Y-Axis Label | yAxisMax | Decimal | Optional value that determines the maximum length of the horizontal axis regardless of series.data values, otherwise the length is determined by the largest data point. |
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 next to each line point. Default is false . |
Show Tooltips | showTooltips | Boolean | Determines if a tooltip displays the series.data value for a line point when a user hovers below 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. |
Connect Null Data Points | connectNulls | Boolean | Determines whether to connect a graph line across null points, or render a gap between the two points on either side of the null. Default: false. |
Notes
[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]
.queryrecord()
function result, and then use a!chartSeries()
to create the Chart Series array.[Series #]
with #
as the index number of the data value. For example, [Series 1]
.true
.Examples
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Single Series Line Chart with Label and Instructions
1
2
3
4
5
6
7
8
=a!lineChartField(
label: "Annual Conference Registrants",
instructions: "The number of registrations received for the annual conference each month.",
categories: {"Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb"},
series: {
a!chartSeries(label: "Sales", data: {72, 91, 93, 95, 92, 99, 98, 99, 79, 83, 90, 99})
}
)
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
=a!lineChartField(
label: "Tempo Usage Trends",
categories: {"Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb"},
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})
},
xAxisTitle: "Month",
yAxisTitle: "% Active",
yAxisMax: 100,
showLegend: true
)
Displays the following:
Multiple Series Line Chart with Tooltips and a Null Data Point
1
2
3
4
5
6
7
8
9
10
=a!lineChartField(
categories: {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
series: {
a!chartSeries(label: "High", data: {76, 82, null, 92, 87, 79, 80}),
a!chartSeries(label: "Low", data: {64, 70, 82, 81, 75, 67, null})
},
xAxisTitle: "Day",
yAxisTitle: "Temperature (F)",
showLegend: true
)
Displays the following:
See also: queryrecord(), Tempo Report Best Practices, Aggregate Data from a Data Store Entity and Display in a Chart
Connect Null Data Points in a Line Chart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
load(
local!agent: {
"Hi! Thanks for calling today! How may I help you?",
null,
"I can help! First, please verify your data of birth.",
null,
"Ok, thank you. Now I'll look up your order.",
null,
"Thanks for your patience.I've found it.",
null,
"Oh no! Which item is it?",
null,
"I'm sorry about that. We'll send you another one free of charge.",
null,
"Is there anything else I can help with?",
null
},
local!customer: {
null,
"I have a problem with my order",
null,
"My birth date is January 1st, 1970.",
null,
"This is so slow. What's the problem?",
null,
"An item is damaged. I'm so annoyed.",
null,
"The prongs are bent on the charging cable. It's useless.",
null,
"OK. Thank you for fixing it.",
null,
"That's it. Thanks for your help."
},
{
a!lineChartField(
label: "Conversation Sentiment Analysis",
labelPosition: "ABOVE",
categories: a!forEach(
items: local!agent,
expression: if(
isNull(
fv!item
),
local!customer[fv!index],
fv!item
)
),
series: {
a!chartSeries(
label: "Agent",
data: a!forEach(
items: local!agent,
expression: if(
isNull(
fv!item
),
null,
a!sentimentScore(
{
fv!item
}
)
)
),
color: "#FFC300"
),
a!chartSeries(
label: "Customer",
data: a!forEach(
items: local!customer,
expression: if(
isNull(
fv!item
),
null,
a!sentimentScore(
{
fv!item
}
)
)
),
color: "#800080"
)
},
referenceLines: {
a!chartReferenceLine(
label: "Positive",
value: 0.5,
color: "#008000"
),
a!chartReferenceLine(
label: "Negative",
value: - 0.5,
color: "#FF0000"
)
},
showLegend: true,
showTooltips: true,
connectNulls: true
)
}
)
Displays the following:
On This Page