KPI Widget
This widget belongs to the Dashboards category in the widget library. It enables you to view performance metrics using three elements:
- The last value of the measure.
- The trend using
icons by comparing the last value of the measure with the previous value.
- A miniature trend chart,
or
.
Notes
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.
Best Practice
- Use the KPI widget to:
- Display trends defined in Service Manager, by pointing the widget to an EasyVista KPI data source.
- View the last result of the calculated trend, the change compared with the previous result and a preview of the trend.
- Display data in chronological order.
- To compare trends over a period of time using several measures, you should use the Line Chart widget.
To improve widget readability:* Use Theme > Header/Footer to enter a legend for the trend value (last value).
- Use the quantitative scale to specify thresholds to highlight the trend value.
example Trend displayed in:
- Green if the value is between 21 and 30
- Orange if it is between 11 and 20
- Red if it is between 0 and 10
- The trend value is limited to four figures. For larger numbers, you should define a unit symbol to represent the KPI unit.
example
- thousands = (k), millions = (m), billions = (G)
- 152200 ==> 152k
- You can display a percentage with or without decimal places.
- You can display or hide the trend and the miniature trend chart.
- Use the quantitative scale to specify thresholds to highlight the trend value.
Example
You want to monitor changes in the number of incidents over the past 10 weeks (measure) and display:
- The value for the last week = last period (1)
- The trend compared with the previous week = trend (2)
- The graphic representation over the 10 periods = trend chart (3)
Data source | KPI widget | |
---|---|---|
|
|
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
. The
button below the Preview property shows the number of rows (max. 15) and columns extracted.
- To define a new data source, click
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.
See the description.
ThresholdsStatus
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 trend value.

DefineThresholds
Reduce display mode | Expand display mode |
---|---|
You can define three color segments with two thresholds. |
You can define five color segments with four thresholds. |
Chart
Show Chart: Used to indicate if the measure trend chart should be displayed (box is checked) or not (box is not checked). If displayed, 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) or not (box is not checked).
Chart Type (Note: Only if the Show Chart box is checked): Type of chart to be displayed.
- Bar Chart: Bar chart
- Line Chart: Line chart
Chart Color: Used to specify the color of the trend chart.
- By default, the color is the one defined in Theme > Text Color.
Unit: Unit of the trend value.
- You can define if the unit should be found to the left or right of the value using the Unit Position property.
- Numbers are rounded up or down to the nearest hundred.
example
- $ or € for amounts; thousands = k; millions = m
- 152200 ==> 152k
Show Decimals: Used to indicate if decimal places should be displayed for the trend value (box is checked) or not (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 trend value.
example Value = 1800; Unit = €
- Unit Position = Left ==> 1800 €
- Unit Position = Right ==> € 1800
Format of trends
ChartKpi
Property | Description | Representation | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Element | Object to format | ![]() |
||||||||||||||||||||
(1) | Delta: Trend icon and percentage change | |||||||||||||||||||||
(2) | KPI: Value of the indicator | |||||||||||||||||||||
Graphic properties of the selected object
PageGeneralFormat
|
Theme
See the description of properties.
Procedure: How to define threshold values
ProcedureDefineThresholds
Step 1: Specifying the number of thresholds
1. Click in the Thresholds Editor Properties > Ranges domain field to switch to the Reduce mode with three thresholds.
2. Click 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.
2. Select the color of each segment.
- Move the cursor over the threshold color, click
and select the color you want from the Color Picker.
- You can also enter the hexadecimal code of the color directly in the color field.
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.