Qlik Community

QlikView Documents

Documents for QlikView related information.

Color Logic – loading multiple Color schemes

ses
Contributor

Color Logic – loading multiple Color schemes

Appropriate use of color in an application can not only improve its appeal but help in its adoption and understanding. QlikView provides the flexibility to define colors for many elements but in doing so it can be tricky to keep track of what colors have been used, and a lengthy process to change the palette if a new scheme is required.

Imagine how great it would be to change the palette by simply loading your palette and selecting the required theme from a list box? By defining the colors by labels and defining the values in the load you wont have to look up previously used RGB settings or change every object when you want to change the scheme. This is a really simple method which can be extended once you’re used to it.

This is how it’s done

Img1.png

  • Create an Excel Sheet with required RGB or ARGB values against each of the Color Labels you want to use. I specify Colors1-18 for the charts and some basics such as Caption Colors, Highlights, BarBackgrounds. I use the HidePrefix ‘_’. I also prefer to define the Theme Names as columns (easier for copy/paste from palette creation websites like IWantHue) and transpose during the Load.
  • Include your ColorTheme load in the script.  Remember to use Transpose to switch column/row if necessary. Set HidePrefix=’_’ so these colors don’t clutter your field listing.

Img2.png

  • Make your _ThemeName list box available (usually on a hidden sheet) and ensure there’s Always One Selected Value
  • Use your colors in your application as Calculated values with the easy terminology $(=_CaptionColor)
  • I’ve used the Advanced Color Map in the chart to define all the colors as calculated values. Remember to update your default so you can Retrieve it anytime

Img3.png

  • Don’t forget the ability to double-click on Format Painter to keep it active whilst you update all your other objects to utilize the calculated colors you’ve just setup

That’s it!  It takes less time than you think (certainly no more than typing in RGB values). And once established you can enjoy seeing your apps in a new light at the flick of a selection.

Img4.png

Extending this to multiple palettes

Once established you can have a number of palettes loaded and use Set Analysis or setup Alternate States (my preferred method) to help you pick colors from the required scheme

$(=$(=only({<_ThemeName={'BlueTheme'}>}_Dark)))

$(=$(=only({BlueTheme}_Dark)))

Color…Fast

Having a range of palettes available without having to redefine them can dramatically improve your productivity as there is no need to constantly lookup required colors.

You can set different themes for intensity, such as Dark, Medium, Light so that the same colors can be referenced with differing saturation. This is useful when you want to keep colors consistent across dimensions but use the higher intensity for fine point charts or thin bars where they would be difficult to see otherwise, medium intensity for bars or to highlight values, and light when the data is supportive but color still has meaning.

You can use them to quickly pick out the correct colors for the ColorMix wizard, perhaps to setup TeamA ColorMixed from Dark to Light in the {BlueTheme} but use {RedTheme} for TeamB.

It becomes a simple matter of picking your palette and the reference, rather than searching for the RGB value.

Attachments
Comments
Partner
Partner

This is awesome! I've been waiting for something like this to come along.

Everything I have seen and done was piecemeal typing RGB values everywhere and not leveraging the ETL as much as this.

Thanks!

0 Likes
male_carrasco
Contributor

Fantastic!!!

0 Likes
carbal1952
Contributor II

Wonderful post !

0 Likes
Not applicable

Great post!

0 Likes
emptyfish
New Contributor III

Hi Steve

This is awesome, many thanks for sharing with the community.

0 Likes
Luminary
Luminary

Great post Steve. Always on the lookout for good colour pallets! Bookmarked and will be using these in the future.

Richard

0 Likes
bgarland
Contributor III

Steve, I went to the two web sites you referenced but I don't see how to use them to create complete color palettes like the examples you posted. Can you post a quick explanation please?

0 Likes
ses
Contributor

Hi Brian,

These websites (and there are numerous others) allow you to create color palettes. In http://tools.medialab.sciences-po.fr/iwanthue/ you can select the number of colours to create, alter the colour range, and hit 'Make a palette' and it will generate the required scheme, detailing the colors and various different code references below. (Note that this website doesn't work in IE for me - I use Chrome). Use the 'RGB list for CSS' and copy paste these values into the spreadsheet. Define the scheme name as the column header, the labels and the RGB values and use this file to load into QlikView.

http://www.colorbrewer2.org/ works in a similar way but you will need to select RGB from the dropdown and contain the values listed in rgb() when you include them in the spreadsheet.

I hope this helps ...

Not applicable

Excellent!  Thanks

0 Likes
bgarland
Contributor III

Thanks Steve. I've tried a few different methods but have settled on your method. I am adding a modified blue theme that we are using for our primary Sales app. I encourage others to upload color themes that they have set up for their apps.

Theme NameBlue
%Backgroundrgb(255,255,255)
%BorderColorrgb(125,202,235)
%ButtonColorrgb(125,202,235)
%ButtonColorActivergb(15,157,217)
%ButtonTextColorrgb(0,0,0)
%ButtonTextColorActivergb(0,0,0)
%CaptionColorARGB(0,0,0,0)
%CaptionColorActiveARGB(0,0,0,0)
%CaptionTextColorrbg(15,157,217)
%CaptionTextColorActiverbg(15,157,217)
%HelpBackgroundrgb(140,198,64)
%HelpBorderrgb(0,0,0)
%HelpTextrgb(0,0,0)
%HighlightARGB(255,196,214,0)
%ScrollBackgroundrgb(224,224,224)
%ScrollButtonrgb(199,199,199)
%TextBoxrbg(15,157,217)
%TextBoxBackgroundARGB(0,0,0,0)
%TransparentARGB(0,0,0,0)
%UtilityBackgroundrgb(195,224,210)
%Blackrgb(0,0,0)
%Whitergb(255,255,255)
%Redrgb(255,0,0)
%Bluergb(0,0,255)
%Greenrgb(0,255,0)
%VLightGrayARGB(255,202,203,204)
%LightGrayARGB(255,159,161,164)
%MediumGrayARGB(255,126,128,131)
%DarkGrayARGB(255,95,96,98)
%Color1rgb(8,64,129)
%Color2rgb(8,104,172)
%Color3rgb(43,140,190)
%Color4rgb(78,179,211)
%Color5rgb(123,204,196)
%Color6rgb(168,221,181)
%Color7rgb(204,235,197)
%Color8rgb(224,243,219)
%Color9rgb(247,252,240)
%Color10rgb(8,64,129)
%Color11rgb(8,104,172)
%Color12rgb(43,140,190)
%Color13rgb(78,179,211)
%Color14rgb(123,204,196)
%Color15rgb(168,221,181)
%Color16rgb(204,235,197)
%Color17rgb(224,243,219)
%Color18rgb(247,252,240)
%OthersARGB(255,126,128,131)
%Totalrgb(0,0,0)
Version history
Revision #:
1 of 1
Last update:
‎2014-08-05 02:18 AM
Updated by:
ses