Overview

Skill Level: Intermediate

Beginner to Intermediate

Often times, we have a need to see our data visually for aesthetics appeal, understand and interpret data. IoT Platform provides several different charts that user can customize to see the data being received into the IoT Platform

Ingredients

A Bluemix account.

IoT platform service has to be created.


Node-RED Starter application has to be created.

I'm assuming that the user at this point - knows how to create an application and a service and how to create connections from app to the service.

 

Please refer to Documentation on how to create Device, App, Service at https://console.ng.bluemix.net/docs/services/IoT/index.html

 

https://console.ng.bluemix.net/docs/services/IoT/index.html

 

In this blog - I will capture Temperature and Humidity from a simulated Watson IoT Node, send it to the IoT Watson Platform and we will create a chart or two to render the Temperature and Humidity.

Step-by-step

  1. Node-RED nodes to generate some simulated data to Watson IoT Platform

    Create a flow by Injecting some data every 2-3 seconds to a “function” node. Feed this to the Watson IoT Output node, found under the “output” nodes.

    Screen-Shot-2017-01-05-at-6.54.59-PM

    Inject Node :

    Screen-Shot-2017-01-05-at-6.56.58-PM

     

    Function node : Calculates a random number, creates a JSON in the payload and sends it to next node.

     

    Screen-Shot-2017-01-05-at-7.02.59-PM

     

    Watson IoT Output node:

    This information like Device ID, Type is obtained when you create the device in the IoT Platform. Enter it here.

     

    Screen-Shot-2017-01-05-at-6.57.29-PM

     

     API Key : ( see the next snapshot for information on how to get the API Keys. )

    Screen-Shot-2017-01-05-at-6.57.15-PM

     

    Open the IoT dashboard – Click on Apps on the nav panel, and “Generate API Key”

    Screen-Shot-2017-01-05-at-7.07.42-PM

    Screen-Shot-2017-01-05-at-7.06.28-PM

     

    Screen-Shot-2017-01-05-at-7.09.34-PM

     

  2. Visualizing data on the IoT Platform.

    Click on Boards -> “Create New Board”. Give it an appropriate name, and click on Create after selecting the sharing options.

    This should create a new board.

    Screen-Shot-2017-01-05-at-7.14.50-PM

    Screen-Shot-2017-01-05-at-7.15.03-PM

     

    Click on the new board you just created.

     

  3. Create New (Visualization) Card

    Follow steps to create the Chart ( in this case – a Line chart ) that shows the streaming data in the line chart.

    Screen-Shot-2017-01-05-at-7.16.30-PM

    Screen-Shot-2017-01-05-at-7.16.39-PM

     

    Screen-Shot-2017-01-05-at-7.16.47-PM

     

    Just clicking on these lines – will auto-populate the data that it has received – and in my case the temp data that came in from Node-RED.

    Screen-Shot-2017-01-05-at-7.17.09-PM

     

    Screen-Shot-2017-01-05-at-7.17.31-PM

    This should show the streaming data from Node-RED simulator.

     

    Another sample of the chart:

    Screen-Shot-2017-01-05-at-7.24.20-PM

     

  4. Generate Humidity from Node - RED and render it.

    Add the Humidity component to the “Generate Temperature” function node

     

     

    rnd = Math.floor( Math.random()*100);
    rnd = “{“d”:{“temp”:”” + rnd + “” “+“,”humidity”:”27″”+” }}”
    // node.error ( x);
    msg.payload = rnd;
    return msg;

    Screen-Shot-2017-01-05-at-7.44.25-PM

    Screen-Shot-2017-01-05-at-7.44.41-PM

     

  5. Create the Humidity chart

    Edit the Watson IoT Node and create / change the IoT Node EventType as “TempHumidity”.

    This will reflect in the next snapshot when you are creating the line chart under “Event” – meaning it will autoupdate.

    Screen-Shot-2017-01-05-at-7.51.01-PM

     

    Screen-Shot-2017-01-05-at-7.47.43-PM

     

     

    Screen-Shot-2017-01-05-at-7.48.31-PM

     

    A Final snapshot :

    Screen-Shot-2017-01-05-at-7.53.41-PM

     

     

Join The Discussion