Creating a comparison chart

For the next steps to come use the template sheet in the app with the name ‘TPL 2’!

When QlikView 11 was released it was shipped with what we call ‘Comparative Analysis’. Comparative Analysis lets you define alternate states to be able to compare subsets of data with each other. First we are going to setup the UI as seen in the example above.

To prepare our UI with some elements that support our benchmark visualization we need to:

1. Add the listboxes (left side of the screen, like the example) for our current selections
a. Our listbox for year is set with a green background with ~50% transparancy
b. The Industry listbox has a caption with the font color set to ‘cGreen ‘
c. The same is true for our PlantName listbox

The difference between the listboxes we are going to use for comparison versus the listboxes on the left on the screen is that they are going to hold a different (alternate) state. The settings we have to apply to the document to be able to work with these different states are:

2. Adding the comparison state to the document
a. Go to Document Properties > General > Alternate States…
b. Click ‘Add…’
c. Add a new group called “Group2″
d. Apply all settings and click ‘Ok’

We now have created a state to which we have to assign the listboxes that are going to be used for comparison.

3. Add the listboxes (right side of the screen, like the example) for our benchmark selections (Copy and paste the ones on the left)
a. Assign the Year listbox to the alternate state ‘Group 2′, as shown in the example image of this step
b. Assign the Industry listbox to the alternate state ‘Group 2′
c. Also assign the PlantName listbox to ‘Group2′

Our method for using this alternate state in chart objects is to use ‘Set Analysis’ to only calculate with selections made in the ‘Group2′ selections. An example expression to illustrate the use could be:

sum({Group2} SalesPrice*Quantity)

This expression will only calculate the ‘Revenue’ for the selections made in the listboxes we just created.

In the next steps we are going to design our data visulization for benchmarking.

1. right click on the canvas, choose: New Sheet Object > Chart > Line Chart
2. Click Next >

The dimension we are going to compare our selections upon is the ‘Product Group’ field. Add it and apply these settings.

We need two expressions. One for the actual results for our current selections and one to compare those results to:

1. Add the expression for comparison: (Label: CompareTo)

(sum({Group2}SalesPrice*Quantity)-sum({Group2}(CostPrice)*Quantity)
–sum({Group2}(SalesPrice*Quantity)*FixedCostFactor))
/sum({Group2}SalesPrice*Quantity)

Here the {Group2} addition to the sum function is used to calculate the results of the subset of data that is defined by our selections in the state ‘Group2′

2. Add the expression for the actual results: (Net Margin %)

(sum(SalesPrice*Quantity)-sum((CostPrice)*Quantity)
–sum((SalesPrice*Quantity)*FixedCostFactor))
/sum(SalesPrice*Quantity)

3. Size and position the object on the ‘Caption’ tab use the following settings:
a. X-pos: 211
b. Y-pos: 13
c. Width: 576
d. Height: 613

4. Apply all settings and click ‘Ok’

Our chart now looks like this:

This chart isn’t finished as it is shown here. We still have to apply some (information) design to it to make it work.

We want our users to get the best possible experience when it comes to analyzing data with visualizations we create for them. For our distribution chart we can do the following:

1. Remove the caption
2. Remove the borders
3. Set the font-size for the axes to 8 pts
4. Set the labels on the dimension axis to be presented vertically
5. Hide the legends
6. Remove the title of the object
7. Set the number formatting for both expressions to ‘Integer’ and to be presented as ‘Show in Percentage (%)’
8. Don’t present the lines in this chart, but instead set it to show a symbol, for this example use the ‘Dots’ setting
9. Set the symbol size to 6 pts
10. Remove the label for the dimension ‘Product Group’

Apply all these settings and click ‘Ok’.

We now should have a chart and UI that looks like this:

Now we are able to do comparisons based on our selections and alternate states for our chart. But still the information design has some areas of improvement:

1. The chart isn’t intuitive enough to see what is going on immediately
2. We don’t see overall scores or averages for our selections
3. It is not easy to see which dots belong to which product group

The difference from good to great isn’t measured thru the hours we spend or the effort we put into stuff. It’s about using the design principles that make users or our customers happy. It will make a huge difference if we design for the best possible experience every application we build!

To make our ‘good’ design ‘great’, we can do the following:

1. Adding design for more intuitiveness
a. Set the ‘Background Color’ for our ‘CompareTo’ expression to ‘cBlue‘. This helps the user to see which dots belang to which selection
b. Set the ‘Background Color’ for our ‘Net Margin %’ expression to ‘cGreen‘. This helps the user to see which dots belang to which selection
c. Add an indicator for the current selections to show if these selections have a higher score
– Add a text object with ▲ as text, set the font size to 110 pts and set the transparency of the object to 100%
– The size and position of this object (which can be defined on the ‘Caption’ tab) should be set to:
– X-pos: 32
– Y-pos: 368
– Width: 144
– Height: 144
d. Adding the calculated font color to indicate which score is better, for this we use the following expression:

if((sum({Group2}SalesPrice*Quantity)-sum({Group2}(CostPrice)*Quantity)-
sum({Group2}(SalesPrice*Quantity)*FixedCostFactor))/sum({Group2}SalesPrice*Quantity)
<
(sum(SalesPrice*Quantity)-sum((CostPrice)*Quantity)-
sum((SalesPrice*Quantity)*FixedCostFactor))/sum(SalesPrice*Quantity)
, cGreen
, argb(100,240,240,240)
)

e. Add an indicator for the ‘Group2′ selections to show if these selections have a higher score
– Add a text object with ▲ as text, set the font size to 110 pts and set the transparency of the object to 100%
– The size and position of this object (which can be defined on the ‘Caption’ tab) should be set to:
– X-pos: 825
– Y-pos: 368
– Width: 144
– Height: 144
d. Adding the calculated font color to indicate which score is better, for this we use the following expression:

if((sum({Group2}SalesPrice*Quantity)-sum({Group2}(CostPrice)*Quantity)-
sum({Group2}(SalesPrice*Quantity)*FixedCostFactor))/sum({Group2}SalesPrice*Quantity)
>
(sum(SalesPrice*Quantity)-sum((CostPrice)*Quantity)-
sum((SalesPrice*Quantity)*FixedCostFactor))/sum(SalesPrice*Quantity)
, cBlue
, argb(100,240,240,240)
)

2. Adding reference lines for average and overall scores of the groups in the benchmark
a. Add a reference line for our current selections expression (‘Net Margin %’)
– The expression for the the line should be:

(sum(SalesPrice*Quantity)-sum((CostPrice)*Quantity)-
sum((SalesPrice*Quantity)*FixedCostFactor))/sum(SalesPrice*Quantity)

– The expression for the label should be:

=num((sum(SalesPrice*Quantity)-sum((CostPrice)*Quantity)-
sum((SalesPrice*Quantity)*FixedCostFactor))/sum(SalesPrice*Quantity)
, ‘0%’)

– Be sure to check the checkbox for the label to show up in the chart
– The calculated color for this reference line should be ‘cGreen‘

b. Add a reference line for our benchmark ‘Group2′ selections expression (‘CompareTo’)
– The expression for the the line should be:

(sum({Group2}SalesPrice*Quantity)-sum({Group2}(CostPrice)*Quantity)
–sum({Group2}(SalesPrice*Quantity)*FixedCostFactor))
/sum({Group2}SalesPrice*Quantity)

– The expression for the label should be:

=’ ‘&num((sum({Group2}SalesPrice*Quantity)-sum({Group2}(CostPrice)*Quantity)
–sum({Group2}(SalesPrice*Quantity)*FixedCostFactor))
/sum({Group2}SalesPrice*Quantity)
, ‘0%’)

Note: We start this expression with a few spaces. This because of overlay risks when the difference in our comparisons are too small.

– Be sure to check the checkbox for the label to show up in the chart
– The calculated color for this reference line should be ‘cBlue‘

3. Adding grid lines which align with the labels of the product groups

For this we only need to set the dimension grid to show up. This can be done at the ‘Axes’ tab under the dimension axis; check the checkbox for ‘Show Grid’. Set the grid color to ‘cLightGrey ‘.

4. Apply all settings and click ‘Ok’.

We now should have a UI and benchmark chart that looks like:

with our last design additions we now have a UI and data viz with ‘great’ UX, agree?