Streaming Sensor Readings to a Real-time Gauge Chart
The core of IoT monitoring is streaming readings from a sensor (or network of sensors) to a real-time dashboard as the data changes. To do this, we need a data stream network to publish the data from the sensor, and a live-updating dashboard to subscribe to the readings and display them in real time.
In the video below, we give a live demonstration of the application in-action, as well as a code walkthrough. Now, let’s get to coding!
IoT Gauge Chart Resources
Server Side – Collecting Readings
app.js Then, install two npm packages. These two packages will be installed globally.
npm install pubnub -g
npm install johnny-five -g
Here, we have required both the Johnny-Five and PubNub packages. In the pubnub variable, input your unique publish and subscribe keys.
Then we initiate the Arduino:
Here, ‘five’ has a board module, where inside we set up the sensor on pin ‘A0’ which will collect the readings every 1000ms. You can read more about the board component initialization and usage here, as well as the Johnny-Five sensors’ APIs here.
Once everything is set up, we can start sending and receiving the events (ie. the pressure sensor readings).
Here, set the scale of readings that we get from sensor as the range of 0 to 10. Whenever EON receives the data, we convert it into two digit decimals, and then we publish that reading to ‘pubnub-eon-iot’ channel. Inside the message, we have a columns array. Inside that columns array, we have just one array.
The first element is by default ‘data’. And second element is the data we are getting from the sensor and passing to channel.
With that, the serve side is ready. Here’s the full code.
Client Side – Gauge Chart
For this tutorial, our client side will be a single HTML file that displays the gauge chart.
Here’s what our HTML looks like:
Receiving Data with EON
‘eon.chart’ returns a C3 chart object. We supplied the PubNub channel name to the channel parameter. Inside ‘generate’ parameter, we mention where the chart will be coming in the bindto parameter as the id or class of the HTML tag where it will be put (i.e. #gauge).
In the data object, we only have to specify the type, i.e. gauge. It will be automatically bound to the data parameter of the columns on the server side. This provides us another object called ‘gauge’ where we set the minimum and maximum value of the gauge. We can also define the color pattern it should display on the gauge when a particular value is crossed.
Running the Program
To run this program, you have to push the Standard Firmata file from the Arduino IDE to your board first and then run ‘node app.js’. Open the index.html in the browser. With that, we’re now streaming live pressure data from the Arduino to our live gauge chart.
To learn more about EON and its use cases, watch the video below.