Charting IoT sensor data using C3.js and IBM Bluemix

Hammad TariqBlogs, Tutorials

Screen Shot 2016-08-15 at 13.22.22
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+
Line Chart using C3.js Library

Line Chart using C3.js Library

In a previous tutorial on Bluemix, we successfully published TI SensorTag readings to IBM Bluemix IoT cloud service using MQTT API and our mobile app that was developed Evothings Studio. In this tutorial, we’ll use the same sensor device from Texas Instruments, adding to the mobile app a JavaScript chart library for visualising the SensorTag readings on a line chart in real-time while being published on the IBM Bluemix cloud.

Storing sensor readings on cloud and visualizing them in an intuitive way, is an cornerstone for any IoT installation. Neatly displayed data allows the end-user to understand the readings and plan accordingly – making better decisions. Another important requirement with IoT is that since sensor data often arrives continuously around the clock so any visualization should have the ability to update itself in real-time.

For this tutorial, we will be using C3.js library which is specifically designed to use with mobile apps and has the capability of updating itself in real-time using live data. For the purpose of this example, we will use the simple Line Chart example of C3.js.

Using Evothings Studio

We’ll be using Evothings Studio to develop our mobile app. If you have followed the first part of this tutorial, you’ve already had Evothings Studio up and running. If not, just follow these steps and get going with the example app code using your IBM Bluemix IoT cloud service credentials (if you don’t have them, please see the part 1 of this tutorial for detailed instructions on how to get them):

  1. Download Evothings Workbench.
  2. Download Evothings Viewer app on your mobile phone. (Android, iOS)
  3. Connect Evothings Workbench with Evothings Viewer using the connection key.
  4. Download/clone the hammadtq/Evothings-Demo-Apps GitHub repository.
  5. Find “visualization-bluemix-iot-cloud” folder in the download repository, open it and then drag-drop the “index.html” to the “My Apps” tab of Evothings Workbench on your computer. This will create a new entry for the project, at the very top.
  6. Now open “app.js” in your favorite text editor and update the variables to suit your Bluemix IoT service organization ID,  API key, authentication token, device type and device ID.
  7. Click the “Run” button which is displayed to the right of your new project entry, and Evothings Viewer app will now load the example app code.
  8. Activate your CC2650 TI SensorTag, by pressing the side button.
  9. Finally, pess the “Connect” button on the app, the “Communication status” should change to SCANNING and then finally to SENSORTAG_ONLINE. You’ll now see the temperature, humidity and light (lux) meter readings on yoru app as well as graphing data updating on the C3 chart in real-time.

Code Explanation

Analyze the “app.js” file again. All the MQTT and visualization magic is happening here. When the app initializes, the code in app.onReady function sets up the connection with the Bluemix IoT cloud service. Within the same function, we are initializing the C3.js chart starting off with zero values for our desired columns.

//generate the initial chart
app.chart = c3.generate({
bindto: '#chart',
data: {
   columns: [
     ['Ambient Temp', 0],
     ['Humidity', 0],
     ['Light', 0]
  ]}

By pressing the “Connect” button, the app starts publishing the sensor readings to the Bluemix IoT cloud service. As we are also subscribing to the all devices on the Bluemix IoT cloud, that means whenever any device receives any data, the Bluemix MQTT API notifies our MQTT client, the client then sends it to the “app.onMessageArrived” function.

The data message is received in JSON format. In “app.onMessageArrived”, the JSON ia parsed and starts updating the chart using following code:

var payload = jQuery.parseJSON(message.payloadString)
app.ambientTemp.push(payload.ambientTemp)
app.humidity.push(payload.humidity)
app.light.push(payload.light)
app.chart.load({
  columns: [
    app.ambientTemp,
    app.humidity,
    pp.light
  })

All of app.ambientTemp, app.humidity, app.light are arrays which were declared earlier in same file. So, with every message arrival, the arrays get updated and then reloaded onto the chart.

I hope that with this tutorial, you will be able to develop cloud- and visualization integration for your IoT apps. In case of any questions or comments, you are always welcome to use our forum at Evothings Forum.

Get Evothings Studio from the download page (Workbench part) and mobile Viewer clients from Apple iTunes and Google Play (look for “evothings viewer”), start making mobile apps in javascript today!