Technical Articles
Real Time Graph – Live Data in SAPUI5 – My learnings in SAPUI5 – Part4
Last few days I was working in SAP IOT Edge Services, where I have developed a real time graph which display sensor details flowing in.
[ I have referred to SAP Standard graphs which display Real time graphs in Streaming services of SAP IOT Edge Services]
Sensor data flows in milli seconds and we can display data without moving x-axis line further.
1. Make sure you have all the sensor device information like sensor ids, sensor names, sensor max values, sensor min values, etc.
2. Function – onInit
Call a function which calls itself for every interval of 3/5/10 Secs. This function is responsible to get sensor data api
3. Function – oGetRandomData
We can have Sensor API data / Sensor Simulated data available at this function. I have used Random data to simulate Sensor live data here.
JsonModel – oLiveData [ In Function – oGetRandomData]
Add all Devices and their sensor ids to this model
Further calls with the data
Above call is from Function – oGetRandomData
Further called another function – this.onDataReceived(data)
[We can directly call onDataReceived function from oGetRandomData, as most of this code is copy pasted from SAP code, I haven’t changed this one]
4. Function – onDataReceived
If Graph is already displayed for the Sensor id, then only graph.addData(data.DateCreated, data.SensorReadingValue); should be called.
Else, call function this.onItemSelected(this.contextDisplayed); and then call graph.addData(data.DateCreated, data.SensorReadingValue)
graph.addData(data.DateCreated, data.SensorReadingValue) => is responsible to display graph with sensor values along with date. The Function Graph is called from LineGraph.js
5. Function – this.onItemSelected
In this function, create a graph of type LineGraph from LineGraph.js.
6. LineGraph.js [SAP Standard File used for Real Time Graphs in SAP IOT Edge Services]
Circle function of d3.js gives us Real Time graph
Here we can decide on how many points should be available in x-axis.
Below, highlighted line is used to rotate x-axis labels
Source Code:
https://plnkr.co/edit/dWMFBLf6mLCxyXwL?open=lib%2Fscript.js&preview
Notes:
D3.js is very beautiful. Understanding it will help us to get more beautiful graphs/visualizations.
I would like to appolize for my limited knowldge in d3.js, hence I couldn’t know give more details in achieveing Real Time graph using d3.js
This code can contain some redudant code, unused variables or functions. Please execuse for me that.