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]" } } ] |