Data Visualisation with Freeboard.io - Revision history

EdmondLascaris: /* Creating a Line Graph */

2022-04-15T04:41:26Z

Creating a Line Graph

← Older revision		Revision as of 04:41, 15 April 2022
Line 57:		Line 57:
	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.		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.

	[[File:Sparkline before.png] \| 900px]]		[[File:Sparkline before.png \| 900px]]

	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.		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.

Rudra: /* Creating a Line Graph */

2022-04-15T03:38:23Z

Creating a Line Graph

← Older revision		Revision as of 03:38, 15 April 2022
Line 55:		Line 55:
	== Creating a Line Graph ==		== 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 in the ~~blank space~~.		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.

			[[File:Sparkline before.png] \| 900px]]

			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.

			[[File:Sparkline after.png \| 900px]]

			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.

			[[File:Freeboard graph.png \| 900px]]

			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!

Rudra at 05:59, 14 April 2022

2022-04-14T05:59:10Z

← Older revision		Revision as of 05:59, 14 April 2022
Line 52:		Line 52:

	Then click Save to create your data source!		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 in the blank space.

Rudra at 04:10, 14 April 2022

2022-04-14T04:10:09Z

← Older revision		Revision as of 04:10, 14 April 2022
Line 39:		Line 39:

	[[File:Data-source.png\|900px]]		[[File:Data-source.png\|900px]]


			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.

			[[File:Data source finished.png\|900px]]

			Then click Save to create your data source!

Rudra at 01:42, 14 April 2022

2022-04-14T01:42:05Z

← Older revision		Revision as of 01:42, 14 April 2022
Line 18:		Line 18:

	= Part 3. Getting Started =		= Part 3. Getting Started =
	== 1. Creating an account on Freeboard.io ==		== 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.		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.

	== 2. Sign in to 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.		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.
Line 28:		Line 28:
	[[File:Home-page_freeboard.png\|900px]]		[[File:Home-page_freeboard.png\|900px]]

	== 3. Creating a new Dashboard ==		== 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.		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.

	[[File:Dashboard_plain.png\|900px]]		[[File:Dashboard_plain.png\|900px]]

			== 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.

			[[File:Data-source.png\|900px]]

Rudra: /* 3. Creating a new Dashboard */

2022-04-14T01:29:54Z

3. Creating a new Dashboard

← Older revision		Revision as of 01:29, 14 April 2022
Line 30:		Line 30:
	== 3. Creating a new Dashboard ==		== 3. Creating a new Dashboard ==

	to create a new dashboard, enter a name in the text-box located towards the top-right hand corner. 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.		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.

	[[File:Dashboard_plain.png\|900px]]		[[File:Dashboard_plain.png\|900px]]

Rudra at 01:22, 14 April 2022

2022-04-14T01:22:39Z

← Older revision		Revision as of 01:22, 14 April 2022
Line 27:		Line 27:

	[[File:Home-page_freeboard.png\|900px]]		[[File:Home-page_freeboard.png\|900px]]

			== 3. Creating a new Dashboard ==

			to create a new dashboard, enter a name in the text-box located towards the top-right hand corner. 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.

			[[File:Dashboard_plain.png\|900px]]

Rudra: /* 2. Sign in to your account */

2022-04-14T01:11:52Z

2. Sign in to your account

← Older revision		Revision as of 01:11, 14 April 2022
Line 25:		Line 25:

	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.		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.

			[[File:Home-page_freeboard.png\|900px]]

Rudra: Created page with "= 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 T..."

2022-04-14T00:44:08Z

Created page with "= 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 T..."

New page

= 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 =
== 1. 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.

== 2. 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.