Charting REST API Data in a Dashboard
Within a couple of minutes you'll learn how to request data from a REST endpoint and build a chart to display data points
There are many different ways to get data for a Node-RED dashboard. One common way is to use a REST API.
A REST API is a set of web services that allow developers to interact with a server and its resources. To get data from a REST API, you can use the HTTP nodes in Node-RED to send HTTP requests to the API and receive the data in the response. In this post we'll guide you through the process.
First, let's consider what data we want to get. For a dashboard chart it's nice if there were at least two dimensions to it. For this guide we'll create a chart of the number of downloads for a certain NPM package.
# Getting some data
Reading the data for a package is done through a
HTTP GET request, for example:
A simple flow to achieve this would be:
Where we paste the URL from above into the settings panel:
When running this flow you'll see a blob of text in the
Debug pane. This is a great first start, but a blob isn't useful for the rest of the flow.
We need to parse the data as JSON. While the JSON node
would work, the HTTP request node can do this natively. Let
a parsed JSON object
Return settings of the HTTP request node.
So now we got the data, and a little more than we need, so let's change the message output to keep only what we're interested in;
payload.downloads. To do this, we'll use the change node.
# Building the Dashboard
For this article we're going to be using the new dashboard and we'll install
@flowforge/node-red-dashboard. Please follow the instruction on the Dashboard website.
Now we drag in the
chart node that's available after installing the dashboard package and make sure it' input comes from the configured
change node. Before hitting the deploy button the dashboard itself needs configuring:
First add configuration for the
To setup the
ui-group correctly you'll need to add configuration for the
To create the UI page it requires another 2 config settings,
ui-base, and the theming through
The default theme is great, so just accept that, and save all dialogs to continue the chart creation.
# Normalizing the data
The data for the chart needs to be changed before we can show it. The messages should have a
y key. So let's prepare the data with a combination of the Split and change node.
The Split node with the default configuration allows to 30 elements of the array to be mapped individually. The change node will set the
on the message:
Connect the change node output to a new chart node, and voila:
# Keeping the data up-to-date
While we created a chart and it has some data, there's one more thing to explain. How can the data be kept up-to-date? It's straight forward to have the
node run every night, but the chart would now have multiple data points for the same day. This paints multiple lines on top of each other. While that works, the hover of the chart will display the duplication and it's wastefull.
So before we update the chart we need to send a message to the chart where the
. That way the chart is emptied first, and right afterwards it will receive the new data to write.
- Building a Custom Video Player in Dashboard 2.0
- Beyond Automation - AI Use Cases that are shaping the next manufacturing frontier
- Deploying the FlowFuse Device Agent via Balena
- Overhauling the Dashboard 2.0 Build Pipeline
- Integrate with ChatGPT Assistants with Node-RED