Visualizing data

Now we've got the data in node-red we're able to push it to all kinds of services. We could send a twitter message every time data arrives, push a message to IFTTT to perform some action like changing the color of lights depending on the temperature or visualize the data on a dashboard.

For this workshop we will visualize the data using Grafana. Grafana requires the data to be available in some kind of database, we will be using influxdb for that purpose.

To put incoming data into the database we need to use the Influx node in the database category of node red. Use the node with only an incoming connector.

Double click the node to configure it. Start by clicking on the pencil to add a new server. The values to use are:

Host: influxdb

Database: workshop<no>

Username: workshop<no>

Password: see information sheet

Name: anything you like

Save the information to return to the previous configuration dialog.

In this dialog enter 'maakplek' in the 'Measurement' field. Leave the 'Name' field empty.

Save the configuration with 'Ok'. Now we need to extract and format the data we want to put into the database. For this we need to add a a json and a function node from function category.

Edit the function node, replace the existing code with:

msg.payload = {

    temperature: msg.payload.fields.temperature,

    humidity: msg.payload.fields.humidity

}

return msg;

The code replaces the function payload with a structure containing only the temperature and the humidity. Check the output of the debug node we added previously to find the structure of the payload.

Now we need to wire the nodes. Add a wire from the output of the mqtt node to the input the json node. Connect the output of the json node to the input of the function node. Finally connect the output of the function node to the input of the inflixdb node. The result should resemble this:

Make sure the node is sending data and check the debug log (right pane in the browser) for any errors.

Now the database is being filled with new data we are ready to visualize it. Open http://workshop.tbdev.nl:3000 in your browser to access Grafana. The username and password will be provided at the workshop location.

Note: We are using one Grafana instance for this workshop, which means everyone is able to modify all dashboards.

After providing the username and password the home screen will be shown.

Click on "Home" to open the dashboard management and on "+ New" to create a new dashboard.

In the new dashboard click on the green bar  on the left to open the menu, select 'Add Panel" - "Graph".

The dashboard now shows a graph with fake data. We need to change the settings to add our measurements.

Start by changing the data source to the database where you are posting your data (or use 'workshop00' for one with some sample data). Now click on the "A" to expand the query.

In the first line of the query, click on "select measurement" and select "maakplek" (the only choice).

In the second line, click on "value" and select "temperature". The graph should now show life data.

Set the "Group by time interval" to "20s".

Use the 'General' tab to set the graph title. In the 'Axes' tab set the unit to 'Celcius'.

Close the setup dialog with the 'x' at the right side.

Use the "Add row" button at the right to add a row for the humidity. (When setting the axes, the percentages are 'hidden' in the 'none' category)

Set the name of the dashboard by clicking on the gear at the top and opening the setting menu. Save your result by clicking the floppy symbol.

Previous Step