Skip to content

alner/qsSimpleKPI

Repository files navigation

Simple KPI

Simple KPI component for Qlik Sense.

Consider to use PowerKPI component if you need supported trusted extension component with rich functionality.

It can show one or several KPI using measures and one dimension (selectable, optional, it can show up to 125 measures and if it is used no more then 80 dimensions lines). Supports adaptive design, conditional css colors, conditional icons, infographic (with constraints, no more than 1000 icons per measure), configurable number of kpis per line, several predefined sizes, custom styles (CSS). Each measure can have a link to another sheet.

Simple KPI

Video: Using the simple KPI extension in Qlik Sense - Qlik Tuesday Tips and Tricks

Using the simple KPI

Installation

Download build/qsSimpleKPI.zip, upload to qlik server or extract to appropriate folder.

Qlik Sense Desktop: unzip to a directory under [My Documents]/Qlik/Sense/Extensions.

Qlik Sense Server: import the zip file in the QMC.

Demo

Download SimpleKPIDemo.qvf

Example

You can easily add several kpis, group them accordingly and apply different ui settings (different font sizes, alignments, styles, icons, links to different sheets, responsive options).

Example

You can embedded Master Visualizations into the simple kpi object.

Example

You can add measure with some fake value (for example, using the following expression: ='Drag and Drop here'), then drag and drop master visualization into the value region or you can insert object id into the "Visualization" property for each measure.

Video: SimpleKPI plus Line Chart Tutorial.

Simple KPI plus Line Chart Tutorial

Example

Infographic mode allows you to show appropriate number of icons (depends on measure, with constraints, no more than 1000 icons per measure).

Example

Configuration

Appearance

You can set icon for value or label (full icons set included).

Example

Measures

Conditional colors

Colors

Conditional colors

Conditional icons

Conditional icons

Infographic mode

You can set "Infographic mode" option for each measure. In such case expression determines icons quantity (with constraints, no more than 1000 icons per measure).

Example

Measure alignment

Example

Calculation condition

Example

Styles

"Background color" property allows to set background color of the object using expression.

Example

All KPIs can be vertically aligned.

Example

You can fully customize kpis using "Styles (CSS)" property. For more details see SimpleKPIDemo.qvf ("Styles" sheet).

Example

For example, you can change font-family, font-size, background color, text color and so on, using "Styles (CSS)" property for appropriate measure.

@import url('https://fonts.googleapis.com/css?family=Indie Flower');
@import url('https://fonts.googleapis.com/css?family=Fredoka One');

& .label * {
 font-family: 'Fredoka One';
 font-size:  300%;
}

& .statistic-1  .value * {
 background-color: green;
 font-family: 'Indie Flower', sans-serif;
 color: white !important;
}

& .value * {
 background-color: yellow;
 font-family: 'Indie Flower', sans-serif;
 font-size: 900%;
 color: red !important;
}

For example, you can import "Font Awesome" and use it. Just copy and paste the following styles into "Styles (CSS)" property.

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');

Just copy and paste appropriate classes (see icons) into the "Icon" measure's property. For example, copy and paste the following into the "Icon" property.

fa fa-calendar

Font awesome

Maintainers

alner

License

MIT