Making Your Own Visualisation Web App!

Difficulty level: Beginner

Data Visualisation for Covid-19 data (Source: uxplanet.org)

If you turn around yourself, you would see a myriad of examples where data are visualised in form of graphs, piecharts, histograms, stats, etc. Visualisation and Analytics are two of the most important aspects of monitoring without which the entire data stack could just mean Nothing. One of the very impressive and essential visualisation application I recently came across was the setting up of Oxygen War Rooms. Amidst the COVID-19 pandemic, states and countries have been facing shortage of oxygen. This utility will monitor the oxygen levels in the state as well as alert incase of any shortage. If this keeps you thinking, how can you make a visualisation app for yourself? Let it be any utility, how do you visualise your/your company’s data on your/your company’s own web application with customisations? Let’s get into it.

There are many visualisation web applications platforms available for you to choose from. Chronograf and Grafana are the best in the market. In this tutorial we will be using Grafana source code available on github to make our own visualisation app. Grafana is an open-source analytics and monitoring solution developed and supported by Grafana Labs. It lets you query, graph, and alert on your time-series metrics no matter where the data is stored. To make it easier for us, we would take all the utilities from the source code and build a new customised Visualisation app with your company name, logo and functionalities.

If you are a beginner to grafana, you can check my article as linked in the side note*. It would only take a day to learn how to send data, visualise it in different forms such as graph, heat map, stat, etc. and also send alerts if needed.

Head on to https://github.com/grafana/grafana/blob/master/contribute/developer-guide.md. The ReadMe contains a guide for you to get started with building one. I’ll summarise it here for convenience.

1. Install Git, GO, and Node.js 14 and yarn on your system.

For MacOS (using homebrew), the commands are:

$ brew install git
$ brew install go
$ brew install node@14
$ npm install -g yarn

2. Open a terminal and download the source code from github and install dependancies as:

$ git clone https://github.com/grafana/grafana.git
$ yarn install --pure-lockfile

In the directory you are in, the file named Grafana would be downloaded. Open the file in any code editor. I have used Atom.

3. Some of the simple customisations you should make to your application is change the Grafana logo and name. Whether you know coding or not, this can be easily done in a small while.

First, Open the folder pkg>api>index.go and change the line 409 AppTitle from “Grafana” to your company name. For mine I have changed it to “Hour Glass”.

Next go to, public>app>core>components>Branding>Branding.tsx and change the AppTitle and LoginTitle, even the slogans to ones of your choice by replacing the grafana default ones.

To make life easier, in your code editor search the project (Ctrl+Shift+F) for ‘Welcome to Grafana’ and replace it with your company name.

Finally to change the logo and images, head to public>img and replace the images apple-touch-icon.png, fav32.png, grafana_com_auth_icon.svg, grafana_icon.svg and mstile-150x150.png with your company logo. Make sure to keep the file name and resolution of your new image same as the one you are replacing. Svg vector images also have to be replaces with the same file format, you can use any online utility to change your images to svg format. You can change all the images as you go when you start working with your web app. I have also changed the background image by replacing login_background_dark.svg as the default mode taken is dark theme.

Once you are done you are ready to view it.

4. Open a terminal, go to the directory with grafana folder and cd into grafana folder. Build the backend as:

$ make run

Open another terminal and cd into the grafana folder, build frontend as:

$ yarn start

Once the yarn has been completed after 100%, head to http://localhost:3000 on any browser and view your web app! The default credentials for username and password is admin.

Hour Glass Web Application (Source: Fathima)

Tada!

If you make anymore changes to the source code, to see it in effect you can restart grafana as said in the documentation: https://grafana.com/docs/grafana/latest/installation/restart-grafana/

Master InfluxDB: Querying Influx Data as Excel

*One of the customisations that I added while using Grafana was to download the data as excel. You can check out the full article clicking link above and then follow the same once you make your own app ready. This article also helps you get an understanding about how Grafana and InfluxDB (Time-Series Database I used for the utility) works. You can make a lot of these additional utilities to your own application once done.

Hope this helped and you can also create an application like Hour Glass to visualise and work with your data.

Until the next article, take care!