IOT Visualization:
Please refer to the recipe for running the application.
This is a stand alone web app written on top of node.js to visualize IOT data.Additionally it uses the following frameworks.
express : Server side routing
JQuery : UI and REST calls
Rickshaw : Visualisation of data
MQTT paho client : Subscribing to the IBM Internet of Things(IOT) Cloud using mqtt protocol and receiving messages from registered devices from IBM IOT Cloud.
Visualization in the application:
This page uses the Rickshaw charting library to visualize real time and historical data.
Historical data:
The components for the historical data visualization are placed in the files historian.js and historianGraph.js in this folder.
iot-visualization\public\js\historian\
\historian.js
\historianGraph.js
historianGraph.js: This file contains the graph and it's related function.
Change the color of the graph: In the below section of code you can change the hexadecimal codes to change the color of the graph data.
this.palette = new Rickshaw.Color.Palette( { scheme: [
"#7f1c7d",
"#00b2ef",
"#00649d",
"#00a6a0",
"#ee3e96"
] } );
The function drawGraph(seriesData) is called from historian.js when we receive device data from IBM IOT Cloud.It instantiates the graph for the first time and set te renderer , hover details , x-axis and y-axis formatting.
this.drawGraph = function(seriesData)
This instantiates the graph and set the intial renderer to line.
this.graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'line',
stroke: true,
preserve: true,
series: seriesData
} );
This defines the time fixture(e.g. year, month, day, hour) and the formatting of each) for the x-axis.
this.xAxis = new Rickshaw.Graph.Axis.Time( {
graph: this.graph,
ticksTreatment: this.ticksTreatment,
timeFixture: new Rickshaw.Fixtures.Time.Local()
} );
This defines the number formatting for y axis.
this.yAxis = new Rickshaw.Graph.Axis.Y( {
graph: this.graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment: this.ticksTreatment
} );
This function gets called from historian.js and create the array which is used to plot the graph.
this.displayHistChart = function(device,data)
historian.js : This file intializes the graph and makes REST API calls to get the historian data.
this.initialize = function() {
historianGraph = new HistorianGraph();
}
The function this.plotHistoricGraph handles the ui control selections and make the REST call to get the historical data
this.plotHistoricGraph
Realtime data:
The components for the realtime data visualization are placed in the files realtime.js and realtimeGraph.js in this folder.
iot-visualization\public\js\realtime\
\realtime.js
\realtimeGraph.js
realtimeGraph.js: This file contains the graph and it's related functions.This is written in the same style as historianGraph.js above.So you can follow the guidelines for historianGraph.js to customize the code.
realtime.js : This file intializes the graph and subscribes to the mqtt topics to get realtime device data from IBM IOT cloud.
You can download the iot-visualization project zip and use the above guidelines to customize the graphs to change the visualization.