Replacing images with Geometric Shapes as visual c... - Page 3 - Qlik Community

ArturoMuñoz · ‎2013-09-13

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.

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

Geometric 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.

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.

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.

ArturoMuñoz · ‎2013-09-20

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

Report Inappropriate Content · ‎2013-11-26

How do you change the symbol color???

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

Report Inappropriate Content · ‎2013-11-26

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

Report Inappropriate Content · ‎2013-11-26

=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.

Report Inappropriate Content · ‎2013-11-26

Did you check it in visual cues?

Anonymous · ‎2013-12-01

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

rustyfishbones · ‎2013-12-01

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

marthacano01 · ‎2013-12-19

I love it! Thanks!!

rsdhavle · ‎2013-12-26

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

ArturoMuñoz · ‎2013-12-26

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%

Replacing images with Geometric Shapes as visual cues