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.