[Tutorial] Visualizing IoT Edge Data On Databox, The Business Analytics Platform & KPI Dashboards platform in 2021

Introduction

This article is part of a series to show how to integrate Gravio with different dashboards and data visualization platforms, and using different techniques to show your data in new and interesting ways. Today we will be showing you how to use Databox as a data visualization platform for Gravio CO2 sensor data.

Approach

tldr; we are using a Gravio CO2 sensor and HTTPS API requests, and aim to visualise Time Series data of sensor readings over time and in real-time.

Note: if you have a Gravio Basic subscription, you could use a Temperature Sensor instead, as that will also provide Time Series data, though the data is sent less frequently.

We use HTTPS to send the data because: this is usually the minimum that a Dashboard provider needs to support; it doesn’t require an MQTT broker setup, and allows us to focus on the Dashboard’s core purpose: showing information. 

We’ll be sharing MQTT examples in future posts, follow us on Twitter or join our Gravio Slack community to find out when.

About Databox

Website: https://databox.com/

Databox is a cloud-based platform that enables companies to monitor, analyze and react accordingly to the data displayed in one place. You can choose between various types of integration with other popular platforms such as Google Analytics etc.

Tutorial

Requirements

• Gravio HubKit setup - the Gravio Edge server
• Gravio Studio installed (available on macOS and Windows)
• Gravio Standard account - sign up here (To be eligible for the CO2 sensor)
• Gravio CO2 Sensor (or a Temperature Sensor available with Gravio Basic)
• Gravio CO2 sensor paired and configured with Gravio Studio - setup info here
• Free account with Databox Platform - sign up here

Steps

Part 1: Setting Up Databox

Step 1:

Log in to Databox and head over to ‘Data Sources’ tab and select ‘New Connection’

Step 2:

Look for the ‘Push Custom Data’ tile and select it. Then, press ‘Create Token’ and follow the steps. 

Note: Please remember to copy your token as we will need to use it later.

Part 2: Creating Actions and Triggers in Gravio Studio

Step 1:

After the data source has been created, now we are ready to connect the data to Databox.

Open Gravio Studio:

1. Create a new ‘Action’
2. Add the ‘HTTP Request’ Action
3. Start populating the following properties into the left column:

• Method - POST
• URL - https://push.databox.com
• Content-Type - application/json
• Authorization - Pre Basic
• Username - your token

Note: Databox HTTP tokens use the username. And you may want to refer to their API documentation for extra guidance.

You can use the diagram below as a reference.

Step 2:

Next, we will set the pre-mapping on the right column.

1. Enter the text required in the fields for the “Pre Mappings”.

1. cp.Headers = {"Accept": "application/vnd.databox.v2+json"}
2. cv.Payload = {"data":[{"$CO2 Reading": tv.Data}]}

Note: The ‘$’ character is required by Databox to set the Metric in the Data Source, so please remember to include it.

Step 3:

Let us now test the Action created. Press the Play button on Gravio Studio and if it is successful, it will display something like this in the console.

Step 4:

Now we will need to create the Trigger for the Action we want. In this case, we want the Trigger set up such that when a CO2 Reading has been collected by the Gravio CO2 Sensor, it will Trigger the Action to post the reading to Databox Platform.

1. In the main page of Gravio Studio, select the ‘Triggers’ tab
2. Select the ‘+’ sign to add a new trigger
3. Input details in the ‘Conditions’ tab
4. Select the Action we have just created in the ‘Action’ tab

You can refer to the following images as a reference for the steps.

Finally, remember to turn on the Trigger as we are using it.

Part 3: How to Display Custom Data on Databox

Step 1:

Go back to Databox and go into the ‘Data Management’ tab on the left. If the data sent was successful, you should see that the Data Connection Status will be changed to ‘Updated just now’.

Note: If the status did not change, you may need to refresh your browser.

Step 2:

Time to begin the visualisation process! Go to your Dashboard, create one if you do not have one and select ‘Edit’.

Note: You may want to ensure that your dashboard is clean so that it does not get too confusing.

Step 3:

We need to add a data source to the dashboard. 

1. Please select the ‘Visualization Types’ tab
2. Drag ‘Number’ onto the dashboard

Step 4:

In order to determine what this box is ultimately going to display, we will need to change its settings to get the data from the source that we have created. 

1. On the right panel, we selected the data as ‘CO2 Reading’ (which is what we have named when configuring it in Gravio Studio) as the Block Tile
2. For Data Source, we have selected our Data Source that was created at the start of the tutorial
3. Date Range is set to ‘All Time’

Step 5:

Finally, we will need to go into ‘Advanced Settings’. In this section, you will choose how the data you have sent from Gravio is manipulated. For example, you can add the values, count, min, avg etc. 

To display real-time data, I have selected ‘LATEST’ as my aggregations. Alternatively, you can refer to the diagram below and follow the exact configuration.

Step 6:

Hooray! We have successfully sent custom edge processed CO2 readings from Gravio Studio to Databox! To view your Dashboard and see how it looks, please go back to the home page and select ‘View’ on your dashboard.

Summary

Databox has clear documentation for the integration process which makes pushing data to the dashboard for visualization very simple. If you have data connections which you would like to visualize quickly from anywhere, Databox is a great choice. 

Pricing

• https://databox.com/pricing