Use a Filter to Adjust Chart Reference Lines

Interface patterns give you an opportunity to explore different interface designs. To learn how to directly use patterns within your interfaces, see 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.

images:SAIL_Recipe_Chart_Ref_Line.png

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.

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
load(
  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}
  },
  with(
    local!selectedData: local!data[wherecontains(local!selectedDepartment, touniformstring(local!data.department))],
    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,
          xAxisTitle: "Quarter",
          yAxisTitle: "Amount Spent (in $)",
          series: a!chartSeries(data: local!selectedData.spent),
          showLegend: false,
          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"
            )
          }
        )
      }
    )
  )
)

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.
FEEDBACK