Use a Filter to Adjust Chart Reference Lines

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

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

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