Index ¦ Archives ¦ Atom

MQTT to Node-RED Dashboard

Summary: Showing the steps from device data simulation to plotting the data on dashboard.


For this recipe I will use the following ingredients: IoSynth device simulator, Node.js, Node-RED, Dashboard.

I am using a Ubuntu 16.04 laptop and commands are executed in Bash shell.

Installing Node.js

Node.js is event-driven I/O server-side JavaScript environment. In other words, it is a platform where you can create event-driven applications.

sudo apt-get update
sudo apt-get install nodejs

In addition, install npm. This is Node.js package manager.

sudo apt-get install npm

More installation details on: how-to-install-node-js-on-ubuntu-16-04

Installing Node-RED

Node-RED is a visual tool for wiring the Internet of Things. Using it, you can wire together hardware devices, APIs or online services using graphical blocks and connectors. Node-RED runs on top of Node.js.

sudo npm install -g --unsafe-perm node-red

After Node-RED is installed, the next step is running it.


After that, you can access the Node-RED editor at http://localhost:1880

More installation details on: getting-started

Installing node-red-dashboard

Run the following command in your Node-RED user directory (typically ~/.node-red):

npm i node-red-dashboard

Then, open your Node-RED instance and you should have UI nodes available in the palette and a new dashboard tab in right side panel. The UI interface is available at http://localhost:1880/ui (if default Node-RED settings are used).

More installation details on: node-red-dashboard

Installing IoSynth

IoSynth is device data simulator. You can gen the latest release from the GitHub repository.

Unzip the archive and use the iosynth-0.0.7.jar file.

Alternative way is to build the Jar file from sources:

git clone
cd iosynth
mvn package

If you have Java 1.7 or above installed, run the following command:

java -cp iosynth.jar net.iosynth.Mqtt -c config-mqtt.json -d devices.json

Where the “config-mqtt.json” file is:

        "uri": "tcp://",
        "topic": "iosynth/",
        "qos": 2,
        "clients": 1,
        "seed": 123456

This will connect to the public Eclipse MQTT broker, or you can use your own if you have one.

The “devices.json” file contains the configuration information for the simulated devices:

        "sampling":{"type":"fixed", "interval":1000},
            {"type":"dev.timestamp",    "name":"ts", "format":"ms"},
            {"type":"double_oscillator", "name":"temp", "min":27.0, "max":34.0, "period":600000, "noise":5.0, "anomaly":0.001}

You have created a device that will publish data on “iosynth/device” topic on Eclipse broker every second.

This device have the following payload:


Where the first element is a timestamp and the second is simulated sensor data between 27.0 and 34.0 with some other sensor parameters.

You can check that the broker is receiving data if you have some MQTT client installed. For example with the Mosquitto client:

mosquitto_sub -v -t "iosynth/#" -h

Now that you have the data streaming, lets create a Node-RED flow to collect the data and plot it on the dashboard.

Open the Node-RED editor and lets check that we can receive data from MQTT broker.

Drag a “mqtt” node to flow view and click on it to configure it: - server - topic iosynth/device - name temp

Drag a “debug” node and connect it after “mqtt” node. This will allow you to check that you are receiving the data from MQTT broker. Now, deploy the flow by clicking on “Deploy” button at the top right. Then on the right panel check the “debug” tab and you should see the data similar to this:

2/4/2017, 9:21:24 AM  deb-temp
iosynth/device : msg.payload : string [35]

2/4/2017, 9:21:34 AM  deb-temp
iosynth/device : msg.payload : string [35]

2/4/2017, 9:21:44 AM  deb-temp
iosynth/device : msg.payload : string [35]

Add a new “function” node after “mqtt” node and use the following code to configure it:

var p = JSON.parse(msg.payload);
return { payload: p.temp };

This will extract the “temp” value from the Json payload.

If you now attach a “debug” node after the “function” node, you will see the values in “debug” tab.

After, the “function” node add a “chart” node from the “dashboard” palette.

Use your preferences for the chart and deploy the new flow.

If everything is configured properly, you can see the chart on the dashboard by navigating to: http://localhost:1880/ui


Below is a flow configuration that can be imported using the menu at the top right corner of Node-RED editor.

        "id": "41037743.f5cfc8",
        "type": "mqtt in",
        "z": "f940e6ae.d2f8c",
        "name": "temp",
        "topic": "iosynth/device",
        "qos": "2",
        "broker": "38b3d460.36a3fc",
        "x": 121.5,
        "y": 308,
        "wires": [
        "id": "aa3097d9.6c5658",
        "type": "debug",
        "z": "f940e6ae.d2f8c",
        "name": "deb-temp",
        "active": true,
        "console": "false",
        "complete": "payload",
        "x": 290.5,
        "y": 414,
        "wires": []
        "id": "192881c1.87132e",
        "type": "function",
        "z": "f940e6ae.d2f8c",
        "name": "fun",
        "func": "var p = JSON.parse(msg.payload);\nreturn { payload: p.temp };",
        "outputs": 1,
        "noerr": 0,
        "x": 283.5,
        "y": 198,
        "wires": [
        "id": "167d88c.c16b177",
        "type": "ui_chart",
        "z": "f940e6ae.d2f8c",
        "name": "temp",
        "group": "57fecc7.66fcf34",
        "order": 0,
        "width": "14",
        "height": "8",
        "label": "temp",
        "chartType": "line",
        "legend": "false",
        "xformat": "%H:%M:%S",
        "interpolate": "step-after",
        "nodata": "N/A",
        "ymin": "20",
        "ymax": "40",
        "removeOlder": "400",
        "removeOlderUnit": "1",
        "x": 473.5,
        "y": 198,
        "wires": [
        "id": "38b3d460.36a3fc",
        "type": "mqtt-broker",
        "z": "",
        "broker": "",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "compatmode": true,
        "keepalive": "60",
        "cleansession": true,
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": ""
        "id": "57fecc7.66fcf34",
        "type": "ui_group",
        "z": "",
        "name": "Default",
        "tab": "cc61ceff.378e",
        "disp": true,
        "width": "14"
        "id": "cc61ceff.378e",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "order": "1"

© Ross.