Qlik Community

Qlik Design Blog

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

Employee
Employee

Line Chart tricks: Displaying what's important

Continuing the line charts topic I've started a few weeks ago, let see how to adjust a line chart to help us to see what we want to.

Displaying what is important

In the example below I want to display Sales evolution by store over time, but it happens that this company has too many stores (lines) to easily identify them individually in the chart.

I still can get some value out of this chart; global trend is still visible. Seems like sales are decreasing over time, but details are lost in the color mess.

6.png

As color is not helping me to better decode this chart, I will unify line colors.

7.png

8.png

Now I can see much better my company’s trend, sales amount is decreasing, based on the overlap of individual store behaviors but details are still hidden in green.

Selecting a store I could isolate it and get its details. This is great and fast, but it avoids me from seeing the selected store in context. What I would like to see is the sales evolution of particular store vs all others.

9.png

The next step will be to avoid the chart to be filtered out when a store name is selected, to do so I will include set analysis in my expression.

Original expression:  sum(Sales)

New expression:       sum({<Store=, [Store Name]=>} Sales)

By doing that my chart won’t be filtered by Store or Store Name selections

10.png

Now, what I need is to highlight the store within the chart. Again I will use the Background Color properties for the expression to achieve that.

11.png

if(isnull(only([Store Name])) ,ARGB(20,200,200,200),ARGB(190,43, 123, 70))


This expression will gray out all non-selected stores and highlight our selection(s).

12.png

13.png

With this new chart, my selections will help me to see store details and to keep selected store(s) in context. I can see the global trend and compare it with any store just by searching and selecting.

Extra tip:  If you look carefully at the two charts above, you may notice a slightly color difference in the second image dark green line, this is because the green line is under several semi-transparent gray lines making it look little bit different.
Sorting the dimension will help you to prevent this. In this case I’m sorting Store Name by sales amount using the following expression.

aggr(sum(Sales),[Store Name])

You can see this chart working as part of Retailer EPOS Data Analysis demo.

Line charts beyond your imagination

These are some creative and really cool non-standard uses of line charts I have seen lately:

Parallel Co-Ordinates Chart

14.png


This chart variation was firstly introduced by Alistair Eaves some time ago. The chart is great for showing data paths between various dimensions; letting people to understand something so hard to see as flows dynamics in the data. Check out the demo

Dynamic Network Flow Charts


15.png

If you are a frequent flyer you will probably have read all magazines in your front pocket. One of my favorites readings on board are these maps with all the routes airlines operate through the world. Matthew Crowther stretched out QlikView line chart object to display information in the same way but keeping the QV soul (association) in it. If you want to know how to do it, you should read: New Qlikview Chart Type: Dynamic Network Flow Charts | QVDesign

The Associated Curve Chart


16.png

Based on the same principles but pushing things a little bit more Matthew presented this new chart, he called Associated Curve Chart.  You can check it out at Matthew's blog

Enjoy Qliking!

AMZ

27 Comments
carbal1952
Contributor II

Thanks Arturo:

Very interesing and illustrative.

CB.

0 Likes
1,346 Views
Partner
Partner

hi Arturo,

Really very interesting post, also a good illustration.

0 Likes
1,346 Views
sudeepkm
Valued Contributor III

wonderful, superb thnx a lot for sharing this knowledge.

0 Likes
1,346 Views
Not applicable

Hi Sir

Nice post !  i personally find line chart is one of the chart CEO like to see , Sales , Exp , Net profit chart by year. as this chart will be able to see how well the company perform.


i happen to have a chart which i am not able make the present more interesting. when i try to follow your step , i get stuck on bel;ow expression :-

sum({<Store=, [Store Name]=>} Sales)


From your above expression , i cannot figure out how you get the 2 field , Store and [Store Name]  , in my application , i only have one field that is [Store Name], i don't have Store field.

it is possible for you to post an example ?

Paul

0 Likes
1,346 Views
MVP & Luminary
MVP & Luminary

Hi Arturo - thanks for sharing - a good illustration of what can be achieved if you think outside of the box a bit.  Also a reminder about context, as James Richardson was talking about in his blog post on Ishiness:

http://community.qlik.com/blogs/theqlikviewblog/2013/11/08/ishiness-or-keeping-an-overall-sense-of-w...

In response to Paul's question I posted some thoughts over on another thread, regarding using an expression in the background colour code that would allow multiple rows to be shown highlighted against other transparent lines: How to make only selected line chart diff color from other ?

- Steve

1,346 Views
thornofcrowns
Valued Contributor II

Great idea and implementation. I'll shamelessly plagerise be inspired by this when improving some of the 'data clutter' charts I have inherited!

1,346 Views
jason_michaelid
Honored Contributor II

Very simple and effective - thanks .

1,346 Views
stevegimbrollmt
Contributor II

Great idea...and will be implemented in my dashboards ! thanks

1,346 Views
whiteline
Honored Contributor II

Hi. Thanks for sharing!

Some thoughts:

Although it's just an example, it seems that the stores with higher sales are not so important than the others.

Or the chart points out that there are a lot of small sales at the bottom.

Alpha blending in such cases is much more powerful, can be used regardless of selection highlighting and often can lead to unexpected user experience.

1,346 Views
MVP & Luminary
MVP & Luminary

Where I find blending particularly useful is on scatter charts - where

overlapping spots can give a nice heat map.

0 Likes
1,346 Views
Employee
Employee

Unexpected user experience is very true. Please keep that in mind when using this technique in your app.

Also very true, alpha blending and scatter charts works very nicely together.

0 Likes
1,346 Views
juleshartley
Valued Contributor


Hi - is there any more information on 'Alpha blending'... sounds interesting!

0 Likes
1,346 Views
mikecrengland
Contributor III

I like this technique. I first got inspired by Matt Crowther with his post:

Different Ways to Interact & Display Information With Bar Charts & Tables | QVDesign

I took it a little farther, letting the user choose multiple values, each having its own color with my post:

Fortune Cookie BI: Color me Crazy

I have a little different technique, using the single color/grey that Arturo presented at:

Fortune Cookie BI: Highlight the Trend, Part Deux

It's crazy how many different ways there are to skin a cat...

mike

1,346 Views
MVP & Luminary
MVP & Luminary

Hi Julian - it's simply the technique of setting the colours for your lines or dots (or whatever) to a semi-transparent value.  This way as more points of colour overlap you get a deeper colour.  I seem to recall a mortgage demo on demo.qlik.com some time ago that used this well - not sure if it is still there.  I've used it in insurance companies, with dots overlaid on maps to show claims.  When the data points then blend it shows locations of high risk to perils such as flooding.  Arturo Muñoz's to last screen shots shows the technique in action two - where you can get a feel for where many of the grey lines are converging.

- Steve

1,346 Views
Employee
Employee

Hi Julian,

Take a look at this blog post where we cover that topic http://community.qlik.com/blogs/qlikviewdesignblog/2013/10/04/using-rgb-and-argb-to-define-colors

1,346 Views
juleshartley
Valued Contributor

Thanks Steve, Arturo and Mike! Really helpful and inspiring (as always)...

1,346 Views
male_carrasco
Contributor

nice!

0 Likes
1,346 Views
Not applicable

Wow, this is a very useful trick. I can already see myself using this more often. Thanks a lot for sharing.

0 Likes
1,346 Views
Not applicable

Love this.

I have a question as well. Can this be done when using ValueList dimensions as in the attached link? http://poverconsulting.com/?p=109

I have been unsucessful with this as it always hides all barring the selected values.

0 Likes
1,346 Views
Employee
Employee

Very nice and really well written.  Thank you!

0 Likes
1,346 Views
Partner
Partner

Thanks, very nice post!

0 Likes
1,346 Views
Not applicable

Very Use full

Thanks to share

0 Likes
1,346 Views
thanstad
Contributor

NIce feature has become a standardobject in our company. Now we make the same on Barchart aswell.

/tormod

0 Likes
1,346 Views
a5123283
New Contributor III

Great work here fellow QV peers!

I trying to bring it up another level by doing it on stack charts using % type of aggregation. Does anyone know what will be the coding for each expression background?

2.jpg

I have tried this coding on the background but it is not working:

=if(match([Macro Region],concat(distinct [Macro Region],',')),Green(),ARGB(150,225,225,225))

Expression:

$(vOnTimePercent):

(Sum (If(AllocationDateCode - ShipDateCode <= 0 or [Allocation Date] = 'In Stock',[Gross Value Open CAD])))

/

Sum (If(([Allocation Date] <> 'Season Open for Preseasons'

and [Allocation Date] <> 'Not Set'

and [Allocation Date] <> 'RTP'

and [Allocation Date] <> 'RTS'),

[Gross Value Open CAD]))

1.jpg

Sample app can be downloaded fro here.

Qlik Demos: See QlikView in Action | Demo.Qlik.Com

Regards,

Nelson

0 Likes
1,346 Views
joydipp1988
Contributor

Hi amz‌,

Really amaizing post. I learned a lot. Thanks for sharing.

I was trying to apply the same in Fill Line Chart. But its not working. Here is the snap-

Fill chart.PNG

But its working fine with simple line chart. Here is the snap-

Simple Line chart.PNG

Please guide me how to achieve the same in Fill Line chart.

Thanks in advance.

Regards,

Joy

0 Likes
1,346 Views
MVP & Luminary
MVP & Luminary

Hi Joydip,


I think I've seen this question come up before - and the quick answer was that it couldn't be done.

Steve

0 Likes
1,346 Views
felixobes
New Contributor II

This is a great explainer!!

0 Likes
156 Views