Use a Filter to Adjust Chart Reference Lines

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Using a dropdown, filter the results of a data set while also adjusting a chart reference line.

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

images:SAIL_Recipe_Chart_Ref_Line.png

This scenario demonstrates:

  • How to conditionally adjust the value of a chart reference line to account for differing limits on a set of data.
  • How to configure multiple chart reference lines on a single chart.

Expression

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
a!localVariables(
  local!selectedDepartment: "Engineering",
  local!data: {
    {department: "Engineering", quarter: "2015-Q1", spent: 15804},
    {department: "Engineering", quarter: "2015-Q2", spent: 13432},
    {department: "Engineering", quarter: "2015-Q3", spent: 23400},
    {department: "Engineering", quarter: "2015-Q4", spent: 15900},
    {department: "Engineering", quarter: "2016-Q1", spent: 12004},
    {department: "Engineering", quarter: "2016-Q2", spent: 13901},
    {department: "Engineering", quarter: "2016-Q3", spent: 14142},
    {department: "Engineering", quarter: "2016-Q4", spent: 17980},
    {department: "Engineering", quarter: "2017-Q1", spent: 13822},
    {department: "Engineering", quarter: "2017-Q2", spent: 11053},
    {department: "Engineering", quarter: "2017-Q3", spent: 16607},
    {department: "Engineering", quarter: "2017-Q4", spent: 15449},
    {department: "Professional Services", quarter: "2015-Q1", spent: 18883},
    {department: "Professional Services", quarter: "2015-Q2", spent: 22904},
    {department: "Professional Services", quarter: "2015-Q3", spent: 19192},
    {department: "Professional Services", quarter: "2015-Q4", spent: 20043},
    {department: "Professional Services", quarter: "2016-Q1", spent: 17790},
    {department: "Professional Services", quarter: "2016-Q2", spent: 24405},
    {department: "Professional Services", quarter: "2016-Q3", spent: 21031},
    {department: "Professional Services", quarter: "2016-Q4", spent: 25787},
    {department: "Professional Services", quarter: "2017-Q1", spent: 17401},
    {department: "Professional Services", quarter: "2017-Q2", spent: 19903},
    {department: "Professional Services", quarter: "2017-Q3", spent: 18400},
    {department: "Professional Services", quarter: "2017-Q4", spent: 20801},
    {department: "Sales", quarter: "2015-Q1", spent: 29990},
    {department: "Sales", quarter: "2015-Q2", spent: 32063},
    {department: "Sales", quarter: "2015-Q3", spent: 24504},
    {department: "Sales", quarter: "2015-Q4", spent: 24994},
    {department: "Sales", quarter: "2016-Q1", spent: 26803},
    {department: "Sales", quarter: "2016-Q2", spent: 37400},
    {department: "Sales", quarter: "2016-Q3", spent: 27880},
    {department: "Sales", quarter: "2016-Q4", spent: 22904},
    {department: "Sales", quarter: "2017-Q1", spent: 32701},
    {department: "Sales", quarter: "2017-Q2", spent: 27032},
    {department: "Sales", quarter: "2017-Q3", spent: 28443},
    {department: "Sales", quarter: "2017-Q4", spent: 23940}
  },
  local!selectedData: index(
    local!data,
    wherecontains(local!selectedDepartment, touniformstring(local!data.department)),
    null /* Return nothing if the selected department isn't in the list */
  ), 
  {
    a!sectionLayout(
      contents: {
        a!dropdownField(
          label: "Department",
          choiceLabels: {"Engineering", "Professional Services", "Sales"},
          choiceValues: {"Engineering", "Professional Services", "Sales"},
          value: local!selectedDepartment,
          saveInto: local!selectedDepartment
        ),
        a!lineChartField(
          label: "Money Spent per Quarter",
          categories: local!data.quarter,
          series: a!chartSeries(data: local!selectedData.spent),
          xAxisTitle: "Quarter",
          yAxisTitle: "Amount Spent (in $)",
          referenceLines: {
            a!chartReferenceLine(
              label: "100% Budget",
              value: if(
                local!selectedDepartment = "Engineering",
                18000,
                if(
                  local!selectedDepartment = "Professional Services",
                  21000,
                  30000
                )
              ),
              color: "ORANGE"
            ),
            a!chartReferenceLine(
              label: "125% Budget",
              value: if(
                local!selectedDepartment = "Engineering",
                22500,
                if(
                  local!selectedDepartment = "Professional Services",
                  26250,
                  37500
                )
              ),
              color: "RED",
              style: "DASHDOT"
            )
          },
          showLegend: false
        )
      }
    )
  }
)

Test it out

  1. Use the Department dropdown to select a value other than Engineering. Notice that the data set and reference lines in the line chart change.

Notable implementation details

  • This example uses a hard-coded data set. To retrieve via a data store entity, use a!queryEntity(). The dropdown would then populate the value passed into the query filter or logical expression.
  • The chart reference values are hard-coded. Typically, these limits would be stored in a custom rule, constant, or lookup table.
Open in Github Built: Fri, Jun 03, 2022 (01:08:29 PM)
FEEDBACK