Page Tree
| Page Tree |
|---|
| root | KPI Component Configuration |
|---|
|
Overview
The Data Tag configuration Has serval elements to the feature
1. Used to display data
2. There are a number of ways of displaying this data from level bars to gauges.
Data tag displays the value of a data tag as expected
buy with this menu bar it allows you to select many different ways in displaying the data with a more graphical aproach
Image Added
Put the kpi's in edit mode and have a look at there settings.
Some of them you can stack values or add additional values
The examples to the left and below are instances of the same widget with different configurations. To see how they are made, put the widget in edit mode and play around.
To put the widget in edit mode click the seamless mode button 
Image Added then turn on edit mode with the slider
Once you are in edit more, just click on something to see how something is configured.
***If you accidentally change something just click "Revert" at the top of the KPI panel***
You can either search for tags in the configuration screen or drag and drop them directly, for example search results or the shopping basket.
Table cells can be dragged around within the widget to swap places and whole rows or columns can also be dragged and dropped to change the order.
Examples
Value
Value will just display the value of a tag
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD(5,2)\",\"size\":\"20\",\"textSize\":\"20\",\"padding\":\"\",\"title\":\"\",\"colour\":\"#333\",\"bgColour\":\"transparent\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\":1,\"status\":1,\"customStates\":\{\},\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":0,\"max\":100,\"innerRadiusRatio\":0.6,\"sizeOther\":null,\"orientation\":\"v\",\"timespan\":\"\",\"showStats\":false,\"autoscale\":true,\"numGraduations\":101,\"majorGraduationsEvery\":5,\"sizeDirection\":null,\"innerAlignment\":null,\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\":true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|---|
|
Update Time
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD(5,2)\",\"size\":\"20\",\"textSize\":\"20\",\"padding\":\"\",\"title\":\"\",\"colour\":\"#333\",\"bgColour\":\"transparent\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\":9,\"status\":1,\"customStates\":\{\},\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":0,\"max\":100,\"innerRadiusRatio\":0.6,\"sizeOther\":null,\"orientation\":\"v\",\"timespan\":\"\",\"showStats\":false,\"autoscale\":true,\"numGraduations\":101,\"majorGraduationsEvery\":5,\"sizeDirection\":null,\"innerAlignment\":null,\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\":true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|---|
|
Status
Status has many ways of displaying the data but the main way is to use the traffic lights which can be triggured using an if statment style of determining which value to display
Data tag displays the value of a data tag as expected
buy with this menu bar it allows you to select many different ways in displaying the data with a more graphical aproach
Image Removed
Value
...
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD(5,2)\",\"size\":\"20\",\"textSize\":\"20\",\"padding\":\"\",\"title\":\"\",\"colour\":\"#333\",\"bgColour\":\"transparent\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\": |
|---|
|
...
...
| 2,\"customStates\":\{\"RED\":\{ |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Update Time
...
| [],\"additionalTrendMultipliers\": |
|
...
...
| additionalTrendMetaData\":[ |
|
...
...
| useTimestampAsValue\":false,\" |
|
...
...
...
| innerRadiusRatio\":0.6,\" |
|
...
...
...
...
...
| showStats\":false,\"autoscale\":true,\" |
|
...
...
| majorGraduationsEvery\":5,\" |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Status
...
| \"\",\"colour\":\"#21ab09\",\"icon\":1,\"flash\":false,\"rotate\":\"\"\},\"OTHER\":\{\"op\":\"eq\",\"value\":0,\"indicator\":1,\"text\":\"\",\"colour\":\" |
|
...
...
...
...
...
...
...
...
| additionalTrendTypes\":[],\" |
|
...
| additionalTrendMultipliers\":[],\" |
|
...
| additionalTrendMetaData\":[],\" |
|
...
...
| useTimestampAsValue\":false,\" |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| majorGraduationsEvery\":5 |
|
...
...
...
...
| innerAlignment\":null,\"staleAfter\":false,\" |
|
...
| showSeparator\":false\}]],\" |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| seamless\":true,\"tags\":[],\" |
|
...
| dontPromptOnLiveToggle\": |
|
...
Sparkline
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\": |
|---|
|
...
...
...
...
...
...
...
| "calc/ADD(siggen/sin4@300,2)\",\" |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| bgColour\":\"transparent\",\ |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| display\":4,\"status\":1,\" |
|
...
...
...
...
...
...
...
...
| additionalTrendMultipliers\": |
|
...
...
| additionalTrendMetaData\": |
|
...
...
...
...
| useTimestampAsValue\":false |
|
...
...
...
...
...
...
...
| 100\",\"innerRadiusRatio\":0.6,\" |
|
...
...
...
...
...
...
| showTimeSpan\":true,\"showStats\":false,\" |
|
...
...
...
...
| majorGraduationsEvery\":5,\" |
|
...
...
...
...
...
...
| showSeparator\":false\}]],\" |
|
...
...
...
| firstrowheadings\":false,\" |
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Dial
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\" |
|---|
|
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
| ,\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":\"0\",\"max\":\" |
|
...
...
| ,\"innerRadiusRatio\":\"0.6\",\"sizeOther\": |
|
...
| null,\"orientation\":\"v\",\"timespan\":\"\",\"showStats\":false,\"autoscale\":true,\"numGraduations\":101,\"majorGraduationsEvery\":5,\"sizeDirection\":null,\"innerAlignment\":null,\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\":true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|
...
Level
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD(siggen/ |
|---|
|
...
...
| 60\",\"textSize\":\"20\",\"padding\":\"\",\"title\":\"\",\"colour\":\" |
|
...
| #17becf\",\"bgColour\":\" |
|
...
| #dddddd\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\": |
|
...
| 6,\"status\":1,\"customStates\":\{\},\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":\"0\",\"max\":\" |
|
...
| 50\",\"innerRadiusRatio\":0.6,\"sizeOther\":\"200\",\"orientation\":\" |
|
...
...
...
| ,\"autoscale\":true,\"numGraduations\":101,\"majorGraduationsEvery\":5,\"sizeDirection\":null,\"innerAlignment\":null,\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\":true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|
...
Gauge
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD( |
|---|
|
...
...
...
...
...
...
...
| #444444\",\"bgColour\":\" |
|
...
| #bcbd22\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\": |
|
...
| 7,\"status\":1,\"customStates\":\{\},\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":\"0\",\"max\":\" |
|
...
| 100\",\"innerRadiusRatio\":\"0.6\",\"sizeOther\":null,\"orientation\":\"v\",\"timespan\":\"\",\"showStats\":false,\"autoscale\":true,\"numGraduations\": |
|
...
| \"20\",\"majorGraduationsEvery\":\"5\",\"sizeDirection\":null,\"innerAlignment\":null,\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\":true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|
...
Arrow
| Epm macro kpi |
|---|
| config | \{\"promptIfDirtyClose\":true,\"kpis\":[[\{\"kind\":\"datatag\",\"value\":\"calc/ADD(siggen/40)\",\"size\":\" |
|---|
|
...
...
| 12\",\"padding\":\"\",\"title\":\"\",\"colour\":\" |
|
...
| #2ca02c\",\"bgColour\":\"#dddddd\",\"offsetX\":0,\"offsetY\":0,\"alignment\":\"2\",\"weightWidth\":\"1\",\"weightHeight\":\"1\",\"metaData\":\{\},\"refreshRate\":10,\"decimalPlaces\":\"0\",\"units\":\"\",\"display\": |
|
...
| 8,\"status\":1,\"customStates\":\{\},\"additionalTrends\":[],\"additionalTrendTypes\":[],\"additionalTrendMultipliers\":[],\"additionalTrendMetaData\":[],\"showValue\":true,\"useTimestampAsValue\":false,\"min\":\"0\",\"max\":\" |
|
...
| 60\",\"innerRadiusRatio\":0.6,\"sizeOther\":\" |
|
...
...
| right\",\"timespan\":\"\",\"showStats\":false,\"autoscale\":true,\"numGraduations\":101,\"majorGraduationsEvery\":5,\"sizeDirection\": |
|
...
| \"both\",\"innerAlignment\": |
|
...
| \"start\",\"staleAfter\":false,\"showSeparator\":false\}]],\"refreshrate\":60,\"firstrowheadings\":false,\"hidegridlines\":false,\"padding\":\"\",\"isgrid\":true,\"diagramid\":false,\"diagramwidth\":1000,\"vars\":\{\},\"live\":true,\"liveOffset\":\"\",\"seamless\": |
|
...
| true,\"tags\":[],\"dontPromptOnLiveToggle\":false\} |
|
...
Gauge
Arrow
...