Data Visualisation with Freeboard.io

Part 1. What is Freeboard.io?

Freeboard.io is a dashboard software that allows you to visualise data quickly and easily. You can visualise data from Application Programming Interfaces, or APIs, from maps and from the Internet of Things (IoT), also known as The Things Network (TTN).

Part 2. Other options researched

While Freeboard.io is the service we chose in the end, a selection of other dashboard softwares were researched during the process. These included Tableau, Grafana Labs, Google Data Studio and Bubble.io. From the research and experimentation, the following results below show the software's advantages and disadvantages and why it wasn't chosen.

• Google Data Studio. This software, developed by Google, aims to be an all-round software capable of being able to visualise data from various different sources. The advantage with Google Data Studio is primarily security and the customisation of graphs. The disadvantages are that we can only upload the data through a .csv (comma-separated values) file and that it's extremely difficult to graph the data we want.

• Grafana Labs. This software has various different advantages, such as the ability to choose from a wide selection of widgets and templates. The disadvantage is that it's somewhat difficult to connect the dashboard to the MQTT server we are using, let alone an API.

• Tableau. Tableau is a widely-used dashboard software that allows businesses and companies to quickly create dashboards easily. The advantages include the fact that it's easy to use and easy to create dashboards. The downside is that Tableau cannot collect data from the Internet of Things, and it doesn't allow for custom code in the dashboard service.

• Bubble.io. Bubble.io is a very similar software to Tableau, with many of the same advantages and disadvantages.

The reason why Freeboard.io was chosen as the optimal dashboard software is because of the easy-to-use interface (which we shall see later) as well as the ability to connect it directly with the MQTT server without the need of another server such as IBM cloud. The downsides with Freeboard.io is the lack of customisation with the widgets and the lack of permanent data storage on the dashboard. ?However, these problems are not too concerning and can be easily fixed with simple solutions.

Part 3. Getting Started

Creating an account on Freeboard.io

The first step is to create an account on Freeboard.io. The firt step is to go to the following link - http://freeboard.io/signup. Once there, create a username, then enter your email and cretae a safe, secure password. Then click "Create My Account" to create your account.

Sign in to your account

Once you have created an account, go to the following link to sign-in to that account - https://freeboard.io/login. Once here, enter your username and password to log into your account. Once logged in, you should see a screen that looks something similar to this.

Creating a new Dashboard

to create a new dashboard, enter a name in the text-box located towards the top-right hand corner (refer to the screenshot above for assistance finding the text box). Once the name of your dashboard has been entered, simply click the blue button "Create New" and it will take you to a screen that looks like what is below.

Creating a new data source

now we need to create a data source which we can then link to our graphs. We'll be collecting our data from the sensors at the Botanica Park Lake in Bundoora. We need to collect that data from an API, or Application Programming Interface, which is an interface that allows us to collect data the server is receiving. To do that, click "Add" underneath the title "Data Sources" in the dashboard (refer to screenshot above for reference). Once you click add, set the type to JSON (since we are getting the data to the dashboard in the JSON format). You should see something like this.

Add the following information into the respective text boxes. Notice that the URL provided below has the link to the API we are using (https://api.eagle.io/api/v1/nodes/) followed by the ID of the node we want to collect the data from (624a5d52d3b9f6dc856492bb). for now, this data source will be collecting data from our

Name - Botanica Park Water Temperature Data URL - https://api.eagle.io/api/v1/nodes/624a5d52d3b9f6dc856492bb Refresh every 240 seconds.

Next, let's create 2 headers. The name for the firts header is "Content-type" and the value is "application/json". The name of the second header is "X-Api-Key" and the value is "Ti74NO5dur5Zs8WiVXPEo7VP5VA0PRrvIFmURTzK". Before saving the data source, your screen should look like this.

Then click Save to create your data source!

Creating a Line Graph

Let's create a line graph of the temperature data we are collecting. To do so, click on the button "Add pane". Once you click on that, a new box will be created on the blank dashboard. On the pane, there are three options. Click the '+' button on the pane and then set 'Type' to "Sparkline". Then you should see the same screen as the one below.

Set the title to "Water Temperature" and then click the "+ datasource" button to add a data source. From the options, choose "Botanica Park Water Temperature Data" and then select "currentValue". You should see something like what is shown below.

Then click the "Save" button and then the graph is created. Now you might be thinking that you don't see a graph. It's not a problem in Freeboard, but rather we haven't refreshed the data. To refresh the data source, simply click the refresh button next to the "Botanica Park Water Temperature Data" data source. Once you refresh, you should see something like this.

And congrats!!! You have a dashboard!

Conclusion

Feel free to continue to experiment with Freeboard and to discover new ways of displaying information, with text, with gauges and with graphs!