Qlik Community

Qlik Design Blog

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

Employee
Employee

How to add minicharts to Qlik Sense tables

A few days ago I stumbled upon one of those little tricks that we all love. Roland Vecera‌ came up with a nice solution to bring minicharts to Qlik Sense. It can help us to increase app data density and make our Qlik Sense tables sexy and informative again. Don't forget to add this to your bookmarks!


example.png


In Roland's blog post you will find instructions about how to build a linear gauge, a traffic light gauge, and even whiskers minicharts (right table in the image above),


I particularly like the linear gauge, with this technique we can now simulate small bars that goes along with each one of the table dimension items. The expression used to create the linear gauge 'bar chart' is actually reusable and very simple, looks like this:


repeat('█', rangemax(rangemin( ceil(((column(1)/column(2))-1)*10),10),1) )


The expression will paint a variable number of solid blocks █ based on a given calculation that is evaluated by row. By now you should have a nice grey bar from 1 to 10 blocks.


Next (optional) step is to apply color to it. You could add color based on any criteria you want, in the chosen example Roland is using color in the same way as he use size, both display Growth.


The text color expression looks like this in the example:

if(expression>2, argb(255,0,150,0),

     if(expression>1, argb(255,0,200,0),

         if(expression>0.5, yellow(),lightred())))

Where expression will be the same expression as in Growth column (Steigerung).

You can read more about minichars in tables trick at QlikView + Qlik Sense Blog von Heldendaten: Qlik Sense Calendar Measures & "Minicharts" in Tabellen

Hope you like it.

AMZ


PS: For those of you who can't read German and/or use Google translator, please check out this community doc Creating Mini Chart in Qlik Sense tables‌ (it also contains some hacks to make this trick even more complete)

15 Comments
lech_miszkiewic
Honored Contributor III

Hi,

I was using this technique for quite a long time with QlikView. I know, that currently it is the only way users can add gauge to their tables with color coding. What i do not like about methot with block and repeat function is that in QlikSense you cannot control the with of the column so it is really difficult to say whether you made 100%, 50% or maybe 10% just by looking at the bars.

On the other hand i am going to look at the example with whiskers.. I have not tried it before and it looks interesting.

cheers

Lech

0 Likes
33 Views
simondachstr
Valued Contributor III

Mini Charts / Sparklines / Progress Bars for Qlik Sense are properly implemented in the Vizlib Table extension (Download for free at www.vizlib.com/table‌).IMG_3258.PNG

33 Views
omarbensalem
Esteemed Contributor

I'm already using this, It has some limitations but It's a thing of BEAUTY !

Hope the Qlik Team is thininkg of upgrading the default chart table to sthing like this !

That would be AMAZING

mto

33 Views
lech_miszkiewic
Honored Contributor III

That is true. Is VizLib extension free for commercial use?

0 Likes
33 Views
simondachstr
Valued Contributor III

Up to 5 users yes.

0 Likes
33 Views
simondachstr
Valued Contributor III

Thanks for your feedback Omar!

Please send me along the limitations to martin.mahler@vizlib.com - we're currently working on the Table hence could include fixes for them very quickly

33 Views
tomasz_tru
Valued Contributor

Lech,

You can mix chr(09608)  and chr(09617) to visually show 100% reference:

MicroChart.JPG

33 Views
Employee
Employee

giphy.gif

33 Views
lech_miszkiewic
Honored Contributor III

Hi Tomasz - Indeed it is great idea of doing this thing, and if you have a lot of space (wide columns) this is the way to do it! So simple and so great.

On the other hand what i meant was more related to fact that columns can be squashed and not full bar is then shown. See screenshot. In this case we cannot do anything about it and have let people deal with it.

bar.png

33 Views
tomasz_tru
Valued Contributor

Lech,

Have you tried manually adjust column width?

0 Likes
33 Views
lech_miszkiewic
Honored Contributor III

Yes-i did (that is how i actually got an example-picture from my previous post).

I know we can adjust width of columns in "Table" visualisation object, however i had an issues keeping that width on diffrent screens / resolutions behave in predictive way.

still  - so far your suggestion with chr(09608)  and chr(09617) is the best currently known.

regards

Lech

33 Views
omarbensalem
Esteemed Contributor

Hi Tomasz,

Can you please share your expression?

With the cobination of chr(09608)  and chr(09617) ?

Thanks

0 Likes
33 Views
tomasz_tru
Valued Contributor

for example:

repeat(chr(09608),round( [formula for percentage] * 10))

&repeat(chr(09617),10-round( [formula for percentage] *10))

33 Views
js_giraldo
New Contributor

@tomasz_tru

Hello, could you share an example? To guide me in the implementation.


Thank You very much

0 Likes
33 Views
tomasz_tru
Valued Contributor

Can you give me sample data?

Tomasz

0 Likes
33 Views