Much of the QlikView User Experience (UX) is customizable. For example, we can develop ways to guide users through a well-defined series of reports or give them the power to create their own reports. We can also allow them to change the interface's language or the currency. In this section, we will create the following UX components:
When users notice something interesting in concise visualizations such as numbers, sparklines, and bullet graphs, they often want to take a glance at the details that compose it. For example, in our customer fact sheet, we want to quickly analyze the detail behind the high-level comparison between actual and budget sales. During the design stage we chose to open a detailed comparison by item when the user clicks on vs. Budget, as shown in the following figure:
Let's create the following variable:
Variable | |
---|---|
Label |
Value |
vCustomerFactSheetPopUp |
None |
3
.=vCustomerFactSheetPopUp='BudgetDetail'
2
.=vCustomerFactSheetPopUp<>'None'
Action | |
---|---|
Label |
Value |
Variable |
|
Value |
None |
Vs. Budget
Action | |
---|---|
Label |
Value |
Variable |
|
Value |
|
If everything works correctly, then the detailed bullet graph will appear in front of a transparent, gray background. When we want to close the detail and go back to the general view of our customer fact sheet, we click on the grayed-out background. We could also create a Close button, but it is now common UX practice to close a pop-up window by clicking anywhere else on the screen.
As only one pop-up window will appear at any one time, we use one variable to determine which popup is displayed. One variable is obviously easier to maintain than having one for each corresponding popup. However, if we want to give the users the ability to open as many detailed charts as they like, then we would have to create a control variable for each popup.
It is relatively easy to create a dynamic straight table or pivot table in QlikView and we can find examples in various demos to imitate. However, it can be a challenge to create a simple way for users to make their own attractive graphic charts in a server environment. Qlik Sense is the ultimate tool for users who want to create their own charts and stories, but we can also give users the power to build insightful, ad-hoc data visualization in QlikView. The following chart was created using a few variables that users can readily modify in a server environment:
Let's create the following variables:
Variables | |
---|---|
Label |
Value |
vNumDimensions |
1
|
vChartTitle |
Please add the chart's title here. |
vSortMetric |
=pick(match('|' & GetFieldSelections(_SortMetric,'|') & '|' , '|Net Sales|' , '|Gross Profit|' , '|Volume|'),'sum({$<_ActualFlag={1}>} [Net Sales USD])','sum({$<_ActualFlag={1}>} [Gross Profit USD])','sum({$<_ActualFlag={1}>} [Quantity])')
|
vColorMetric |
=pick(match('|' & GetFieldSelections(_ColorMetric,'|') & '|' , '|Net Sales|' , '|Gross Profit|' , '|Volume|'),'sum({$<_ActualFlag={1}>} [Net Sales USD])','sum({$<_ActualFlag={1}>} [Gross Profit USD])','sum({$<_ActualFlag={1}>} [Quantity])')
|
vAscDsc |
Dsc
|
vAscDscNum |
=if(vAscDsc='Asc',1,-1)
|
vColorScheme |
Diverging
|
vNumDimensionValues |
10
|
vChartTitle
, vNumDimensions
, vNumDimensionValues
, vAscDsc
, and vColorScheme
to an Input Box.vNumDimensions
, vAscDsc
, and vColorScheme
to Predefined Values Only and disable the Enable Edit Expression Dialog option. For the same variables, select the Value List as Predefined Values in Drop-down and enable Listed Values in the Predefined Values section. The list values should be the following for each variable:
Variables | |
---|---|
Label |
Listed Values |
vNumDimensions |
0;1;2;3
|
vAscDsc |
Asc;Dsc
|
vColorScheme |
Diverging;Sequential
|
_Metric_LeftAxis
, _Metric_RightAxis
, _ColorMetric
, and _SortMetric
fields and insert them in a container.
Dimensions | |
---|---|
Label |
Value |
Dimension 1 |
A cyclical dimension with the following fields:
Billing State Customer Item Sales Person Year Month
|
Dimension 2 |
A cyclical dimension with the same fields as Dimension 1 |
Dimension 3 |
A cyclical dimension with the same fields as Dimension 2 |
Expressions | |
Label |
Value |
Net Sales |
sum({$<_ActualFlag={1}>} [Net Sales USD])
|
Gross Profit |
sum({$<_ActualFlag={1}>} [Gross Profit USD])
|
Volume |
sum({$<_ActualFlag={1}>} Quantity)
|
Dimensions | |
---|---|
Label |
Value |
Dimension 1 |
vNumDimensions>=1
|
Dimension 2 |
vNumDimensions>=2
|
Dimension 3 |
vNumDimensions=3
|
Expressions | |
---|---|
Label |
Value |
Net Sales |
SubStringCount( '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|' , '|Net Sales|')
|
Gross Profit |
SubStringCount( '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|' , '|Gross Profit|')
|
Volume |
SubStringCount( '|' & GetFieldSelections(_Metric_LeftAxis,'|') & '|' , '|Volume|')
|
$(vColorMetric)
. In the first run-through select a sequential color scheme from light blue (247, 251, 255)
to dark blue (8, 48, 107)
. In the second run-through select a diverging color scheme from dark red (178, 24, 43)
to dark blue (33, 102, 172)
passing through a light gray (247, 247, 247)
at 0. Place the resulting color mix functions into the following if-statement:if(vColorScheme = 'Diverging',ColorMix2 (…),ColorMix1 (…))
Use the same code for the background color of every expression.
_Metric_LeftAxis
in the Conditional expression with _Metric_RightAxis
.=$(vSortMetric)*vAscDscNum
Repeat the same steps for every dimension.
=vNumDimensionValues
The user now has a way to create custom visualizations using only a few variables. We can continue to create more variables to control the property options defined by an expression field or preconfigure certain properties that can only be modified in the properties windows. However, the result of the previous exercise allows users to create the best possible charts using the fewest variables.
The cyclical dimensions are also more user friendly as they are located next to their axis or legend. We create three of them because graphs may use a maximum of three dimensions. Each should be sorted each dimension alphabetically or numerically by default, but we can easily select an expression by which to sort them in either ascending or descending order. We've also added a variable to limit the number of dimension values as there are often more than those that can fit in a graph at one time.
The metrics are divided by left and right axis as it is common practice to visualize two metrics that do not share the same scale. We also include the ability to add a heat map to the custom visualization to make them more insightful. The heat map can either be sequential, if the metric can only be positive, or it can be diverging if the metric can also be negative.
Although it seems like we use few variables in comparison to the hundreds that exist in the chart properties windows, the users can create a wide variety of different visualizations. Users who want the ability to create even more personalized charts should start working with Qlik Sense, which we will review in Chapter 11, Mastering Qlik Sense Data Visualization.
Currency, language, date formats, commas, and decimals can change depending on the region and users often become more engaged in the data discovery process when the effort has been made to respect their regional preferences. Some options, such as currency, are best left to the user to select, while others, such as date formats, should be automatic.
Contrary to what we may think, the currency used to analyze data does not depend on a user's country. Although some analysis may be done using the local currency, it is common to analyze data using one of the reserve currencies, such as the US dollar or the Euro. For this reason, we often add a currency filter to the user interface.
The values of the currency field correspond to the names given to the monetary amount fields in the data model, such as [Net Sales LC]
and [Net Sales USD]
. In this way, we can easily make our application multicurrency using the following code:
sum({$<_ActualFlag={1}>} [Net Sales $(=Currency)])
In a similar way to how we make our application multicurrency, we also make it multilingual. We create a table with one field called Language
that contains values that correspond to the field names in another table that contain the texts belonging to each language:
Then, in every multilingual label, we use the following code to calculate a label. We use a descriptive ID, like Sales
, for our labels so that we can identify expressions and objects without having to manually look up numerical IDs in a table:
=only({$<LabelID={'Sales'}>} $(=Language))
Along with the labels, we also choose which descriptive field to use for list boxes and dimensions. For example, we have two fields in our Customer
table that describes customer groups. [Customer Group ENG]
contains English descriptions and [Customer Group ESP]
contains Spanish descriptions. We use the following code as an expression in our list box or as a calculated dimension:
=[Customer Group $(=Language)]
Although we give the user the option to select any language, the application should open in the user's preferred language. One way to do this is to distribute a copy of the QlikView file with
the language prefiltered by the QlikView Publisher. Another way is to use section access to reduce a field that we use to select the preferred language upon opening the QlikView document.
Date and number formats depend on the country and it should be automatically selected when opening the QlikView document. We use a set of variables that return the preferred formats based on a user's region along with the formatting functions, num()
and date()
in order to dynamically format the data.
We can define a user's region using Section Access. The following code is an example of how the dynamically formatted expressions will look:
date([Date],$(vRegional_DateFormat)) num(sum(Quantity),$(vRegional_NumberFormat_FixedDecimal) ,$(vRegional_Decimal),$(vRegional_Thousand))
In the following figure, we bring together text objects, bullet graphs, sparklines, and the dynamic chart to create the customer fact sheet that we designed using Post-it notes and a whiteboard:
Create the pending expected sales chart in the next chapter and review the cross-selling chart extensions in Chapter 11, Mastering Qlik Sense Data Visualization.