Line Chart Component

Line Chart

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
  • "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 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

  • 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 line with line points for each Categories item. Multiple Series items produce multiple lines with one line for each series label item displayed in a distinct color and line points for each Categories item with a different data marker shape (for example, square, circle, diamond) for each line.
  • If a series data value is greater than the Y-Axis Max value or less than the Y-Axis Min value, the line continues off the chart, but the line point does not display.
  • 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 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 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:

Open in Github

On This Page

FEEDBACK