Qlik Community

QlikView Documents

Documents for QlikView related information.

Announcements
Coming your way, the Qlik Data Revolution Virtual Summit. October 27-29. REGISTER

Color Logic – loading multiple Color schemes

Creator
Creator

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
Master II
Master II

Thank's for sharing

0 Likes
Not applicable

Awesome solution!

Does anyone have a more comprehensive colors.xlsx-document to share? I am struggling a bit to create my own theme...

0 Likes
Explorer II
Explorer II

Hello!! Can I do it in Qlik Sense? the use of colors is very limited.

Regards!

Mary

Creator
Creator

Hola Maria,

You can use this technique in Qlik Sense also and use Colors Custom / By expression from the Properties panel. You can simple use any of the Color functions or Hex values in the expression. e.g. 'ARGB(100,255,93,25)' or '#C4D600'

0 Likes
Creator
Creator

Hi,

Below script generates a full set of colours in variables based on a set of base colour palette (a corporate colour palette) - the inline "RBG_Base" table. The script then uses an equation to generate the RGBs and ARGBs based on a set of opacities (alphas) that you set in inline table "Opacity_Alpha". You can then use these colours in the front-end.

The variables follow the naming convention: "v[GivenColourName][Opacity%]" and "v[GivenColourName][Opacity%]_ARGB". Since ARGBs are translucent, the equation generates the equivalent RGBs as "solid colours".

Please look at script and change the values in the "RBG_Base" and "Opacity_Alpha" tables to understand how the script works.

Hope it helps.

/*

ARGB are translucent colours and therefore each ARGB needs to be converted to a solid RBG to use them in Qlik objects.

The below script requires editing:

  the "Opacity_Alpha" table to insert the colour percentages you want to generate for your colour palette;

  (ii) the "RGB_Base" table to insert all the base colour from which you want to create an array of colour for each level (percentage) of opacity.

  N.B. To edit tables below with the "Inline Data Wizard":

  comment out the "[Table Name]";

  (ii) place cursor somewhere in "LOAD * INLINE" statement;

  (iii) keyboard shortcuts "CTRL+E" (use copy/paste function, if desired); and

  (iv) uncomment "[Table Name]" before reload script.

Below is the Equation/algorithm to convert ARGB to a (solid) RGB:

{[255-Base_RGB_Colour] * [1-(Alpha/255)] + Base_RGB_Colour},

where Alpha = [(Opacity % - as a decimal) * 255]

*/

//Set "Percent Opacities" you want to create the Colour Palette ("Opacity_Alpha" table):

Opacity_Alpha:

LOAD * INLINE [

    %_Opacity_Alpha

    100

    75

    55

    40

    25

];

//Load base colours in RGB ("RGB_Base" table)

RGB_Base:

LOAD * INLINE [

    ColourName, R, G, B

    Grey, 119, 119, 119

  Navy, 19, 71, 148

    Olive, 132, 119, 17

  Pink, 223, 56, 131

  Brown, 121, 74, 0

  Lime, 111, 175, 0

  Green, 44, 144, 0

  Teal, 42, 110, 112

  Blue, 0, 102, 255

  Sky, 0, 164, 217

  Indigo, 100, 74, 174

  Purple, 171, 47, 142

  Red, 212, 8, 4

  Orange, 224, 145, 8

  Yellow, 250, 214, 59

];

FOR vOpacity = 1 TO NoOfRows('Opacity_Alpha')

  LET vOpacity_Alpha = FLOOR((PEEK('%_Opacity_Alpha', vOpacity-1, 'Opacity_Alpha') / 100) * 255);

  LET vOpacity% = PEEK('%_Opacity_Alpha', vOpacity-1, 'Opacity_Alpha');

FinalCodes_ColourScheme:

//SOLIDS COLOURS

LOAD

  'RGB' as Colour_Scheme,

  Colour_Variable,

  ColourCode,

  'LET ' & Colour_Variable & ' = ' & ColourCode & ';' as FullVariableScriptLine;

LOAD

  *,

  RGB(Converted_R_SolidColour, Converted_G_SolidColour, Converted_B_SolidColour) as ColourCode;

LOAD

  'v' & ColourName & $(vOpacity%) as Colour_Variable,

  $(vOpacity_Alpha) as [Opacity - Alpha],

  $(vOpacity%) as Opacity%,

  ROUND(((255 - R) * (1 - ($(vOpacity_Alpha)/255))) + R) as Converted_R_SolidColour,

  ROUND(((255 - G) * (1 - ($(vOpacity_Alpha)/255))) + G) as Converted_G_SolidColour,

  ROUND(((255 - B) * (1 - ($(vOpacity_Alpha)/255))) + B) as Converted_B_SolidColour

RESIDENT RGB_Base;

//ARGB (TRANSLUCENT) COLOURS

Concatenate(FinalCodes_ColourScheme)

LOAD

  'ARGB' as Colour_Scheme,

  'v' & ColourName & $(vOpacity%) & '_ARGB' as Colour_Variable,

  ARGB($(vOpacity_Alpha), R, G, B ) as ColourCode,

  'LET v' & ColourName & $(vOpacity%) & 'ARGB = ARGB(' & $(vOpacity_Alpha) & ',' & R & ',' & G & ',' & B & ');' as FullVariableScriptLine

RESIDENT RGB_Base;

NEXT vOpacity;

DROP TABLE Opacity_Alpha;

DROP TABLE RGB_Base;

//Load/concatenate all VARs (script line) into a table

AllColourVARs:

LOAD Concat(FullVariableScriptLine) as AllColourVARs RESIDENT FinalCodes_ColourScheme;

//insert into a varibale

LET vAllColourVARs = PEEK('AllColourVARs', 0, 'AllColourVARs');

DROP TABLE AllColourVARs;

//Run var string to load VARs into this QVW file

$(vAllColourVARs);

//Purge "vAllColourVARs" variable

LET vAllColourVARs = '';

0 Likes
Creator
Creator

add the below right in on top of ""NEXT vOpacity;" to generate HEX codes (for QlikSense):

//HEX COLOURS

Concatenate(FinalCodes_ColourScheme)

LOAD

  'HEX' as Colour_Scheme,

  Colour_Variable,

  ColourCode,

  'SET ' & Colour_Variable & ' = ' & CHR(39) & ColourCode & CHR(39) & ';' as FullVariableScriptLine

  ;

LOAD

  *,

  UPPER(

  IF(LEN(NUM(Converted_R_HEXColour, '(hex)')) = 1, '0' & NUM(Converted_R_HEXColour, '(hex)'), NUM(Converted_R_HEXColour, '(hex)'))

  &

  IF(LEN(NUM(Converted_G_HEXColour, '(hex)')) = 1, '0' & NUM(Converted_G_HEXColour, '(hex)'), NUM(Converted_G_HEXColour, '(hex)'))

  &

  IF(LEN(NUM(Converted_B_HEXColour, '(hex)')) = 1, '0' & NUM(Converted_B_HEXColour, '(hex)'), NUM(Converted_B_HEXColour, '(hex)'))

  ) as ColourCode;

LOAD

  'v' & ColourName & $(vOpacity%)& '_HEX' as Colour_Variable,

  $(vOpacity_Alpha) as [Opacity - Alpha],

  $(vOpacity%) as Opacity%,

  ROUND(((255 - R) * (1 - ($(vOpacity_Alpha)/255))) + R) as Converted_R_HEXColour,

  ROUND(((255 - G) * (1 - ($(vOpacity_Alpha)/255))) + G) as Converted_G_HEXColour,

  ROUND(((255 - B) * (1 - ($(vOpacity_Alpha)/255))) + B) as Converted_B_HEXColour

RESIDENT RGB_Base;

0 Likes
Master
Master

Great Topic, thanks for sharing!

0 Likes
Creator II
Creator II
Cheenu Janakiram:


Congratulations !

Your post is impressive.

CB.

0 Likes
Creator
Creator

Hi CB,

Glad I could share. Attached is also a QVW that gives front-end tables with the sample colour palette. If script is copy/pasted into a QVW/QVF, then the last "drop table" must be inserted, unless the table is still required for "theming", as per this original post. !

Quick note: since RGB and ARGB are LETs and the HEX are SETs, the way they are called for in front-end differs as the latter is a varchar string.

Cheerio,

C  ;o) !

P.S. Good grief! I haven't used the boards in years, how complicated has it become to share/upload a QVW?

0 Likes
Not applicable

Hi,

Do You can aply this on Qlik sense?

Regards.

0 Likes
Version history
Revision #:
1 of 1
Last update:
‎2014-08-05 02:18 AM
Updated by: