Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

The use of icons and other visual cues has been proved as a great value asset in data visualization.

Icons let people to better understand complex information. Another good thing about icons is that they let us communicate globally. An up-pointing triangle is universally understood as a representation of growth.

QlikView brings you the possibility to choose from a predesigned set of visual indicators.

predesigned.png

A good alternative to the standard icons is the Unicode Geometric Shapes set.

“Unicode is a computing industry standard for the consistent encoding, representation and handling of text expressed in most of the world's writing systems.” (Source Wikipedia).

detail_dashboard.jpgGeometric Shapes is a set of visual indicators that effectively work as a text character. This means, you could use it everywhere you can write text in QlikView. Text objects, captions, cells, sheet titles, etc.

The main advantage of using Unicode Geometric shapes over images is the fact that you can control their properties, like size and color as any other text character. You could, for example, set up an expression to change the color based on an expression.

Another good example of how to take advantage of Unicode Shapes is including them as a part of number format pattern. You can predetermine how the shape will look for positive and negative values.

▲ #,##0.0%; ▼ #,##0.0%

Using this pattern will let you integrate an icon inside a cell like as in Change column in the table below.

intable.JPG.jpg

Color is, in some situations, not enough to differentiate from one state to another. Using different fills or patterns will help color blind people to identify differences.

colorblindicons.png

To include any of these shapes into your next QlikView project you just need to copy the shape from here and paste it where needed.

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

U+25Ax

U+25Bx

U+25Cx

U+25Dx

U+25Ex

Note: Remember to test your app to make sure it renders properly on every possible browser.

Enjoy Qliking!

AMZ

Update: Here you can get a working app with some examples on how to use these shapes.

40 Comments
Luminary
Luminary

Hi Arturo,

  Can you provide an example  to address these characters in expressions ?

Pablo

5,095 Views
Specialist
Specialist

I try to copy into an expressions or into a textbox but it doesn't work ...  Let's see

0 Likes
5,095 Views
Employee
Employee

Hi Pablo,

A basic implementation could be something like this:

     If (sum(salesLY)-sum(sales)>0,'▼','▲')

When working with numeric expressions try to include Geometric Shapes in the number format pattern as in the blog post. It will let you define the format behavior for positive and negative values.

0 Likes
5,095 Views
Creator II
Creator II

Very interesting.

A different approach.

We need more of this stuff.

Thank you Arturo.


0 Likes
5,095 Views
Not applicable

Interesting post. But still I couldn't understand how to use this.. Could you post some same qvw file?

Karthik

0 Likes
5,095 Views
Luminary
Luminary

Great post.

Also interesting to note that the CHR and ORD functions in QlikView will work with these Unicode characters.  So:

   chr(9650) will give you the ▲

And

   ord('▲') will give you 9650

You can use the hex codes above by using num# to interpret:

   chr(Num#('25B2', '(HEX)'))

Regards,

Stephen

Stephen Redmond is author of QlikView for Developer's Cookbook

He is CTO of CapricornVentis a QlikView Elite Partner. We are always looking for the right people to join our team.

Follow me on Twitter: @stephencredmond

5,095 Views