Program! Check the free webinars or register for Courses You can always look back via recorded webinars

Scroll

Improve your Qlik reporting visually in 10 steps without a script

Qlik Cloud

A visually appealing report in Qlik Cloud without writing a JSON file. Is that possible? Yes it is! In this roadmap, we will show you what possibilities there are. After all, a lot is possible by default in the right-hand menu in the Qlik Cloud environment. This right-hand side menu is always our base of operations. We will logically go through it in 10 steps.

Step 1: Sales demo Data reporting with Qlik Sense Classic as the app theme

Stap 1 Qlik Sense Classic

The sheet contains a filter menu column, 1 logo, 3 KPIs, 2 donut charts and 2 bar charts and time filters. These are default visualisations in Qlik.

Step 2: Determine grid size

It's important to use a small grid to maximise play space on the canvas. Too large a grid wastes space and hinders creativity. Therefore, set the grid to minimum size from the menu on the right by following these steps:

Edit sheet -> Sheet Properties -> Grid spacing -> Custom -> Grid spacing: 42 (Slider bar on the far right).

Step 3: Add background image

In a design tool such as Figma, Adobe XD, Adobe Illustrator or Adobe Photoshop, simply create a background image. Keep the size 1920 x 975 pixels. We have arranged the background image so that there is space for the logo and time-based filters in the dark grey area. The white area contains the page filters and the light grey area contains the visualisations. You save the image as a .png and add it to the media library. You add the image as follows:

Edit sheet -> Sheet properties -> Styling -> Background switch from auto to custom -> Background image -> Media library -> Select image -> Upload media -> In App -> “Imagename.png” -> Insert.

Notice how the grey area in the background immediately creates dimension:

stap 3 qlik cloud
Stap 4 visueel aantrekkelijk maken Qlik Cloud

Step 4: Formatting visualisation containers

Now that the background has been added, we look at the visualisations. These are now all on the grey area, but with no logic. You can easily fix this by adding a white background colour for each visualisation so it looks like the visualisations are within containers. You need to do this per visualisation, so it's a repetitive process. You add the visualisation container as follows:

Edit sheet -> You click on 1 visualisation (the selected visualisation gets a green border) -> Appearance -> Presentation -> Styling -> General -> Background colour -> Single colour -> #FFFFFF (white).

Step 5: Scaling elements and putting them in the right place

This already makes the report look much better. However, a lot of containers are still printed on top of each other. We are going to give the cramped spaces between the white areas some more air, which also brings in an emotional aspect. It is important to arrange the dashboard in a logical way for the user/reader, so you put the logo in the top left corner. You do this as follows:

Edit sheet -> Click Logo (the selected visualisation gets a green border) -> Scale the logo to the desired size.

You then apply these steps to the time filters, the page filter column, the visualisations on the canvas until everything has some space. The golden rule here is to stay away from the edge as much as possible. An example of how you could format it is shown below:

Stap 5 Qlik Cloud visueel
Stap 6 Qlik Cloud visualisatie

Step 6. Add dividers between filters

One option we personally like is to add dividers (dashes) to the filters. This breaks up the filter bar just a little better and makes the transition easier to read. You can add these dashes as follows:

  1. Edit sheet -> Custom objects (menu on the far left) -> Qlik Dashboard Bundle -> Line -> Drag on canvas between filters -> Presentation -> Orientation -> Vertical.
  2. Appereance -> Presentation -> Stroke -> Single colour -> Colour: #BBA476.
  3. Appereance -> Presentation -> Width -> 2

See the result on the left.

Step 7: Give colour to time filters buttons

The default colour of the filter buttons is Qlik green. That can fit in, but for this theme we are going to 'track' it. What matters here is the colour of the button when it is selected. You do this as follows:

Edit sheet -> Time filter click 2020-2022 (the selected visualisation gets a green border) -> Appearance -> Colors -> Selected background (Qlik Green) -> type #BBA476 in the bar.

Then do the same with the time filter January to December.

Stap 7 Qlik Cloud visualisatie

Step 8: Customise titles and fonts

A big advantage of the Qlik Cloud environment is that it owns many standard theme fonts. For this report, we chose the font Open Sans, Serif. We will therefore apply this throughout. This will not be the same for every visualisation, so hence a three-way split for this step. You add the fonts as follows:

8A: KPIs (Top 3 horizontal white blocks)

Edit sheet -> Click First KPI (the selected visualisation gets a green border) -> Data -> Second KPI -> Delete.

Next: Appearance -> Styling -> Change any available font from QlikView Sans to Open Sans Serif. -> 13px -> #2D2C31.

8B. Visualisations (Middle 3 blocks and bottom white block)

Edit sheet -> Click first donutchart (the selected visualisation gets a green border) -> Appearance -> Styling -> Change any available font from QlikView Sans to Open Sans Serif. -> 13 px -> #2D2C31.

8C. Filter titles (Time-based and page filters)

Edit sheet -> First time filter click (the selected visualisation gets a green border) -> Appearance -> Advanced HTML/CSS -> Custom "Font-family:" css string -> Type Open Sans in white bar.

Then: type Appearance -> Advanced HTML/CSS -> Custom CSS style for every element -> font-weight: bold; colour: #2D2C31.

Do these steps for all the visualisations what have you and play a bit with thicknesses for titles, size for plain text etc.

Your worksheet will look like this:

Stap 8 visualisatie Qlik Cloud

Step 9: Adjusting colours in visualisations

Now that we are already very far in the right direction, we need to talk about colour usage. The Qlik Sense app theme has bold colours like blue, yellow and red by default. These colours are picked so that categories can be distinguished well. So basically, these are already good by themselves. Nevertheless, we'll show you an example of how you can adjust these colours to your desired tastes. You do this as follows:

Edit sheet -> Master Items (menu bar on the far left) -> Dimensions -> Right-click Collection -> Edit -> OK -> Value Colors.

Here you can adjust the colours as you like. We personally always recommend a greyscale palette. But for this example, we'll also add a gold colour. When you move your mouse over the palette, you can choose a code for each value in collection:

Qlik: #ABA7A7, Sense: #D0CECE, Victa #BBA476 -> Save.

You can then do the same for measures in the same way. Only check "Measures" instead of "Dimensions".

Stap 9 visuals Qlik Cloud

Step 10: Define visualisation thicknesses

Next, you can adjust the thickness of the donutchart, barchart etc. before finalisation.

Edit sheet -> First Donutchart (the selected visualisation gets a green border) -> Appearance -> Presentation -> Styling -> Chart -> Inner radius -> 0.6. Follow these steps for the other visualisations as well.

You can play with this inner radius for the desired effect. The barchart can be formatted in a similar way at "Bars -> Bar width". Follow these steps for the other visualisations as well.

See below the final result of your custom worksheet without using a JSON file:

Stap 10 eindresultaat Qlik Cloud visuals

Bonus: Quick wins

  • Quick win 1: Padding

Padding is something we cannot adjust in Qlik itself. However, there is a workaround for this with adding a white border so it looks like the visualisation has padding. This goes as follows:

Edit sheet -> First Donutchart (the selected visualisation gets a green border) -> Appearance -> Presentation -> Styling -> Border -> 15px -> #FFFFFF. Follow these steps for the other visualisations as well.

  • Quick win 2: Add shadow

Now that the padding has been added, we can add another shadow border to the visualisations for added dimension. Personally, we like a shadow with a light grey colour. At least not too dark. This goes as follows:

Edit sheet -> First Donutchart (the selected visualisation gets a green border) -> Appearance -> Presentation -> Styling -> Shadow -> Small -> #D9D9D9. Follow these steps for the other visualisations as well.

The final result is as follows:

Bonusstap Qlik Cloud visuals
CONTACT

Contact us now!

Thus, through a number of steps, we arrived at a nice end result. Do you have questions about these improvements or are you curious about how we can visually improve your dashboards? Then contact us now.

Naam

Wist u dat uw browser verouderd is?

Om de best mogelijke gebruikerservaring van onze website te krijgen raden wij u aan om uw browser te upgraden naar een nieuwere versie of een andere browser. Klik op de upgrade button om naar de download pagina te gaan.

Upgrade hier uw browser
Ga verder op eigen risico