Visualizing accelerometer data using IBM Watson IoT Platform and Smoothie Charts javascript library

Hammad TariqTutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Visualization is an important part of any IoT deployment, especially when you are using sensors such as temperature, humidity, light etc. Plotting sensor data on a live updating line chart is what we discussed in our second installment, however, if you have a more continuous form of data incoming, such as a stream, you may want to visualize it as a live-updating continues line chart. Smoothie Charts, a JavaScript charting library, proves to be a good library to visualize streaming data.

IBM Watson IoT Platfrom with SmoothieIn this third article of “publishing using IBM Bluemix” tutorial series, you will learn about visualizing IBM Watson IoT platform data using Smoothie Charts – a common JavaScript charting library for visualising real-time data streams. To bring you up to speeed, you can start off by reading part 1 and part 2 of this article series.. There is also a relevant, older article on the subject written by G&oul;ran Krampe.

Previously, we were using TI SensorTag for sensor readings, however, as its possible that you may not have that particular sensor module, I have modified this tutorial to use your smartphone’s accelerometer readings. So, in this tutorial, we will read the accelerometer readings, publish them to the IoT platform, retrieve the published readings and then visualize them as a streaming line chart.

Publishing sensor data to IBM Watson IoT platform was covered in the first installment of this tutorial series. However, for continuity’s sake, I am again copying the steps necessary to create your own IoT Platform service on IBM Bluemix. If you are interested in learning the working of IBM Bluemix MQTT API and how we are communicating with API using Paho JavaScript library, please still refer to the first installment of this series..

Step 1: Setting up IBM Bluemix account and Watson IoT platform

To get started, follow these steps:

  1. Register and/or login for an IBM Bluemix account.
  2. Once logged in, click on “Use Services or APIs”.
  3. You will see a huge list of services, click on “Internet of Things” checkbox from the left-hand pane and click on “Internet of Things Platform”.

    Choose "Internet of Things" from left side panel

    Choose “Internet of Things” from left side panel

  4. On the next screen, you will see a brief about Internet of Things Platform and a few options to get started, leave everything as it is and click on “Create”.

    Leave all options and click "Create"

    Leave all options and click “Create”

  5. On the next screen, you will notice that a new IoT Platform service has been created for you. Now just click on “Launch dashboard” button.
  6. You will be presented with an overview of your account. From here, click on “Add device” button under “Device Types” panel.

    Adding a device to the Bluemix IoT cloud

    Adding a device to the Bluemix IoT cloud

  7. You will be presented with a pop-up to add new device type. Note that these are your device types, as you want to declare them so you can name and describe them in any way you want. For the purpose of this tutorial, I am just using a device type called “Accelerometer”. Fill in all other optional inputs if you want them or just leave them and finish the process to create a new device type.

    Adding a device type to IBM Watson IoT Platform

    Adding a device type to IBM Watson IoT Platform

  8. As you finish, a new pop-up will start that will guide you to add your device by using the “device ID”. Choose any alphanumeric string to be your device ID.
  9. At the end of the process, you will see your organization ID, device type and device ID. Make note of these values as they will be used in our app.
  10. Now close the popup and click on “Access” option from the left-hand menu, then choose “api keys” from the sub-menu on the page that open. From here, click on “+ Generate API Key” button.
  11. On the next popup, you will see your “API Key” and “Authentication Token”, note these values.

By now, you have created an IBM account, registered a Watson IoT platform service, added a device and generated API key and authentication token to use them with our app. Now is the time we start developing the mobile app that will collect data from phone’s accelerometer and publish it to our new account at IBM Watson IoT platform.    

Step 2: Developing the app using Evothings Studio

Evothings Studio is a rapid mobile app prototyping tool for IoT applications. The studio itself is based on Apache Cordova and gives you the power to develop the cross-platform apps quickly while using widely known scripting language of HTML and JavaScript.  

To get started, follow these steps:

  1. Download the latest version of Evothings Workbench.
  2. Download Evothings Viewer app on your mobile phone. (iOS, Android).
  3. Connect the Evothings Workbench with Evothings Viewer app.
  4. Click on “Examples” tab in the Evothings Workbench and run “Hello World” example to see the working of Evothings Studio.

Now you know Evothings Studio, let’s download the example app code for this tutorial and run it with Evothings Studio.

  1. Clone or download the example app code from this GitHub repository.
  2. Open the downloaded folder, find the “index.html” file and drag it to the “My Apps” tab in Evothings Workbench, a new project entry will be created.
  3. Open “app.js” file from the downloaded folder and input your Watson IoT platform service credentials.
  4. Run the example project from Evothings Workbench.
  5. Tilt the phone to see changing values of the accelerometer on Smoothie streaming chart. Note the slight delay between when you tilt the phone and when the lines start updating themselves, that is because we are first publishing the data to IoT Platform and then retrieving and plotting it on the app.
  6. Go back to the IBM Watson IoT Platform service dashboard and click on graph icon alongside the device listing to see the incoming events.

    Incoming events in IBM Watson IoT Platfrom

    Incoming events in IBM Watson IoT Platfrom


Step 3: Understanding the code

Open “index.html” from the downloaded app code in your favorite code editor. Note that upon initialization, the initialiseChart function plots and initialize Smoothie chart. After that, the accelerometer gets initialized, we start watching the accelerometer readings using watchAcceleration function from Device Motion Cordova plugin.

Once, we have the accelerometer readings in accelerometerHandler, we make a JSON string of them and send them for publishing to MQTT library.

Now, open “app.js” and note the app.onMessageArrived function, this is where we receive the data from IoT Platform as it get published then we parse the JSON and update the readings on our Smoothie chart.

If you want to discuss this tutorial or have any questions, feel free to use Evothings Forum where a large community is available to help you!

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