How to Build a Grafana Dashboard with Node-RED & InfluxDB

In this final part of our Node-RED integration blog series, I will be covering how you can accelerate your website performance monitoring strategy by building a custom dashboard using the popular open data visualization platform, Grafana.

We will be using Node-RED to act as the endpoint for the Test Data Webhook, which will parse and inject the payload into InfluxDB, which Grafana will then query to build the dashboard. Grafana supports a number of data sources by default, but for this exercise, InfluxDB is used.

The Node-RED portion of this implementation is actually very simple, and to make things even easier, you can grab a skeleton flow directly from GitHub and import this into Node-RED. You will need to install the InfluxDB node in Node-RED.

This is done by going to ‘manage palette,’ selecting the install tab, and searching for InfluxDB.

The imported flow creates an endpoint and an extract, transform, and load function into InfluxDB.

This will need to be updated to reflect your InfluxDB configuration. The node defaults to http://127.0.0.1:8086 and a database name of ‘Catchpoint.’

It’s necessary that your Node-RED instance is a public endpoint so the Test Data Webhook can POST data.

InfluxDB and Grafana do not need to be publically exposed; I’ve used Docker to run both as containers on my Mac.

A fresh installation of InfluxDB doesn’t have any databases so you will need to create one. You’ll also need to connect to the InfluxDB instance and create a database:

You can now configure the Test Data Webhook to point to your new endpoint running in Node-RED and the database will start to populate. The ETL flow in Node-RED will inject data into three new measurements, test_counter, test_byte and test_timing.

The ETL function can easily be edited to suit your own needs by including additional metrics over the ones already defined.

Login into Grafana and from the main menu, select ‘Data Sources.’ Add a new data source and complete the details for your own instance.

An example JSON schema for a dashboard is available on GitHub; copy this to your clipboard. From the Dashboards menu, select the sub-menu item ‘Import.’ Paste the contents of your clipboard into the ‘Or paste JSON’ text area and click ‘Load.’

The dashboard will default to the name ‘Catchpoint,’ so just click Import to continue.

If you have data in InfluxDB, you will see the dashboard display data. The screenshot below is the example dashboard showing last seven days of data for a given test for all nodes.

If all is working well, you can do a direct comparison with data views from within the Catchpoint portal.

Using tools that work well together is a key element of a sound website performance monitoring strategy, which is why we continue to frequently add new integrations.

If you have any suggestions, feedback, or comments regarding our integration capabilities, please feel free to reach out to blog@catchpoint.com, or start a discussion in our new User Community if you’re already a user.

If you’d like to learn more about our integrations and website performance monitoring solutions, sign up for a free, seven-day trial.