Dynamic chart using line item subset

anikdas
anikdas
edited January 2023 in Best Practices

Problem statement

A customer from the banking industry recently posed this requirement: "As a reviewer, I want to compare different metrics. Some are absolute, and some are percentages. There are 12 metrics that I want to compare against each other on a chart, and I should be able to select which metrics are shown on the chart."

Solution approaches

Selection on the chart

The simplest approach to cater to this kind of requirement is well known. Create a chart in the UX with the metrics: absolute metrics on one axis, and percentage metrics on the other axis. Once published, users can pick and choose the metrics that they want to showcase on the chart.

If we have 12 metrics, the chart would look like this (absolute metrics as column charts on the left axis, percentage metrics as line charts on the right axis):

anikdas_0-1670285123806.png

However, there are usability challenges for this approach:

  • The chart looks busy with too many data points on the landing page.
  • Users can select different metrics and go to the right comparison using selections on the chart. However, the selections are not honored if the user goes back to a different page and comes back to this page (their selections are not maintained on the chart).

Using line item subsets

It would be better to provide a solution to help alleviate the usability changes. In order to do the same, we can take the following approach:

  • Instead of selection on the chart, provide selection of metrics in a grid form
  • The input can be by user dimension (recommended)
  • Based on the inputs, apply filters on the combination chart

Here is how we can achieve this:

Step 1:

Create a line item subset (e.g., margin $ & %) to capture the different metrics.

anikdas_1-1670285123812.png

Step 2

Create a module for user selection of metrics by dimension – users, the line item subset that was created (e.g., margin $ & %), and one Boolean line item.

anikdas_2-1670285123816.png

Step 3

Create a combination chart the same way it was created in the previous approach, with absolutes as column chart on left axis and percentages as line chart on right axis. Publish the chart on the UX page.

Note: You can choose what chart type you want to use.

Step 4

Go into edit mode for the UX page.

  • On the existing chart card:
    • Edit the view
    • Add a filter on the row with a filter coming from the input selection module that was created

anikdas_3-1670285123820.png

  • Apply and update the chart card view
  • Add a grid to the UX page to show the selection of metrics by users

anikdas_4-1670285123826.png

That’s it! You have successfully created a dynamic chart using a line item subset. Different users can select different metrics and an individual user’s selection is honored as they come back to the page.

Here is a dynamic chart in action:

Conclusion

For a lesser number of metrics comparisons (or items) to show on a chart, the first approach works very well. The method of using a line item subset works best when there are higher number of metrics to compare or higher number of items to be shown on the chart. Choose the right approach for your situation!

 

Feel free to post any questions, comments, or additional suggestions below!

Tagged:

Categories