Co-post with QlikShow: a Qlik Sense Grid Chart extension

I recently collaborated with Patrick Tehubijuluw of the QlikShow blog on a Qlik Sense application. If you haven't been to Patrick's blog before, you are really missing out. QlikShow showcases some of Patrick's excellent examples of UI/UX and data visualization design in QlikView. Patrick also includes tools to help with your own dashboard designs, which I have found very helpful.

The goal of our collaboration was to redesign a QlikView 11 dashboard of Patrick's for Qlik Sense. While he focused on the challenge of redesigning the dashboard to fit into the Sense framework, I reproduced a chart from QlikView 11 that is not available in Qlik Sense: the grid chart.


Patrick's post on designing the dashboard in Qlik Sense can be found here.

The Grid Chart extension, as well as instructions on how to use it, can be found downloaded from GitHub.

UX Improvement: Selections

I want to highlight one portion of the grid chart extension that I believe is an improvement from the QlikView 11 version: the selections. In the original grid chart, selections can be made in two ways:

  1. selecting a value on one axis to select a specific dimension value in a single dimension axis selection
  2. selecting a single bubble to select a specific dimension value in both dimensionsnode selection

However, there is only one way to deselect values in the original grid chart: selecting an already selected value on the axis. This is due to the selection toggle mode. In QlikView and Qlik Sense, there are two possible selection toggle modes:

  • On: when the toggle is on, selecting a value that is already selected in a field removes that selection
  • Off: when the toggle is off, selecting a value that is already selected in a field does nothing

Based on these two options, we can see that the original grid chart has the toggle mode on for the axes selections, but off for the bubble selections. This setup exists to avoid a confusing user experience that can result from having toggle mode enabled on both selections. I will illustrate with a sequence of hypothetical selections.

Let's assume toggle mode is on for both the axes and the bubbles. The beginning bubble chart state, with no selections:

starting chart

We want to filter the chart by the Dim1 value of B. We click on "B". Because toggle mode is enabled, and no selections have currently been made, the chart correctly filters to "B".

B selected

Next, we want to filter by Y, now that we have selected B. There are two options for making this selection: click Y on the Dim2 axis, or click on the giant Y bubble. Let's click on the giant Y bubble we want, since that is the most natural selection for the user. Because toggle mode is ON for the bubble in this hypothetical scenario, it will have a weird result. It will correctly select "Y" in the Dim2 axis because there are no selections there currently. However, we already have a selection of "B" in Dim1. QlikView will make another selection on "B" in Dim1, and because toggle mode is ON, this selection will actually remove the existing "B" selection. This gives us an odd result based on the user's behavior of selecting the green bubble above.

Y selected

This result does not make sense based on the intention of the user when clicking a bubble. QlikView 11 solves this problem by turning toggle mode to OFF for the bubbles in the grid chart. This allows the user to always select a single bubble when clicking on it and avoids the scenario above. However, the tradeoff is that selections cannot be removed by clicking the bubbles.

The Qlik Sense Grid Chart improves upon this by incorporating the ability to click on a selected bubble to remove the selection in both dimensions. This functionality results from custom logic used to check the state of selections before determining which action to take whenever a user clicks on a bubble. The end result is a more intuitive and natural selection function for the users.

In a future post, I will provide a tutorial on incorporating selections into Qlik Sense extensions.


TAGS: Qlik Sense, QlikView, Visualization

Related News

April 2018.

Read More


Axis Group was approached by a client asking for help...

Read More