Giter VIP home page Giter VIP logo

sense-themable-kpi-tile's Introduction

Themable KPI Tile for Qlik Sense

KPI Tile for Qlik Sense with the ability to use themes or to customize background color, comparison indicator, etc.


Table of Contents

(Table of contents generated by [verb])


Purpose and Description

I have created this visualization extension to make it easy to create themable KPI tiles without having to create a custom visualization extension all the time.

You can create your own themes by just modifying a simple .json file (see below for further explanation).

Note:

This extension has some basic built-in logic to be responsive but is by far not that responsive as the native KPI object of Qlik Sense.

Screenshots

Installation

  1. Download the latest version
  2. Qlik Sense Desktop
  • To install, copy all files in the .zip file to folder "C:\Users[%Username%]\Documents\Qlik\Sense\Extensions\ThemableKpiTile"

Configuration

You can use the following properties to define the behavior of this visualization extension:

Data

For every Themable KPI Tile the following options can be set:

  • KPI title - The title of your KPI
  • KPI - The KPI, any numeric or dual value
  • KPI comparison (numeric value) - The numeric value which is relevant to render the positive, negative or neutral color & icon defined in the template.
  • KPI comparison (displayed value) - Put the formatted comparison value here (use e.g. Qlik's num method).

Appearance - Layout

Choose either the Default Layout, Custom Layout or choose one of the Templates.

You can add additional templates by modifying the layouts.json file, located under ./config/ by adding new layouts as follows:

"orange": {
    "name": "Orange",
    "tileBackgroundColor": "#FFB304",
    "titleColor": "#fff",
    "comparisonPositiveColor": "#006600",
    "comparisonNegativeColor": "#CC0000",
    "comparisonNeutralColor": "#333",
    "comparisonPositiveIcon": "▲",
    "comparisonNegativeIcon": "▼",
    "comparisonNeutralIcon": "▶"
  }

In case of choosing "Custom Layout" the following settings can be used:

Contributing

Contributing to this project is welcome. The process to do so is outlined below:

  1. Create a fork of the project
  2. Work on whatever bug or feature you wish
  3. Create a pull request (PR)

I cannot guarantee that I will merge all PRs but I will evaluate them all.

Author

Stefan Walther

License

Copyright © 2015 Stefan Walther

Released under the MIT license.


This file was generated by verb-cli on August 12, 2015.

sense-themable-kpi-tile's People

Watchers

James Cloos avatar Tutu Moses avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.