Vizlib KPI Designer

Vizlib KPI Designer is a new approach to a pixel-perfect design of your dashboards for Qlik Sense. Introducing a new layering concept, you have the power to combine charts, metrics, icons into your very own KPI object. With full control over x/y positioning with the possibility to overlap layers, you can practically achieve any desired layout.

Vizlib KPI Designer
Vizlib KPI Designer
Vizlib KPI Designer
Vizlib KPI Designer
Vizlib KPI Designer
Vizlib KPI Designer
Vizlib KPI Designer

Vizlib KPI Designer

Customize and create your very own branded KPI object using Layers such as:

  • Text
  • Icon
  • Image
  • Line
  • Barchart
  • Linechart
  • Bulletchart

Text Layer:
Vizlib KPI Designer
Key Layer for any KPI Object as you can add any metric (or supporting metric) of your choice using dynamic Qlik expressions or variables. You can also use the text layer for titles or descriptions.

Icon Layer:
Vizlib KPI Designer
Icons can supplement metrics to help indicate whether something is good or bad, allowing you to communicate your message more effectively. They also represent an important design aspect of your KPI, greatly improving the look and feel of your dashboard.

Image Layer:
Vizlib KPI Designer
One image says more than a thousand words. Jokes aside, the image layer gives you the opportunity to either contextualize your KPI, add more information to it, or simply give the KPI a branded signature by using your team's or company's logo.

Line Layer:
Vizlib KPI Designer
Lines in the Vizlib KPI Designer give you the ability to better organize your KPI and segment different underlying metrics to achieve a better look and feel.

Barchart Layer:
Vizlib KPI Designer
With the Barchart layer you can add your very own customized bar chart to the KPI which can be used to communicate additional information much more compellingly than a single KPI metric by its own. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

Linechart Layer:
Vizlib KPI Designer
Same as with the bar chart, with the Linechart layer you can add your very own customized line chart to enrich your KPI with trend or time series data. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

Bulletchart Layer:
Vizlib KPI Designer
The Bulletchart layer is a powerful visual add-on to any KPI as it nicely captures targets vs current performance.

Actions:
Vizlib KPI Designer
Actions add tremendous power to the Vizlib KPI Designer by permitting you to enrich the user experience with dynamic interactions. On clicking the KPI, any individual layer, your user can make selections, clear selections, and navigate to pre-defined sheets which can become an incredible value-add to your Qlik Sense dashboards. Actions can be added on an individual layer level or as a global setting applied to the whole KPI object.

Layer visibility:

Vizlib KPI Designer
Visibility Condition on individual layer level can becomes useful if you only want to display certain parts of the KPI depending on calculation conditions or variables. A typical use case would be the showing of a warning icon when a certain KPI threshold is exceeded.

Pre-sets:
Vizlib KPI Designer
Too lazy to create your own KPI from scratch? Use one of our eight available pre-sets which quickly sets up your standardized KPI layers for you to implement, adjust or modify. In the future, you will be able to generate your own custom pre-sets for your Vizlib Library.

Download Vizlib KPI Designer

Up to 5 users free.

Terms & Conditions

Vizlib KPI Designer

Readme

  1. Installation
    1.1 Qlik Sense Server
    1.2 Qlik Sense Desktop
  2. Features
  3. Extension Settings
    3.1 Presets
    3.2 Layers
    3.2.1 Text Layer
    3.2.2 Icon Layer
    3.2.3 Image Layer
    3.2.4 Line Layer
    3.2.5 Barchart Layer
    3.2.6 Linechart Layer
    3.3 Add-ons
    3.4 Appearance
    3.5 Global Actions
    3.6 Interactivity
  4. What's new?
  5. Known Limitations
  6. Feedback & Bug Reporting
  7. Terms & Conditions


1. Installation

1.1 Qlik Sense Server
  1. Download the .zip file from the link provided your eMail.
  2. Visit the QMC on of your Qlik Sense Server.
  3. Import the .zip file in your extension tab.
  4. Open Qlik Sense and add the 'Vizlib KPI Designer' extension to a sheet.

1.2 Qlik Sense Desktop
  1. Download the .zip file from the link provided your eMail.
  2. Extract the .zip file to your default extension folder (documents/qlik/sense/extensions) in Qlik Sense.
  3. Open Qlik Sense and add the 'Vizlib KPI Designer' extension to a sheet.

2. Features:

  1. Choose from seven custom layers to create your very own Vizlib KPI Object
  2. Rich customization and formatting options for each layer including styling and layout options
  3. Support for (multiple) Actions to improve the user experience and user interactivity, either on layer level (different actions on different layers) or as a global settings
  4. Choose from a list of pre-defined pre-set to speed up your Vizlib KPI Object Design process
  5. Pixel-perfect Positioning of layers, inclusive responsive design. Overlaying of layer allows for 100% design accuracy.
  6. Dynamic visibility conditions to show or hide layers based on Qlik expressions or variables.
  7. Up to 5 users for free.


3. Extension Settings:


3.1 Presets

Vizlib KPI Designer
Use one of our eight available pre-sets which quickly sets up your standardized KPI layers for you to implement, adjust or modify. In the future, you will be able to generate your own custom pre-sets for your Vizlib Library.

Simply select one of the available pre-set and the Vizlib KPI Designer will pre-populate all layers together with their properties, formatting settings and layout position. Be careful when applying new presets as existing layers get replaced

3.2 Layers

The Vizlib KPI Designer supports an unlimited number of layers which can be added to the canvas.

Vizlib KPI Designer

3.2.1 Text Layer

Vizlib KPI Designer
Key Layer for any KPI Object as you can add any metric (or supporting metric) of your choice using dynamic Qlik expressions or variables. You can also use the text layer for titles or descriptions.

Vizlib KPI Designer

  • Text
    Here is where you can add the main text expression. You can use a static text, Qlik expressions or variables.
  • Format as number
    If your text expression is a metric, you will have the option to format the resulting metric with the format of your choice.
  • Currency Format
    With this setting, you can add a currency of your choice (or any text character) as a pre or suffix.
  • Indicators
    Similar to Vizlib Table and Vizlib Pivot Table, you can supplement your measures with dynamic indicators. These are icons which are changing depending on a pre-defined threshold, e.g. when a value is above or below 0.
  • Horizontal Alignment
    Horizontally position your text within its layer borders left/centrally/right.
  • Vertical Alignment
    Vertically position your text within its layer borders top/middle/right.
  • Wrap Text
    Wraps the text into a second line if it exceeds the available space.
  • Font Color
    Color the text in any font color you like. Supports qlik expressions.
  • Font Style
    Style your text using bold, underling or italic.
  • Font Family
    Choose a font family for your text.
  • Auto Font Size
    You can choose to either use a fixed font size for your KPI metric or to responsively adjust its size.
  • Background Color
    Choose a background color for your text KPI.
  • Layer Borders
    Here you have the possibility to add and customize the layer borders of your text layer.
  • Actions
    Add one or multiple actions to your layer which can executed when the user clicks on it.
  • Position
    Here you can manually define the individual coordinates, height and width of your layer using input boxes.
  • Visibility
    Show/Hide Layer depending on Qlik expressions or variables.
3.2.2 Icon Layer

Vizlib KPI Designer
Icons can supplement metrics to help indicate whether something is good or bad, allowing you to communicate your message more effectively. They also represent an important design aspect of your KPI, greatly improving the look and feel of your dashboard.

Vizlib KPI Designer

  • Icon
    Choose the icon here, either by selecting it from the available list of icons or by defining the icon text code.
  • Font Color
    Selects the color of the icon.
  • Auto Size
    You can choose to either use a fixed font size for your icon or to have it adjust size based on the available space.
  • Background Color
    Here you can choose the background color for your icon layer.
  • Layer Borders
    Here you have the possibility to add and customize the layer borders of your text layer.
  • Actions
    Add one or multiple actions to your layer which can executed when the user clicks on it.
  • Position
    Here you can manually define the individual coordinates, height and width of your layer using input boxes.
  • Visibility
    Show/Hide Layer depending on Qlik expressions or variables.
3.2.3 Image Layer

Vizlib KPI Designer
One image says more than a thousand words. Jokes aside, the image layer gives you the opportunity to either contextualize your KPI, add more information to it, or simply give the KPI a branded signature by using your team's or company's logo.

Vizlib KPI Designer

3.2.4 Line Layer

Vizlib KPI Designer
Lines in the Vizlib KPI Designer give you the ability to better organize your KPI and segment different underlying metrics to achieve a better look and feel.

Vizlib KPI Designer

3.2.5 Barchart Layer

Vizlib KPI Designer
With the Barchart layer you can add your very own customized bar chart to the KPI which can be used to communicate additional information much more compellingly than a single KPI metric by its own. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

Vizlib KPI Designer

3.2.6 Linechart Layer

Vizlib KPI Designer
Same as with the bar chart, with the Linechart layer you can add your very own customized line chart to enrich your KPI with trend or time series data. As with any of our charts, you have full control over colors, style and layout of the bar chart. Tip: Use it as a background with added opacity.

Vizlib KPI Designer

3.2.7 Bulletchart layer

Vizlib KPI Designer
The Bulletchart layer is a powerful visual add-on to any KPI as it nicely captures targets vs current performance.

Vizlib KPI Designer

3.3 Data Handling

Data Handling section gives you control over when the Pivot Table is calculated and whether you wish to display or hide zero values.

Vizlib KPI Designer

  • Show Zero Values
    This setting has no effect on the Vizlib KPI extensions.
  • Calculation Condition
    Only calculates the Vizlib KPI Object if this condition is true.
3.4 Appearance

In the Appearance section you can style the overall KPI object. Aside from adding a standard Qlik title, sub-title and footnote, you can also modify the background colors and the borders of the object.

Vizlib KPI Designer

3.5 Global Actions

In the Vizlib KPI Designer, you have the possibility to either define actions on a layer level or on an object level. In this part of the property panel, you can add one or multiple actions which apply to the whole object. Actions defined here will override individual layer actions.

3.6 Interactivity

The interactivity section of the property panel lets you control how the user, and you yourself as a developer, interact with the KPI object.

Vizlib KPI Designer

  • Snapping
    Snapping is a design feature which helps you better position and align your layers on your canvas by enabling layers gravity and alignment guides. It will auto-position itself to be horizontally and vertically aligned.
  • Rescale Layers on Resize
    To ensure your KPI object works on different screen sizes alike, all layers will be adjusted and rescale after resizing the extension object. All layers will be adjusted proportionally to the new object size. If this setting is disabled, the layer sizes will remain static.
  • Design mode
    When design mode is activated, in edit mode, all layers will have their borders visibly displayed at all times, and not only when you hover over them or select them.
  • Fullscreen Icon
    Expands the extension object to full screen.
  • Snapshot Icon
    Takes snapshots of the extension which can be used for story mode.
4. What's new?:

v1.1 20/09/2018:

New Features:

  • Added sorting (by dimension & measure) in the Line and Bar chart layers.

Bug Fixes:

  • Changing axis label font size wasn't working on the bullet chart layer
  • Borders settings were not getting applied on the Bar chart layer
  • Missing some axis values on the bullet chart layer.
  • Fixed some rendering issues on IE
  • Fixed unused top/bottom margin in layers
  • Fixed css conflicts between Vizlib KPI & Vizlib Pivot Table
  • Fixed some css cuts on the text layer in Firefox
  • Right click was not showing the layers menu in some screen sizes & browsers.


v1.0 29/08/2018:

  • First Release



Coming Soon:

  • Boxplot Layer
  • Grouping of Layers
  • Hover Styling
  • Tooltips
  • Wizard Mode
  • Preset wizard


5 Known Limitations
  • Vizlib KPI Designer does not support native PDF/PPT printing.


6 Feedback and Bug Reporting

Feel free to raise your feedback or bugs found on the page below:
www.vizlib.com/feedback

Contact us:

support@vizlib.com

7. Terms & Conditions

Terms and Conditions
2018 © Vizlib Ltd. - All rights reserved.