Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
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.
This scenario demonstrates:
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
)
}
)
}
)
Engineering
. Notice that the data set and reference lines in the line chart change.