Dashing Through The Data: Visualizing Metrics with n8n
Tags: n8n, metrics, visualization, nocodeplatform
Published: 2020-10-08 12:30:58

---
title: Dashing Through The Data: Visualizing Metrics with n8n
published: true
date: 2020-10-02 16:37:10 UTC
tags: n8n,metrics,visualization,nocodeplatform
canonical_url: https://medium.com/n8n-io/dashing-through-the-data-visualizing-metrics-with-n8n-78f3f0309da5
---

I use information from all over the internet. I visit hundreds of new web pages every day, both for personal and professional projects. It’s part of the process, and I’m happy to do it.

But, every day, I also waste precious time checking the same old websites for other vital information; weather, news, stock portfolio, email, Twitter, work alerts, and so on. And we all have a list like this. And you may find yours just as frustrating.

What annoys me the most is that the second I leave the site, I instantly wonder if the information has changed, and I stress out until I check it out again.

I finally got so fed up with all this chasing after information! Instead of me going to look up information in twenty different places, why can’t this information come to me in one single spot?

And that’s when it hit me 🥊

### I Need a Dashboard!

A dashboard makes so much sense! It can contain any information that I want! It can be updated several times a day and can be permanently displayed on a monitor. All I need to do is glance at it for a few seconds, and I know what is going on.

What sealed the deal for me was that most web services can be easily queried with [n8n](https://n8n.io/), which can then talk to [Smashing](https://smashing.github.io/), a dashboarding system. Combining these three technologies (web services, n8n and Smashing) would save me significant time every day and keep me better in the loop with what is going on in other areas of my life.

And the best part? You can build your custom dashboard as well!

In this article, we will pull information from [GitHub](https://github.com/), [Docker](https://www.docker.com/), [npm](https://www.npmjs.com/), and [Product Hunt](https://www.producthunt.com/) about the n8n project and then display it using a Smashing dashboard. Since this information is constantly changing, n8n will perform this every minute. The workflow for this project looks something like this:

![](https://cdn-images-1.medium.com/max/1024/1*IziHFaKQSDo9MHzgJa1DcQ.png)<figcaption>n8n Dashboard Data Workflow</figcaption>

### n8n and Smashing

The two essential pieces of this project are [n8n](https://n8n.io/) and [Smashing](https://smashing.github.io/). They make up the core of the project and are very well suited to working together.

Every minute, n8n gathers the data from the four data sources using their [API](https://en.wikipedia.org/wiki/API) interfaces. It then takes this data and extracts the pieces which are useful and then pushes it to the Smashing dashboard.

At this point, Smashing takes over and displays the information it receives from n8n based on how the dashboard was built inside the Docker container and which Smashing API endpoint receives the information.

### How Smashing Works

While it is outside of the scope of this article to go into detail on how Smashing works, it is important for you to understand some of the fundamentals of Smashing.

Each Smashing dashboard is made up of a series of widgets. Each widget displays a piece of information. This information is fed to the widget through the Smashing API. Each widget has its own unique API endpoint. When the endpoint receives information, the widget displays that information.

These are the endpoints that have been created for this project and where their information originates:

![](https://cdn-images-1.medium.com/max/1024/1*oJ6kxu7Z6EVOEAmHuR9zfA.png)<figcaption>Dashboard Widgets and Their Data Origins</figcaption>

This dashboard API interface along with the widget types are defined in the _n8n\_overview.erb_ file located in the docker container. (If you are interested in seeing how this file creates the dashboard, it is available [here](https://gist.github.com/TephlonDude/bb3d3b713af97b8e8d3c67d559048b0b).)

### Prerequisites

If you want to build this project yourself, you will need a couple of things ready to go before you start:

1. [**n8n**](https://n8n.io/) — You can get this up and running by checking out the [Quickstart](https://docs.n8n.io/getting-started/quickstart.html) page. You should have a fresh install without any workflows.
2. [**Docker**](https://www.docker.com/) — To save you time, we have built a Docker container with all of the Smashing pieces pre-configured. This way, you can have this piece running quickly and easily. For more information on setting up a Docker environment, please check out one of these [tutorials](https://docker-curriculum.com/#setting-up-your-computer).
3. [**GitHub Account**](https://github.com/) — In order to ensure that you do not run into issues accessing the GitHub API, you can use your account to increase how frequently you can retrieve information from the API. If you do not have a GitHub account, you can [join here](https://github.com/join) and you can learn how to set up your credentials for GitHub in n8n [here](https://docs.n8n.io/credentials/github/).
4. [**Product Hunt Account**](https://www.producthunt.com/) — To use the Product Hunt API, you are required to authenticate with them using your account and a developer token (see “But… I just wanted to run a simple script?” in the [Product Hunt API documentation](https://api.producthunt.com/v1/docs)). If you do not have an account with Product Hunt, you can [sign up here](https://www.producthunt.com/login).

### Quick Start

Many of you want to experience the result before committing to a project or already know the majority of what you will be learning in this article. For you, I have put together this **Quick Start** option. Follow these steps to get up and running quickly. If something is unclear or you want to learn more about how it works, feel free to dig deeper into the sections that follow.

Here are the quick start steps:

- Install the docker container with the following two commands:

```
docker pull tephlon/n8n\_dashboard

docker run --name n8n\_dashboard -d -p 8080:3030 --rm tephlon/n8n\_dashboard:latest
```

- Copy the n8n workflow from [here](https://n8n.io/workflows/693) and paste it into your n8n installation
- Modify the following nodes with your information. I have highlighted them in red in the workflow for easy identification:
- **Dashboard Configuration**  — set value of _dashboardHostname_ to your docker install
- **Retrieve Product Hunt Data**  — set your _token_ value based on your [developer token](https://www.producthunt.com/v2/oauth/applications)
- Set up your [GitHub credentials](https://docs.n8n.io/credentials/github/)
- Activate workflow
- Browse to port 8080 of your docker installation

Now that you have a fully functioning dashboard, let’s take a look at what everything does, and maybe inspire you to tweak this workflow to suit your needs.

### The Five Stages of an n8n Workflow

I have noticed in many of the workflows that I create there are five distinct stages that the workflow goes through from start to finish and this workflow is no exception.

1. Trigger
2. Configuration
3. Data Retrieval
4. Data Processing
5. Action

This is how the dashboard workflow looks broken up into these different stages:

![](https://cdn-images-1.medium.com/max/1024/1*h5cBoKw5C0aoS50p_QuQlw.png)<figcaption>The Five Stages of the n8n Dashboard Workflow</figcaption>

Let’s work through setting up these five stages as they pertain to the dashboard project.

### Stage 1 — Trigger

Every workflow has to be told how to start, and this is referred to as the trigger. In this project, we want to update the dashboard with new information every minute. We’ll use the [_Cron_](https://docs.n8n.io/nodes/n8n-nodes-base.cron/) node for that.

Set the **Mode** parameter to _Every Minute_. Doing this will run the workflow (you guessed it) every minute.

Now, the workflow knows how and when to run.

### Stage 2 — Configuration

The configuration stage is generally a little more defined in my workflows than they are for others. I like to create a [_Set_](https://docs.n8n.io/nodes/n8n-nodes-base.set/) node with the majority of the configuration options so that they are all in one place (although there are exceptions to this rule which we will cover in a minute). For those of you who have developed in other tools before, you can think of this node as [global variables](https://en.wikipedia.org/wiki/Global_variable) that are available to all other nodes within the workflow.

Not all configuration settings are set at this time for two reasons:

1. The value is retrieved in a later stage
2. _Set_ node values get copied when exported. If you have sensitive data such as API tokens in a _Set_ node, they would also get exported (which would be bad)

As a convention for myself, I like to color the borders of my nodes red that require configuration, and you will see that I have done this as well for this workflow.

For the configuration of this workflow, we have created a _Set_ node called _Dashboard Configuration,_ which contains several string values. Most of these values can be ignored at this point, but if you want to customize the dashboard to monitor your project, this is where you would make these changes. (More on this later.)

As described in the quick start section, the only change you need to add to the _Dashboard Configuration_ node is to set the _dashboardHostname_ value so that it matches your docker container deployment. This is very specific to your docker installation and deployment of the tephlon/n8n\_dashboard container. If your n8n installation is on the same system as your docker installation, this will be _localhost:8080_.

If docker is on a different system than your n8n installation, this value will be either _<docker IP address>:8080_ or _<docker hostname>:8080_. So, if your docker installation is on 192.168.4.25, this value would be _192.168.4.25:8080_. You should be able to get this information from your docker admin. (If it turns out that this person is you and you are uncertain about what this value is, I have found a handy [YouTube video](https://www.youtube.com/watch?v=mPEM557bMR4) which may point you in the right direction.)

This node is connected to the previous _Cron_ node so that these values are loaded every time that the workflow runs, and the values are reset if one of them gets accidentally changed by a different node.

### Stage 3 — Data Retrieval

In this stage, we are collecting all of the data from the different data sources, often using settings from the configuration stage.

We are using two different types of nodes to collect data, depending on the service. n8n has a built-in [_GitHub_](https://docs.n8n.io/nodes/n8n-nodes-base.github) node, so it makes sense to use it for gathering the GitHub data. But, there are no custom nodes for the other three services, so we will use the [_HTTP Request_](https://docs.n8n.io/nodes/n8n-nodes-base.httpRequest/) node to pull information from each service’s API.

The output of the _Dashboard Configuration_ node connects into these four nodes. They then use these settings to know which project to be monitoring.

You will need to change the settings in two nodes for this stage. The _GitHub_ node will need your [GitHub credentials](https://docs.n8n.io/credentials/github/) to work, and the _Retrieve Product Hunt Data_ node will need your [developer token](https://www.producthunt.com/v2/oauth/applications).

You should now have the ability to retrieve all of the raw data provided by these services.

### Stage 4 — Data Processing

Now that we have this data, we need to make sure that it is in the proper format. The two challenges that need to be overcome are:

1. Large numbers are difficult to read
2. Decimal numbers are too long to display properly

To transform these values into something more usable, we will use the [Function](https://docs.n8n.io/nodes/n8n-nodes-base.function/) node. The Function node allows us to write our custom code when a pre-built node may not exist.

A single Function node is added for each service and connected to the output of the nodes created to retrieve the service data.

To add the thousands separator to a value, you reassign the original value with the updated value. The updated value is created by appending the value name with .toString().replace(/\B(?=(\d{3})+(?!\d))/g,","). This tells the system to convert the number to a string and replace every third space between characters with a comma.

For example, to reformat the _pull\_count_ from the Docker service, you would enter the following code:

```
items[0].json.pull\_count = items[0].json.pull\_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”);
```

To round a value to two decimal places, we perform a similar action using the [_parseFloat_](https://www.w3schools.com/jsref/jsref_parsefloat.asp) function and [_toFixed()_](https://www.w3schools.com/jsref/jsref_tofixed.asp) method.

So, to round the _score.final_ value from the npm service, use the following code:

```
items[0].json.score.final = parseFloat(items[0].json.score. **final**.toFixed(2));
```

Each value that needs to be changed has the appropriate line of code added to its _Function _node.

### Stage 5 — Action

The final stage is the action. This is where the n8n workflow performs an action on something. In this case, the workflow posts a value to the dashboard API for a specific dashboard widget.

For example, to update the number of GitHub Stars on the dashboard, the workflow needs to post the _stargazers\_count_ value from the formatted data originally generated by the _GitHub_ node. This is performed using the _HTTP Request_ node, one for each widget.

And that is the final piece! Once the workflow is activated, it will update all of the dashboard widgets every minute with the information it pulls from each service.

### Monitoring Your Own Project

The one thing that most people will want to do is modify this workflow to monitor their own project. I have tried to make this easy by putting all of the changes in one the _Dashboard Configuration_ node.

- **dashboardHostname (default _http://192.168.1.14:8080_)**: This should be the hostname and port of your docker installation. See _Stage 2 — Configuration_ for more details.
- **dashboardAuthToken (default _n8n-rocks!_)**: Used to authenticate with the Smashing dashboard. There should be no need to change this unless you are playing around with the docker image.
- **product\_hunt\_post\_id (default _170391_)**: The post\_id of the product that is being monitored at Product Hunt. You can find this number by going to your product page on Product Hunt and clicking on the _Embed_ button. In the embed code, look for [_https://cards.producthunt.com/cards/posts/_.](https://cards.producthunt.com/cards/posts/.) The number immediately follows this string.
- **npm\_package (default _n8n_)**: Name of the n8n package that is being monitored. You can find your project name by searching for your product at [https://www.npmjs.com/](https://www.npmjs.com/) and copying the name exactly as it is on the webpage.
- **docker\_name (default _n8nio_)**: Name of the user or organization who owns the docker repo being monitored. Find the repository that you are using at [https://hub.docker.com](https://hub.docker.com) (e.g. _jim/nasium_). This is the portion of the string before the “/” (e.g. _jim_)
- **docker\_repository (default _n8n_)**: Name of the docker repo being monitored. Find the repository that you are using at [https://hub.docker.com](https://hub.docker.com) (e.g. _jim/nasium_). This is the portion of the string after the “/” (e.g. _nasium_)
- **github\_owner (default _n8n-io_)**: Name of the user or organization who owns the GitHub repo being monitored. Find the repo that you will be monitoring at [https://github.com](https://github.com) (e.g. _jim/nasium_). This is the portion of the string before the “/” (e.g. _jim_)
- **github\_repo (default _n8n_)**: Name of the GitHub repo being monitored. Find the repo that you will be monitoring at [https://github.com](https://github.com) (e.g. _jim/nasium_). This is the portion of the string after the “/” (e.g. _nasium_)

If there are any of these services which you do not wish to monitor, delete the link between that services’ data retrieval node and the _Cron_ node. This will prevent the node from capturing the data and the widgets on the dashboard will remain unchanged.

### What’s Next?

We have just touched the tip of the iceberg when it comes to dashboarding. Some other ideas that are possible include:

- Charting stock prices
- Displaying weather
- Aggregating RSS feeds
- Monitoring Twitter feeds
- Showing videos from a YouTube channel
- Company phone activity
- Personnel in/out board
- Fleet vehicle tracking

### Our Journey

We’ve covered a lot of ground today. Let’s review what we have accomplished:

1. Installed the custom dashboard in Docker
2. Set the workflow to run every minute
3. Designed a global configuration node to easily manage common variables
4. Gathered data from four different online services
5. Modified the data so that is displays properly
6. Pushed the information for display in the dashboard using its API

I’d love to hear about what you’ve built using n8n! Or if you’ve run into an issue while following the tutorial, feel free to reach out to me on [Twitter](https://twitter.com/tephlondude) or ask for help on our [forum](https://community.n8n.io/) 💙

* * *