Web Technologies Practical 4
School of Computer Science and Mathematics, Keele University
Dr Goksel Misirli - g.misirli@keele.ac.uk
OVERVIEW
In this practical exercise, we continue to use the JavaScript language to construct interactive Web documents
using the Chart.js JavaScript library. We will use this library to create charts and visualise data. Example data and
a template HTML file have been provided via a zip file, available to download from KLE. First, look at the HTML
file (weather.html) and understand how the Chart object is linked to an HTML Canvas entity and how the example
code works. For more information about rendering charts, please see the Chart.js documentation and online
examples.
Remember that the demonstrators can help you with all aspects of these practical exercises–make sure to ask
them if you have any questions or problems during your lab sessions.
Task 1: Rendering daily weather information
Develop an HTML page to render daily weather information for Stoke-on-Trent and London cities. The data are
provided in JSON format and available from the ZIP file. The web page you will develop will display different
properties using HTML and improve the readability of information, considering user experience.
1
The JSON data are placed into the dailydata_stoke and dailydata_london JS variables and are ready to
use. An HTML template (weather.html) has been provided as a starting point. In the template, the longitude
property is read using the JSON parser to populate the related HTML label, as shown below. The template
HTML is available from the provided zip file.
Longitude:<label id="lon"></label>
…
var daily = JSON.parse(dailydata_stoke);
document.getElementById('lon').innerHTML = daily.coord.lon;
Task 2: Using Chart.js library to visualise weather forecast information
In the second part of the practical, you will use the Chart.js JavaScript library to visualise a five-day weather
forecast for Stoke-on-Trent. Data are provided in the JSON format as shown below and available from the ZIP
file. The JSON data are placed into the forecast_stoke and forecast_london JS variables for Stoke-on-
Trent and London and are ready to use.
Prepare three charts to visualise different types of information (e.g., temperature, wind and humidity). As
default, use a line graph for each chart first. Once you finish visualising different types of information, provide
options (e.g., using HTML buttons or via a dropdown menu) to change the type of a graph (e.g., line). Look at the
Chart.js documentation to improve the visualisation of the charts (e.g. formatting X and Y labels and using
different colours).
An HTML template has been provided for you to create the temperature diagram using a line chart, as shown
below.
Hint: If you change the properties of a Chart object, make sure to call the update() method of the Chart object.
2
The HTML template is available from the provided zip file.
<canvas id="myChart"></canvas>
…
var forecast = JSON.parse(forecast_stoke);
this.dateList = forecast.list.map(list => {
return list.dt_txt;
});
this.temperatureList = forecast.list.map(list => {
return list.main.temp;
});
var ctx = document.getElementById('myChart').getContext('2d');
this.chart = new Chart(ctx, {
type: "line",
data: {
labels: this.dateList,
datasets: [
{
label: "Temperature",
backgroundColor: "lightblue",
borderColor: "blue",
fill: false,
data: this.temperatureList
}
]
}
})
3
Task 3: Customise the appearance of the graph from Task 2
Provide different options for users such as colour, size, and font to customise the graph’s appearance from Task
2 using JavaScript.
Task 4: Using Chart.js library to compare weather forecast information
For the second task, use a bar chart to visualise and compare temperature data for Stoke-on-Trent and London
within a single Canvas object.
