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
- From the File drop down menu select File > Open.
- Navigate to the peter-hopper-t3 directory and select index.html
- Enter the following HTML tags to create a simple HTML document
- Enter a title tag for the document within the head tags.
- The text within the title tags will appear on the web page tab when the HTML file is opened within the Browser.
- Add a h1 tag within the body tags.
- Any text here will appear on your web page.
- Save the file index.html
- Open the File Manager and navigate to the directory peter-hopper-t3.
