Skip to Content
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.

Be the first to leave a comment
You must be Logged on to comment or reply to a post.