Hello,
In UOC OMI we would like to use FlexChart app to display the trend of our data.
When I check the configuration in demos I see table or json format with static values. I could'nt see any example how can I put my attribute value as data set?
Let's say I would like to put the trend of an attribute for last 30 days which the data is stored in historian. How can I define this as a dataset for FlexChart?
Any example configuration?
thanks,
Ramazan
Hello Ramazan, apologies for the delayed response.
FlexChart expects its dataset as JSON provided through widget properties. For that, historical data from Historian must be transformed into an array and stored in a String-type attribute of an object, which then is bound to the "Data" property of the widget.
There are three supported ways to do this in OMI / UOC, depending on where FlexChart is hosted:
Here you create an Industrial Graphic Symbol, embed the widget and set its "Options", "Style" and "Data" properties in a script and then embed it in another Industrial Graphic or a pane of your OMI ViewApp:
Options I tested and worked for me:
{""chart"":{""type"":""line"",""backgroundColor"":""transparent"",""spacingTop"":10,""spacingRight"":10,""spacingBottom"":10,""spacingLeft"":10},""title"":{""text"":""Last 30 Days"",""style"":{""color"":""#FFFFFF""}},""credits"":{""enabled"":false},""xAxis"":{""type"":""datetime"",""lineColor"":""#FFFFFF"",""tickColor"":""#FFFFFF"",""gridLineWidth"":0,""labels"":{""enabled"":true,""style"":{""color"":""#FFFFFF""}}},""yAxis"":{""title"":{""text"":""Value"",""style"":{""color"":""#FFFFFF""}},""gridLineWidth"":1,""gridLineColor"":""#5A6472"",""lineColor"":""#FFFFFF"",""tickColor"":""#FFFFFF"",""labels"":{""enabled"":true,""style"":{""color"":""#FFFFFF""}}},""legend"":{""enabled"":false},""tooltip"":{""xDateFormat"":""%A, %e %b %Y"",""shared"":true},""plotOptions"":{""series"":{""marker"":{""enabled"":true,""radius"":4},""turboThreshold"":0}},""series"":[{""name"":""Series 1"",""data"":[]}]}
With these settings, FlexChart expects a time series in this format:
[
[
[timestamp_ms, value],
[timestamp_ms, value]
]
]
In my tests I used the following example dataset, which I forced as the value of the attribute OPCUA_Platform.Data in the object viewer:
[[[1731628800000,12.8],[1731650400000,12.6],[1731672000000,12.4],[1731693600000,12.3],[1731715200000,12.5],[1731736800000,12.7],[1731758400000,12.6],[1731780000000,12.4],[1731801600000,12.2],[1731823200000,12.1],[1731844800000,12],[1731866400000,11.9],[1731888000000,11.9],[1731909600000,12],[1731931200000,12.1],[1731952800000,12.3],[1731974400000,12.1],[1731996000000,12],[1732017600000,12.2],[1732039200000,12.4]]]
Drag and drop the Web Widget to a pane of your OMI ViewApp and bind the "Options", "Style" and "Data" properties in the editor.
For "Options" and "StyleSheet" I defined namespace attributes with the same data I used in the script, hardcoded as initial values (so you can change those attributes later in a script in runtime, for example according to your app Light/Dark style):
Open the FlexChartApp from the Visualization in IDE and add a new chart + dataset for testing.
For configuration, I was able to reuse the options code from the script, pasting it in the chart JSON options:
Drag and drop the FlexChartControl to a pane of your OMI ViewApp, select the recently created chart and bind the "Data" property in the editor to the data attribute:
Flex chart hangs up when you change the data in runtime.
The only solution I found is reloading the chart with a data change script, but this only works for the FlexChartControl that comes in the 2025 version of the content library:
Hope this helps!
