Creating HTML links to Plotly graphs

Overview

• In this lesson series we will learn how to create an HTML page with links to data graphs produced using Plotly.
• This will create a simpel Dashboard for us to use so that we can monitor the water quality of a local lake – Peter Hopper lake in Mill Park.
• An example of a Dashboard is included below.
• It includes data on dissolved oxygen, pH and water temperature.

Learning Objectives

• Revision for how to create a HTML web page
• Revision on how to create and link Cascading Style Sheets (CSS) to your HTML document

Create a simple HTML page

• In a previous lesson we already created a simple HTML web page.
• We will repeat many of the steps as a simple revision exercise.

Create a directory named peter-hopper-t3

• Open the Terminal from the top left of the menu bar on the Raspberry Pi.
• Enter the command ls to list all directory contents.

• Enter the command mkdir peter-hopper-t3 to create a new directory named peter-hopper-t3

• Check that the new directory peter-hopper-t3 has been created by listing entering the command ls

• Finally, enter the directory with the command cd peter-hopper-t3

Create the HTML file index.html using the Terminal

• Create an empty file named index.html by entering the command touch index.html

• To verify that the file has been created enter ls
• To see how big the file is enter the command ls -l
• It shows that our file index.html contains zero bytes of data.

Add content to the HTML file index.html using Geany

• Open up Geany from the main Raspberry Pi > Programming menu