Configure a Chart to Grid Toggle

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 column chart with a toggle to display an alternate grid view of the 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.

Display a chart with the number of tickets reported each month internally and from customers. Then add a grid to display the same data. Finally, add a link so that a user may toggle between the chart and grid views of the data. This pattern is recommended to provide a visual data display while still making the data accessible to users who employ assistive technology.

This is the data displayed as a chart:

screenshot of a column chart with column for every month of the year

This is the data displayed as a grid:

screenshot of a read-only grid with a row for every month of the year with an associated number and type of tickets

This scenario demonstrates:

  • How to configure alternate displays of the same data.
  • How to modify the expression to display a grid when the user clicks on a link toggle.

Create this pattern

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
a!localVariables(
  local!ticketData:{
    a!map( month:"January",   internalTickets:32, customerTickets:41 ),
    a!map( month:"February",  internalTickets:16, customerTickets:38 ),
    a!map( month:"March",     internalTickets:21, customerTickets:37 ),
    a!map( month:"April",     internalTickets:31, customerTickets:20 ),
    a!map( month:"May",       internalTickets:33, customerTickets:47 ),
    a!map( month:"June",      internalTickets:9, customerTickets:22 ),
    a!map( month:"July",      internalTickets:2, customerTickets:16 ),
    a!map( month:"August",    internalTickets:11, customerTickets:29 ),
    a!map( month:"September", internalTickets:5, customerTickets:0 ),
    a!map( month:"October",   internalTickets:71, customerTickets:10 ),
    a!map( month:"November",  internalTickets:4, customerTickets:13 ),
    a!map( month:"December",  internalTickets:5, customerTickets:21 )
  },
  /* This variable is referenced in the showWhen parameters of both the grid and
     the chart. */
  local!showAsGrid: false,
  {
    a!linkField(
      links:{
        /* The not() function simply inverts a true or false value, making for a 
           simple toggle. */
        a!dynamicLink(
          label: "View data as a " & if(local!showAsGrid, "chart", "grid"),
          value: not(local!showAsGrid),
          saveInto: local!showAsGrid
        )
      }
    ),
    if(local!showAsGrid,
    a!gridField(
      label: "Logged Defect Tickets",
      data: local!ticketData,
      columns: {
        a!gridColumn(
          label: "Month",
          value: fv!row.month
        ),
        a!gridColumn(
          label: "Internal Tickets",
          value: fv!row.internalTickets,
          align: "END",
          width: "NARROW_PLUS"
        ),
        a!gridColumn(
          label: "Customer Tickets",
          value: fv!row.customerTickets,
          align: "END",
          width: "NARROW_PLUS"
        ),
        a!gridColumn(
          label: "Total Tickets",
          value: fv!row.internalTickets + fv!row.customerTickets,
          align:"END",
          width: "NARROW_PLUS"
        )
      },
      pageSize: 12
    ),
    a!columnChartField(
      label: "Logged Defect Tickets",
      categories: left(local!ticketData.month, 3),
      series: {
        a!chartSeries(label: "Internal", data: local!ticketData.internalTickets),
        a!chartSeries(label: "Customer", data: local!ticketData.customerTickets)
      },
      colorScheme: "PARACHUTE",
      yAxisTitle: "Number of Tickets",
      stacking: "NORMAL",
      showLegend: true
    )
    )
  }
)

Test it out

  1. Click the "View this data as a grid" link. The chart will be replaced with a grid that displays all defect tickets.
  2. Click the "View this data as a chart" link. The grid will be replaced with the original chart.

Notable implementation details

Open in Github Built: Tue, May 23, 2023 (06:12:33 PM)
FEEDBACK