Build a dashboard without a single line of code

#javascript #node #opensource #ibmcloud

With the astronomical amounts of data we have passing through the web and IoT devices at any given second, it is critical now more than ever, that we have ways to visualize it. If you google how to do so, you will probably see more than 67 million results, however, from my perspective one of the easiest and intuitive ways to visualize this kind of data is with Node-RED dashboards.

Node-Red is a browser-based programming tool that allows you to connect code blocks that accomplish tasks. It uses nodes and flows to easily write code that can connect to APIs, hardware, IoT devices, or online services. A node is a predefined code block and flow is a connection of nodes, usually an input, processing, and output node. Node-RED can be run locally on your computer, on a device such as Raspberry Pi, or even in the cloud.

In my blog post I’ve outlined the many different reasons why I think Node-RED is a great tool, however, in this blog post I want to highlight just one. The true beauty of Node-RED lies in its ease of use. Node-RED allows users from any programming background to build something worthwhile. It democratizes programming and the ability to create and manipulate data in more ways than any other program would. It uses flow-based programming to visualize the data movement instead of having to write a lot of code, therefore being incredibly popular when it comes to prototyping as well as controlling data flow from IoT devices. With that being said, there are also very easy ways to create aesthetically visual and comprehensive user interfaces without writing a single line of HTML, CSS, or JS. This is where the Node-RED dashboards come into play.

Before we dive deep into how we create these dashboards, let's talk a little bit more about why.

A few reasons why it would be beneficial to create a dashboard that displays data from either web applications or IoT devices could be and not limited to:

Processing inbound data coming into your web application or IoT device automatically. Inbound data may include timestamps, messages, location, weather as well as any other influences that could influence decisions.
Monitoring as well as controlling limits of interest.
Receiving alerts on desired information such as failures or performance.
Sharing and analyzing visually consolidate data with your peers.

A few things to think about when designing these dashboards could be and not limited to:

What type of components should the dashboard display? ( Should there be graphs, sliders, gauges, forms ) .
Where will the received information go and what will process it?
What protocols should I employ? ( should I add any alerts ? )
Why should I even consider making a dashboard ( refer back to the upper section on the why 🙂 )

After considering both the why and the what of creating a dashboard, Node-RED makes it fairly simple to consider how.

Let's take a look at this example: The CPU Dashboard
The CPU dashboard monitors and creates alerts for CPU usage. When the CPU usage is greater than 50% it will create an alert monitoring the user which core the alert came from. ( Note this is a simulation )

Full workshop available here

In this example we are displaying the output of a quad core processor and its percentage usage. This is a simulation to show how the data is being recorded in real time and sending alerts to the user.

Here is what the Node-RED flow of this dashboard looks like :

This flow starts off with a dark blue input node that passes on timestamps as the input property. This node is then connected to a light blue UI switch node which can be toggled on and off. When on the switch node can pass on time stamp data, and when off no time stamp data is passed on which results in nothing. Assuming that the switch is on, or in other words if switch is true , we need to connect the light blue UI switch node to the yellow switch funtion node to then grab the simulated data that is stored in the CPU usage node.

If switch is on then get data from CPU usage node (dark blue with chip like image). This node is gathering all the simulation data and sending separate messages for each core. When you look at the dashboard you see a line chart under the CPU utilization section which graphs the collection of the CPU data with each line representing a separate core across a time stamp of when the switch is turned on.

This is done at the flow level by connecting the UI node for chart (teal node with chart image ) and setting its properties as line graph with the CPU usage node. The green node called msg.payload takes the output of the CPU usage node and prints it in the node-RED debug panel which acts like the console.log.

The CPU usage node is then also connected to two switch nodes

When the value of CPU is greater than 50 it sends an alert . The template node properties (orange node ) connected to alert node (teal) are as so :

Alert: CPU {{topic}} is {{payload}}%
Break output value from main CPU usage node to 4 separate gauges (teal) to visualize the data coming in at each core

By this point you can get the idea that the data is pushed and manipulated along each node and its output is being visualized by each dashboard UI node . Imagine instead of a CPU usage node as the main data point you can have other nodes providing you an influx of data such as an IoT device or even tweets coming in from social media. You can use the same methodology to visualize data no matter what input.

Creating this type of program can get very complicated when dealing with front end and server-side code. I hope after following this flow, you feel that Node-RED provides an easier way to create and visualize data that in many other cases could require more time, effort and knowledge to do. Node-RED is a great tool for everyone with all backgrounds and I hope that this example inspires you to go out there and create on you own!

Note: This particular example uses no code, however, if you do want to make robust dashboards you might want to include some function nodes to manipulate data using javascript. The purpose of this article is to show that applications can be created with no code / low code using Node-RED

Check out my Node-RED dashboards Workshop to get step by step instructions on how to create this flow as well as 10 other examples!

To get started make sure you register for the IBM Cloud and create a Node-RED starter kit! This will have all you need to get up and running with Node-RED dashboards today!

I hope this blog helps you as you begin your next prototyping journey! Give me a follow if you like this post, or follow me on Twitter @poojamakes to see what classes I am teaching on Node-RED! 🙂 🏙️