This article is outdated, you can access the most current version here: https://support.onelogic.de/en/support/solutions/articles/77000483964-kpi-elements
Article Content
KPI Element
type = "kpi"
The KPI Element is used to display one or more KPIs.
Properties
| Property | Type | Description | Example Value |
| id | string | The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts. | "myElementId" |
| source | string | The id of the Datasource to take the data from. | "myDatasourceId" |
| config | string | The actual KPI config. It can either be completely copy-pasted (including mock-data), or you can remove the data part, and instead use the source (configured outside of the highcharts config). | "config": { "title": "Test KPI Visualiser", "subTitle": "My Untitled KPI", "footer": "footer", "layout": { "orientation": "horizontal", "large": false }, "kpiName": { "column": "Target Column" }, "unit": { "text": "Dollar" }, "value": { "column": "Target Column" } } |
| config. color | string | Property to change the color of the KPI value. | "color": "green" // or "color": "rgb(255, 255, 255)" //or "color": "rgba(255,255,255,0.9)" |
| config. conditional Colors | array | Conditions to set different colors to KPI values (type sensitive). | "conditionalColors": [ { "value": "red", "conditions": { "equal": 25, "notEqual": 45, "greater": 25 } }, { "value": "black", "conditions": { "less": 25, "greaterOrEqual": 100, "lessOrEqual": 15 } }, { "value": "lightblue", "conditions": { "in": [ 1, 25, "ABC" ], "notIn": [ 35, 40, "DEF" ] } }, { "value": "blue", "conditions": { "regex": "[^0-9]" } } ] |
| config. layout | object | Used to apply a horizontal or vertical layout and a small or large size to the KPI Element. | "layout": { "orientation": "horizontal", "large": false // or "small": true } |
Example
"elements": [
{
"id": "kpi-test",
"type": "kpi",
"source": "raw_testSource",
"config": {
"title": "Test KPI",
"subTitle": "My Untitled KPI",
"footer": "footer",
"layout": {
"orientation": "horizontal",
"large": false
},
"kpiName": {
"column": "Categories"
},
"unit": {
"text": "Dollar"
},
"value": {
"column": "Berlin"
}
}
},
{
"id": "frtTableSector",
"type": "table",
"source": "raw_testSource"
},
{
"id": "frtTableCountry",
"type": "table",
"source": "raw_testSource",
"syncSets": [
{
"syncSetId": "test",
"applyFilters": true,
"publishFilters": true
}
],
"config": {
"columns": [
{
"name": "Country"
}
]
}
},
// .. more elements
]
Progress KPI Element
type = "progressKpi"
With this Element you can add a KPI which shows the current progress.
Properties
| Property | Type | Description | Example Value |
| id | string | The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts. | "myElementId" |
| type | string | Type of your Element. | "progressKpi" |
| source | string | The id of the Datasource to take the data from. | "myData |
| config | object | The configuration of a progress KPI Element. It contains all options that can be set to render your progress KPI. If you set "column" and "number" the number will be displayed. | "config": { // KPI orientation "orientation": "horizontal || vertical", // Color of progress bar and value "color": "red", // KPI title "title": "Progress KPI", "kpiName": { // Name of the displayed KPI "text": "First KPI" // Column with the name // of the displayed KPI "column": "Col3" }, "value": { // Value column of the KPI "column": "Col1", "number": 40 } } |
| config. conditional Colors | array | Conditions to set different colors to KPI values (type sensitive). | "conditionalColors": [ { "value": "red", "conditions": { "equal": 25, "notEqual": 45, "greater": 25 } }, { "value": "black", "conditions": { "less": 25, "greaterOrEqual": 100, "lessOrEqual": 15 } }, { "value": "lightblue", "conditions": { "in": [ 1, 25, "ABC" ], "notIn": [ 35, 40, "DEF" ] } }, { "value": "blue", "conditions": { "regex": "[^0-9]" } } ] |
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article