Qlik Community

Qlik Design Blog

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

Employee
Employee

Gauge charts were used widely in dashboards and analytical apps a few years ago, and they still are, but when was the last time you saw a nice looking dashboard using one of those old fashion speedometers?

If you are an experienced QlikView user/dev, you may be familiar with Gauge charts styles as shown in the picture below. Today I would like you to explore with me how QlikView can help you to turn a boring gauge into something different.

Default Style.png

Let´s start with a simple question, what do the following charts have in common?

QlikView Gauges.JPG.jpg

Besides the fact that all of them share the same color palette and style, and even if you haven’t notice it at a first sight, what all have in common is the chart type we picked when we created the charts. We chose a Gauge chart. Actually, all this charts are components of the new demo app called !OEE Analysis. This app is a redesign of an existing app that was created as a demonstration for the manufacturing industry.

The nature of manufacturing, coupled with the industries’ natural inclination to mimic its physical environment, drives developers to extensively use gauges and/or speedometers on dashboards.  This rationale is based on the implementation of images that are familiar to engineers and people with experience using industrial machinery.

Since we started to work in the former app redesign, we had one clear goal. We wanted to keep that gauge essence in the new app, but we also needed to modernize the look of the old speedometers. To do so, we spent some time exploring different alternatives until we found how to turn them into a new set of ‘flat’ style gauges.

Gauges.png

All of the new gauge styles, as in the picture above, are representing just one metric at a time (gauges don’t work well with more than one measure anyway). In addiction we are using color to emphasize the current state for each KPI so the user doesn’t really need to look for needle position to understand the data but she/he only need to identify the color code. If a color code catches the user’s attention, then she/he can spend more time looking at the details. We incorporated adjacent text objects making the whole chart much more interesting and data complete.

The result is a much cleaner data centric app which we managed to keep the gauge spirit on it.

OEE.png

Gauge charts have gained a bad reputation as data visualization objects, sometimes because they give user too little information, at times it’s all about a weak implementation, and most of times it’s because they were designed as a real-life object rather than a data centric object. After seeing the new styles we came up with, you may want to reconsider your position and give gauge charts a second chance, won’t you?

Enjoy Qliking!

AMZ

43 Comments
Valued Contributor

Wow.. Love the way these gauges are designed. ... The simpler the better..

2,810 Views
Valued Contributor III

Nice article. Thanks.

I also have created a doc on Gauge chart. how to use multiple values in a Gauge charts.

Multi value Gauge Charts

2,810 Views

The flat objects in your app give a whole new visualisation of gauges.

Is the QVW available to download on the Partner Portal?

2,810 Views
New Contributor III

Very interesting,

Too bad the standard QlikView components are totally outdated with the design.

2,810 Views
Valued Contributor

Very nice.  Will the .qvw file be available for download?

2,810 Views
Employee
Employee

Unfortunately we cannot make it available for download this time. We don't own the rights to share the data it contains.

0 Likes
2,810 Views
Luminary
Luminary

These gauges are extensions ?

0 Likes
2,810 Views
Employee
Employee

Hi Pablo,

No they are standard gauges from QV11, combined with layering.

Clint

2,810 Views
Contributor

Very interisting, but too bad, that it is not possible to share this QVW. But perhaps it will be possible to create one with demo data?

Michael

2,810 Views
Valued Contributor II

Very nice, though a small nit pick is that I'd prefer the gauges to describe a complete circle, so the 100% result is more visible at first glance.

EDIT: A teeny tiny nit pick - the 'Visibility' dots aren't quite aligned.

2,810 Views
Valued Contributor

Arturo, thanks for the post.

2,810 Views
New Contributor III

Great example! just one question... what kind of chart are this ones?

2014-05-12_14-33-46.png

I'm trying to recreate them and i'm not getting anywhere near....

Thanks!

0 Likes
2,810 Views
Employee
Employee

Hi Daiana,

Those are trellis combo charts. I'm using 5 expressions as in the picture:

Capture.JPG.jpg

I will try to create a sharable version of the app and post it here, stay tuned.

2,810 Views
Employee
Employee

I see the dots pretty well aligned James, what device and browser are you using?

0 Likes
2,810 Views
New Contributor III

Thanks Arturo!

I think I understand now… is the light gray bar from behind that shows 100% a second chart?

Regards!

Daiana

De: Arturo Muñoz

Enviado el: lunes, 12 de mayo de 2014 15:48

Para: Daiana Rossignol

Asunto: Re: - Dislike gauge charts? You may want to give them a second chance

<http://community.qlik.com/> Qlik Community

Dislike gauge charts? You may want to give them a second chance

new comment by Arturo Muñoz <http://community.qlik.com/people/amz?et=blogs.comment.created> - View all comments on this blog post <http://community.qlik.com/blogs/qlikviewdesignblog/2014/05/09/dislike-gauge-charts-you-may-want-to-give-them-a-second-chance?et=blogs.comment.created#comment-16886>

0 Likes
2,810 Views
Employee
Employee

I forgot to mention that part. The gray background is actually a frame background image you can define it under Colors tab on Chart properties.

0 Likes
2,810 Views
Valued Contributor

The gauges are fast changeable to bar and straight but not back to gauge. See the post from daiana.rossignol for the ones I mean. This is as designed?

0 Likes
2,810 Views
Not applicable

Very clean and gentle for the eyes. A sharable version of the design would make my day.

2,810 Views
Employee
Employee

All,

Attached to the blog post you will find a basic example app with the objects used. I hope this will help you!

Regards

2,810 Views
Valued Contributor

Arturo, thanks for the example.

0 Likes
2,810 Views
Partner
Partner

Thanks!

is it possible to have the .qvw of OEE Analysis app?

Without data..only to copy the layout, colors and so on..! =P

Let me know!

2,810 Views
Not applicable

Thank you.

0 Likes
2,810 Views
Contributor

Hi,

Great Dashboard, Can you please tell how are you using centrediv.qar

Regards,

Irfan

2,810 Views
Partner
Partner

Thank to share your lovely app. I love the OEE Analyisis App

0 Likes
2,810 Views
Not applicable

If anyone is interested, I posted some Flat UI component examples on my blog, with inspiration from Arturo's post above.  Check it out

intuiQlik

2,810 Views
Contributor

hi,

Rebecca have you tried the centreDiv.qar. I tried using it in the Dashboard but its not available in the Extension list. This extension is used the Dashboard to locate the Dashboard in center. So let me know if you know how to use it.

2,810 Views
Not applicable

Arturo, Thanks for sharing this information. Very useful!

0 Likes
2,810 Views
Not applicable

Arturo this is really great, super clean.  Question for you...how do you accomplish different colors in the trellis bar charts without stacking two bars?  To be more specific in A and B, the portion of the bar after the dot is grey.

0 Likes
2,810 Views
Employee
Employee

Thanks Christian.

That grey bar is actually a frame background image, you can set it up in the chart properties, colors tab.

0 Likes
2,810 Views
Not applicable

Ahh I see, very slick.  Could you post that image file for reference?  I got something similar working, but I am having a tough time making the grey bar the exact length for 100.

0 Likes
2,810 Views
Labels