KPI Widget


Apps - Widget - KPI icon.png This type of widget belongs to the Dashboards category in the widget library. It enables you to view performance metrics provided by 3 indicators:

  • The last value of the measure (1).
  • (optional) The up/down trend comparing the last measure value with the previous value. Icons representing the trend and the EVApps - Widget KPI - Tendance Indicator percentage change (2) will be displayed.
  • (optional) A miniature trend chart (3) for all periods EVApps - Widget KPI - Small Bar chart.png or EVApps - Widget KPI - Small Line chart.png.

Notes

   Open url.png  see General remarks on widgets

  • The data source must contain one Period column and at least one Measure: Observed value column.
  • Records from the data source must always be arranged in chronological order. The last period must always be the last record in the data source.
  • This chart can process one measure only.
    • If the data source contains several measures, you should select the one you want using the Data Transformer. If you do not do so, then the first measure will automatically be processed.
  • The trend can be displayed in a bar or line.
  • To improve widget readability:
    • Use Theme > Header/Footer to enter a legend for the indicator value (last value).
    • You can change the color of the indicator value using a quantitative scale whose thresholds are displayed in different colors, e.g. red from 0 to 10, yellow from 11 to 20, green from 21 to 30.
    • The indicator value is limited to 4 figures. For larger numbers, you should define a unit symbol to represent the KPI unit which will be inserted after the number, e.g. thousands (k), millions (m), billions (G). Numbers are rounded up or down to the nearest hundred.
               Example documentation icon FR.png  152200 ==> 152k
    • You can display a percentage with or without decimal places.
    • You can display or hide the trend and the miniature trend chart.

Best Practice big icon.pngBest practice

  • You should use the KPI widget to view the last calculated result for an indicator, its variation compared with the previous calculation and a preview of the trend. This widget is particularly suitable for an EasyVista KPI data source.
  • To compare trends over a period of time using several measures, you should use the Line Chart widget.

Example

You want to monitor changes in the number of incidents over the past 10 weeks (measure). You want to display figures for the last week (1) (last period), the trend compared with the previous week (2) (trend) and the graphic representation over the 10 periods (3) (trend chart).

Data source Kpi widget

with a quantitative scale consisting of 4 thresholds (5 intervals)

Note: The data source contains several measures. You select the measure you want (number of incidents) using the Data Transformer.

EVApps - widget KPI - Example DataSource.png

Download Zip icon.png Download Example (CSV file)

Apps - widget Kpi - Thresholds Expand Example.png

EVApps - widget KPI - Example Chart.png

List of properties

Content

DataSource

Data Source: External data source associated with the widget. 

  • The drop-down list displays all of the data sources available in the app. 
  • To modify the data source or to view its contents, you should click Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define a new data source, click Apps - Add datasource icon.png Add Data Source in the Objects pane.
DataTransformer

Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.

  • Click Setup / Preview Data below the Data Transformer property to open the dedicated window. Open url.png See the description.

Threshold Status: Used to define 1 to  4 quantitative thresholds using a scale of values (2 to 5 intervals). Each new threshold will be displayed in a different color. Thresholds determine the display color of the indicator value.  Open url.png  See the Procedure

DefineThresholds
Reduce display mode Expand display mode

You can define three color segments with two thresholds.

EVApps - widgets Dashboards - Thresholds Reduce.png

You can define five color segments with four thresholds.

EVApps - widgets Dashboards - Thresholds Expand.png

Data

FirstRowContainsDimensionElements

First Row Contains Dimension Elements: Used to specify the structure of the data source by indicating if dimension elements are found in the first column (box is not checked: standard data source structure) or in the first row (box is checked). Note: This property does not affect the behavior of the Data Transformer.

SortByValueDescending

Sort By Value Descending: Used to sort dimension elements in descending order (if the box is checked, from highest to lowest value) or in the order in which they are read in the data source (box is not checked). Note: The order applied is determined by the dimension elements of the first measure in the data source.

Example documentation icon EN.png    You want to display the chart for incidents and requests per employee

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

Box is checked Box is not checked

Sort By Value Descending - Example - Sort value - On.png

The dimension elements of each measure are sorted in descending order.

Sort By Value Descending - Example - Sort value - Off.png

The dimension elements of each measure are displayed according to the sort order of the data source.

MaximumNumberOfData

Maximum Number Of Data: Used to indicate the maximum number of dimension elements to be loaded from the data source for each measure selected in the data source.

Best Practice icon.png  You should use this property to prevent loss of performance when data volume is large.

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be loaded is greater than the number of dimension elements in the data source, all of the data is loaded.
  • To view the data source, click Apps - Edit icon.png next to the Data source property, then click Apps - datasources Properties - Preview button.png button below the Preview property which shows the number of measures and the number of dimension elements for each measure.

Example documentation icon EN.png    You want to display the chart for incidents and requests per employee

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 2
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 1

Sort By Value Descending - Example - Number Data - All.png

All dimension elements are loaded and displayed for each measure, i.e. the three departments.

Sort By Value Descending - Example - Number Data - Part.png

Only the first two dimension elements are loaded and displayed for each measure, i.e. the first two departments.

Sort By Value Descending - Example - Displayed Data - Part.png

All dimension elements are loaded but only the first element is displayed. This corresponds to the Sales department. The Others dimension element groups values from the Marketing and Administration departments.

MaximumNumberOfDisplayedData

Maximum Number Of Displayed Data: Used to indicate the maximum number of dimension elements to be displayed for each measure selected in the data source. This improves chart readability.

Example documentation icon EN.png You want to display the chart for incidents and requests per employee. Open url.png See the Maximum Number Of Data field.

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be displayed is less than the number of dimension elements to be loaded, the Others dimension element will automatically be added to the chart. It will aggregate all of the values from non-displayed dimension elements.

Chart

Show Chart: Used to indicate if the measure trend chart should be displayed (box is checked) or not (box is not checked). Note: Select the type of chart you want using the Chart Type property.

Show Delta: Used to indicate if the measure trend should be displayed (box is checked) or not (box is not checked).

Show Delta Decimals: Used to indicate if decimal places should be displayed for the trend (box is checked ==> ? 63.6%) or not (box is not checked ==> ? 63%).

Chart Type: Type of chart to be displayed. Note: You should first select the Show Chart box to display the chart.

  • Bar Chart: EVApps - Widget KPI - Small Bar chart.png
  • Line Chart: EVApps - Widget KPI - Small Line chart.png

Chart Color: Used to specify the color of the trend chart. Note: By default, the color defined in Theme > Text Color.

Unit: Symbol representing the unit of the indicator value, e.g. $ or € for amounts, located to the left or right of the figure. This is defined in the Unit Position property.

Show Decimals: Used to indicate if decimal places should be displayed for the indicator value (box is checked) or not (the box is not checked).

Unit Position (Left/Right): Used to place the specified unit symbol to the right (box is checked) or to the left (box is not checked) of the indicator value.

    Example documentation icon FR.png Value = 1800; Unit = €

  • Unit Position = Left  ==>  1800 €
  • Unit Position = Right  ==>  € 1800
ChartKpi

Properties of the indicator

Property Description Representation
Element to format: Element (1) Delta: Trend icon and percentage change EVApps - Graphic Properties - Chart Element Kpi.png
(2) KPI: Value of the indicator

PageGeneralFormat
Font Family (Inherit) (1) Font of the text, selected via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Theme

   Open url.png  see Properties description

Procedure: How to define thresholds

ProcedureDefineThresholds

Step 1: Specifying the number of thresholds

1. Click Apps - widgets Dashboards - Thresholds Reduce thumbnail icon.png in the Thresholds Editor Properties > Ranges domain field to switch to the Reduce mode with three thresholds.

2. Click Apps - widgets Dashboards - Thresholds Expand thumbnail icon.png to switch to the Expand mode with five thresholds.
 

Step 2: Specifying the threshold values

1. Enter the value for the threshold of each segment in the Status Thresholds field.
         EVApps - widgets Dashboards - Thresholds Value Select.png 

2. Select the color of each segment.

  • Move the cursor over the threshold color, click EVApps - Color Palet icon 2.png and select the color you want from the Color Picker.
             EVApps - widgets Dashboards - Thresholds Color Select - Picker.png 
  • You can also enter the hexadecimal code of the color directly in the color field.
             EVApps - widgets Dashboards - Thresholds Color Select - Code.png 

3. (optional) Click [ ON ] in Thresholds Editor Properties > Symmetric colors if you want colors to be symmetrical based on the color of the central segment.

Tags:
Last modified by Unknown User on 2017/05/23 10:23
Created by Administrator XWiki on 2014/09/02 11:48

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2019