Qlik Community

QlikView Documents

Documents for QlikView related information.

Announcements

Breathe easy -- you now have more time to plan your next steps with Qlik!
QlikView 11.2 Extended Support is now valid through December 31, 2020. Click here for more information.

Enhance your charts by creating shadow mask effects

dfoster9
Valued Contributor

Enhance your charts by creating shadow mask effects

I thought I would share another method for creating great looking visualisations in QlikView. These are the type of effect you will be able to create.

qv ring.pngqv triangle.png

You do not need to be a graphics whizz to create these (or I wouldn't have been able to do it) but you will need:

  1. A QlikView application with a single colour background (no gradients or multi-coloured images).
  2. Vector graphics drawing software. If you have adobe illustrater then lucky you. I dont so I use Inkscape. Draw Freely which does the job admirably.

Part 1: Create your shadow mask.

The following steps are used to create the ring shadow mask shown above.

  1. In Inkscape create a new document and change its properties docprops.pngto the size of mask you need. I did the ones above at 256 by 256 pixels.
  2. Now draw a square drawsquare.pngand then, when you change to the selector arrow tool again, set its position and size so that it fills the whole document. (X=0 Y=0 Width=256 Height=256)
  3. Set the colour of the square to match the background of your intended QlikView application. I have chosen pure white in this example.
  4. Now draw a circle draw circle.pngroughly in the middle of the document. You can now set its size and position so it is absolutely centralised (X=32 Y=32 Width=192 Height=192)
  5. You now want to change the stroke and fill properties of the circle. You can do this by double click the stroke and fill boxes in the bottom left.strokefill.png
  6. Set the fill to 'nothing' (the box with the cross through it)
  7. Set the stroke to 'solid colour' and set the stroke style width to 24. You should end up with a solid ring of colour.
  8. Highlight the circle and in the Path menu select 'Stroke to Path' stroke to path.png. This converts the ring of colour into a vector drawing all of its own.
  9. Stay with me just a couple more steps :-)
  10. Now select the ring and the square together and in the Path menu select 'Difference' difference.pngthis 'deducts' the ring from the square effectively cutting the ring out of the square. If you went for a white square like me you will just see a white square. Just temporarily change the colour of the square to see the cut out ring shape.
  11. Now from the Filters menu select the Shadows and Glows submenu and 'Drop Shadow'. drop shadow.png
  12. Apply the standard default shadow and have a nearly complete ring shadow mask.
  13. The shadow does not go all the way round so I add a thin grey hollow circle around the outer edge of the ring just to define the edge of the ring. The result looks like thisring.png (note: By default, Inkscape uses a white background that will be exported as a transparent background).
  14. Last step is, from the File menu select export the bitmap and export the page as a PNG file. It is important to pick the 'page' option as otherwise you might pick up the drop shadow effect on the outside of the square.

Part 2: Using the mask in your QlikView document.

The example above uses a simple circular gauge under a text box showing the shadow mask to achieve the desired effect.

  1. Create a circular gauge with the percentage expression. Use the following settings
    • Delete segment 2
    • Change segment 1 colour to desired colour (I went with a midtone blue)
    • Set 'fill to value'
    • turn off scale
    • turn off autowidth segments
    • hide outlines
    • hide boundaries.
  2. Turn off the gauges caption and borders and title.
  3. Now add a text box with the ring shadow as a background image.
  4. Position the text box over the gauge.
  5. You will need to do some manually fiddling to get the gauge and the shadow mask to line up sweetly but the finished effect should look like this: qv ring.png

Hope you found this helpful.

Attachments
Comments
MVP & Luminary
MVP & Luminary

Hi David,

The effect of these overlays looks impressive.  The doughnut pie allows for one of the notable omissions from the QlikView set of charts to be created.  It's worth mentioning that when the overlay is on you will not be able to make selections on your charts as before.  Also, I have a slight issue with the triangular visualisation - the bar chart behind it will not be aware of the fact that it will be going to a point - so the height of the bar will be correct for the data, but the area of the view will be significantly skewed by the much wider base to that of the point.

I can see lots of cases where this technique could be applied well though.  Thanks for sharing!

Steve

dfoster9
Valued Contributor

Hi Steve thanks for the comments. The intention would be for these visualisations to be used on a summary dashboard to show performance against a KPI. When I use these, the 'click' behaviour I want is to take the user to the related detailed analysis sheet, so having the text box over the chart works nicely.

The point about the triangle is a good one. Being a clean geometric shape means you could mistakenly think it is a funnel chart (actually, I wonder if you could use a funnel chart). I showed that triangle to illustrate that the technique works with many shapes and even icon-style graphics.

car_progress.png

Couldn't resist :-)

MVP & Luminary
MVP & Luminary

Putting a text area over a chart to use it for navigation rather than drill is a useful trick anyway - so why not enhance your graphics in the process!  I don't think anyone is going to look at a car and try and compare the volume of the boot to the volume of the body of the car - but I do think the triangle is a particular case where the mind would expect the volume to be correct.  Saying that, if you showed a triangle with just the bottom third (by height) filled and the legend 50% on it whilst more accurate - someone would probably say that it is not half way up.  But, with the example you pictured there is quite clearly much less than 25% of the triangle still not filled.

This stuff is all fascinating, but I tend to avoid these kind of considerations by sticking to rectangles. 

Steve

http://www.quickintelligence.co.uk/

dfoster9
Valued Contributor

You are right the number should read 90%. Serves me right for just mocking it up.

Not applicable

Hi David,

It seems very interesting feature. But after installing that s/w, how it get integrates to Qlikview?

Is it something which i need to integrate to qlikview or its a complete seperate tool?

Please guide me through it.

Thanks!!

Regards,

Yojas

dfoster9
Valued Contributor

Hi Yojas

There is no integration. Inkscape is just software for making image files that we can then use in QlikView.

Apologies if i did not make that clear.

Not applicable

One most commonly asked requirement from lot of prople is to show a pie chart as the one attached. In my attachment, i have used the gauge chart along with a rounded corner text box ( textbox converted to circle by playing with the corner radius and squareness option in the layout tab. Where in Corner radius block select fixed and set it to 95 pts and squareness to 2).  So use a  Gauge chart. Go in the style tab and select the 1st style. Go in presentation tab and un-check show scale textbox. Set Angle Span to 360 degree. Set cylinder thickness to 20. In indicator block set mode to 'no indicator'(which will remove the needle) . In caption tab uncheck 'Show caption'. In layout tab uncheck 'Use borders'. Goin colors tab and set transparency to 100%. Apply your expressions and set the lower and upper bound for the gauge as required. To make the chart look better resize the circular textbox and bring it to the center of the gauge chart. pls refer the attached image for more clarity.

untitled.png

dfoster9
Valued Contributor

Hi Rohan,

They look very cool. I have had some problems with how the ajax clients renders rounded corners so I tend to stay away from, but I will have an experiment.

thornofcrowns
Valued Contributor II

Nice work, I'll have to play about with this too.

Not applicable

Hi Rohan, I am trying to replicate this your example , but I'm unable to create the circular textbox.

Could you please help?

Version history
Revision #:
1 of 1
Last update:
‎10-24-2013 05:16 AM
Updated by: