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

2,720 Views
jolivares
Valued Contributor

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

0 Likes
2,720 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
2,720 Views
carbal1952
Contributor II

Very interesting.

A different approach.

We need more of this stuff.

Thank you Arturo.


0 Likes
2,720 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
2,720 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

2,720 Views
Partner
Partner

Another advantage of this is to not need a separate expression for the icon.

Good thinking Arturo, good post.

0 Likes
2,720 Views
Employee
Employee

Hi,

Take a look at this simple app about how to include Geographical Shapes into an App

Geometric shapes.qvw

2,720 Views
jolivares
Valued Contributor

I can't access...

0 Likes
2,720 Views
Employee
Employee

Right, it seems a moderator needs to approve the content before it can be published. I will let you know.

0 Likes
2,720 Views
Employee
Employee

Hey Juan try again now

0 Likes
2,720 Views
rustyfishbones
Honored Contributor II

You can also go to your Start Button on windows and search for Character Map, this will give you lots of options including Geometric shapes and other handy symbols and icons that can add value to your Apps

You can select the font, it must me a font used in Qlikview!, you can double click the icon you want and click copy, then simply paste it into your Qlikview document

I  made a video a while back Qlikview with Character Map by RFB 121 - YouTube

CharMap.png

2,720 Views
Or
Valued Contributor II

Quite handy indeed - I hadn't realized we could put the trend arrows into the number format.

As always, I will reiterate the following note about color: there is no need to use a color for a "regular" positive result. Use color only when attention is required - either because something is wrong (red, orange, yellow), or something is going unusually well and thus requires attention (blue is preferred, as green/red is a problem for the color blind, but green is acceptable - use a different fill as stated above, and ideally different saturation). If everything is on target and this particular object does not require the user's attention, there's no reason to use a color at all.

2,720 Views
Partner
Partner

Mr. Arturo, I want to know if you have the video of the session today, Tips & Tricks – Geometric Shapes: Replacing images with Unicode Characters- Global People Enablement Program. Thanks.

0 Likes
2,720 Views
Employee
Employee

Hi Ana Carolina,

The session has been recorded as usual. Unfortunately I don't have the link to the recorded session yet. I will keep you updated.

0 Likes
2,720 Views
Not applicable

It is also nice to note that the arrows are brought over nicely as well when you export to Excel. Thanks Arturo!

0 Likes
2,720 Views
Partner
Partner

Thanks Arturo, I'll be pending.

0 Likes
2,720 Views
Employee
Employee

I had seen this kind of stuff in the demos but it is great to spread this clean approach!

Thanks

2,720 Views
yevgeniy
Contributor

Good thinking. Thanks Arturo!

2,720 Views
Not applicable

Hi Arturo

first time see your interesting post. do you have make some blog post previously ? if yes can you give me the link.

0 Likes
2,720 Views
Employee
Employee

Hi Paul,

You can find interesting tips and tricks about QlikView design and developer at QlikView Design Blog.

On the right side bar you should be able to filter by author, take a look at the section called filter blog and then by author.


Regards

0 Likes
2,720 Views
Not applicable

How do you change the symbol color???

I need to show ▲ in green and ▼ in red ... any help is appreciated.

0 Likes
2,720 Views
Not applicable

By Changing font colour of that particular column/text box?

0 Likes
2,720 Views
Not applicable

=if(sum({$<Year = {$(=Only(Year))}>} Premium)) -

(sum({$<Year = {$(=Only(Year)-1)}>} Premium))))/

(sum({$<Year = {$(=Only(Year)-1)}>} Premium)))>0,'▲','▼')

The above is the formula that I am using ... I need the font color of the arrows to be conditional.

0 Likes
2,720 Views
Not applicable

Did you check it in visual cues?

0 Likes
2,720 Views
walidhussein
Contributor

I think This is very helpful way to show the change of values in a good looking for the user by using small colored cursors, arrows or smiley faces. Thank you for the tips.

Best regards,

Walid

0 Likes
2,720 Views
rustyfishbones
Honored Contributor II

Hi Marcon,

Use the same expression in the font color, but instead of using the arrows use the colors you want

=if(sum({$<Year = {$(=Only(Year))}>} Premium)) -(sum({$<Year = {$(=Only(Year)-1)}>} Premium))))/(sum({$<Year = {$(=Only(Year)-1)}>} Premium)))>0, GREEN (), RED ())

2,720 Views
Partner
Partner

I love it!   Thanks!!

2,720 Views
rsdhavle
Contributor II

In one of the above examples you have combined arrows along with the expression value in a single column. How is that implemented? Give some expression as a example

0 Likes
2,720 Views
Employee
Employee

Hi Rohan,

You just need to combine the shapes with the number format in the chart properties tab:

(...)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%

0 Likes
2,720 Views