Configure a Chart Drilldown to a Grid

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

Display a pie chart with aggregate data from a data store entity that the user can interact with to display related chart data.

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 recipe uses example data and objects created through the Use the Write to Data Store Entity Smart Service Function on an Interface recipe. Make sure that recipes has been built first in order to see data in this recipe.

Then add links to the chart slices so that when a user clicks on a department, the chart is replaced by a grid that displays all employees for that department with a link to return to the chart.

This scenario demonstrates:

  • How to add links to each slice of the pie chart.
  • How to display a grid when the user clicks on a slice of the pie 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,
  /* This query fetches the grouped data for the pie chart. */
  local!chartDatasubset: a!queryEntity(
    entity: cons!EMPLOYEE_ENTITY,
    query: a!query(
      aggregation: a!queryAggregation(
        aggregationColumns: {
          a!queryAggregationColumn(
            field: "department",
            isGrouping: true
          ),
          a!queryAggregationColumn(
            field: "id",
            alias: "id_count",
            aggregationFunction: "COUNT"
          )
        }
      ),
      pagingInfo: a!pagingInfo(
        startIndex: 1,
        batchSize: -1,
        sort: a!sortInfo(
          field: "department",
          ascending: true
        )
      )
    )
  ),
  {
    a!pieChartField(
      series: a!forEach(
        items: local!chartDatasubset.data,
        expression: a!chartSeries(
          label: fv!item.department,
          data: fv!item.id_count,
          /* Clicking on the chart sets the filter value for the grid. */
          links: a!dynamicLink(value: fv!item.department, saveInto: local!selectedDepartment)
        )
      ),
      showWhen: isnull(local!selectedDepartment)
    ),
    /* This simple link field resets the selected department. */
    a!linkField(
      labelPosition: "COLLAPSED",
      links: a!dynamicLink(
        label: "Back to Chart",
        value: null,
        saveInto: local!selectedDepartment,
        showWhen:not(isnull(local!selectedDepartment))
      )
    ),
    a!gridField(
      /* Using the value of selected department, we can easily give
         the grid a dynamic title. */
      label: local!selectedDepartment & " Employees",
      labelPosition: "ABOVE",
      data: a!queryEntity(
        entity: cons!EMPLOYEE_ENTITY,
        query: a!query(
          logicalexpression: a!queryLogicalExpression(
            operator: "AND",
            filters: {
              a!queryFilter(
                field: "department",
                operator: "=",
                value: local!selectedDepartment
              )
            },
            ignoreFiltersWithEmptyValues: true
          ),
          pagingInfo: fv!pagingInfo
        ),
        fetchTotalCount: true
      ),
      columns: {
        a!gridColumn(
          label: "First Name",
          sortField: "firstName",
          value: fv!row.firstName
        ),
        a!gridColumn(
          label: "Last Name",
          sortField: "lastName",
          value: fv!row.lastName
        ),
        a!gridColumn(
          label: "Title",
          sortField: "title",
          value: fv!row.title
        )
      },
      showWhen: not(isnull(local!selectedDepartment))
    )
  }
)

Test it out

  1. Click a slice of the chart. The chart will be replaced with a grid that displays all employees for that department.
  2. Click the "Back to Chart" link. The grid will be replaced with the original chart.

Notable implementation details

  • For this example, the value of the department field is the department name, so it can be used both for display and as the value of the filter. If using a lookup instead, you would need to use the name as a display but save the id instead.
FEEDBACK