Real Time Graph – Live Data in SAPUI5 - My learnings in SAPUI5 - Part4

[krish469]

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.