Chart.js docs can be found here - https://www.chartjs.org/
Create an index.html and basic.js file in a new folder
In the html file add the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Practice Exercise 1</title>
<!-- below are the links to Bulma and Chart.js -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css"
integrity="sha512-dF4b2QV/0kq+qlwefqCyb+edbWZ63ihXhE4A2Pju3u4QyaeFzMChqincJsKYwghbclpLE92jPb9yaz/LQ8aNlg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
"></script>
</head>
<style>
#chartArea{
width:50%;
}
</style>
<body>
<section class="section">
<div class="container">
<!-- start content -->
<h1 class="title">
Basic Graph Display
</h1>
<!-- create a div for the chart display called chartArea. This div can then be sized to restrict chart width with css-->
<div id="chartArea">
<!-- create a canvas element for the chart called basicChart. this is where the chart will go -->
<canvas id="basicChart"></canvas>
</div>
<!-- end content -->
</div>
</section>
<!-- below is the script for the chart -->
<script src="script.js"></script>
</body>
</html>
Insert the following code template for a column graph in the JS file:
const chart1 = document.getElementById("basicChart"); //find and reference the canvas identifer in the HTML space
//new chart object
new Chart(chart1, {
type: 'bar', //type of chart could be bar, line, pie etc.
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], //x axis labels as an array
datasets: [{
label: '# of Votes', //data set label
data: [12, 19, 3, 5, 2, 3], //y values as an array that match the labels array by index position
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
You can change the following data in the above script.
Chart type can be pie, line etc.
Data - array can be extended with more numbers (y axis values)
The labels can be updated to match the number of data (x axis labels)
Chart colors can be updated with the following:
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
You can add another data set to the graph by adding another array object called datasets:
new Chart(chart1,
{
type: 'bar', //type of chart could be bar, line, pie etc.
//data sets array for multiple series
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], //x axis labels as an array
datasets: [
// first series of data{
{
label: '# of Votes 2024', //data set label
data: [12, 19, 3, 5, 2, 3], //y values as an array that match the labels array by index position
borderWidth: 1,
backgroundColor: 'blue'
},
// seconds series of data
{
label: '# of Votes 2023', //data set label
data: [20, 8, 5, 8, 12, 13], //y values as an array that match the labels array by index position
borderWidth: 1,
backgroundColor: 'red'
}
],
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
});
Create a new folder with an index.html and data.js file
Using the same template from above you can get a static graph appearing. Copy and paste. You may like to update some of the variables and id names.
Create a global variable called votes. var votes = [0, 0]
Create a global variable called graph and attach this to the chart object for a reference
Create a function that will add one to either the index 0 of the vote array or index 1. Here is an example:
function voting(value) {
if (value == "A") {
votes[0] = votes[0] + 1
} else if (value == "B") {
votes[1] = votes[1] + 1
}
display.update();
}
On your index page create two buttons called a and b which run the above voting function passing in "A" or "B"
You should be able to now add votes to the graph by clicking the buttons.
Extend the application to allow voting for three items.
Create a basic application that can enter water temperature over time. The user should be able to enter the results into a text box and press a button to submit. The graph should update automatically.
Create a new folder for the project and create a index.html and script.js file.
HTML code starter template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Practice Exercise 3</title>
<!-- below are the links to Bulma and Chart.js -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css"
integrity="sha512-dF4b2QV/0kq+qlwefqCyb+edbWZ63ihXhE4A2Pju3u4QyaeFzMChqincJsKYwghbclpLE92jPb9yaz/LQ8aNlg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="
https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js
"></script>
</head>
<style>
#chartArea{
width:50%;
}
</style>
<body>
<section class="section">
<div class="container">
<!-- start content -->
<h1 class="title">
Science Experiment Tracker
</h1>
<input class="input" id="tempIn" type="number"
placeholder="Temp">
<button class="button is-primary" onclick="addData()">Add
Data</button>
<!-- create a div for the chart display called chartArea. This div can then be sized to restrict chart width with css-->
<div id="chartArea">
<!-- create a canvas element for the chart called basicChart. this is where the chart will go -->
<canvas id="basicChart"></canvas>
</div>
<h1 class="subtitle">Raw Data</h1>
<!-- create a table to show raw data -->
<table class="table" id="resultsTable">
<tr><th>Entry</th><th>Time</th><th>Temp</th></tr>
</table>
<!-- end content -->
</div>
</section>
<!-- below is the script for the chart -->
<script src="script.js"></script>
</body>
</html>
3. Add this code to the js file
const chart1 = document.getElementById("basicChart"); //find and reference the canvas identifer in the HTML space
const tempIn = document.getElementById("tempIn");
const resultsTable = document.getElementById("resultsTable");
var scienceData = [];
var times = [];
var labels = [];
4. Now we need to create a way of recording the input from the user.
Write a function called addData() that will collected the temp from the input field and push it to the scienceData array. Also add a label number to the labels array and the current time to the times array.
function addData() {
var temp = tempIn.value; //get the value from the input called tempIn from html
scienceData.push(temp); //record the current time into the times array
times.push(new Date().toLocaleTimeString()); //record the current time into the times array
labels.push(labels.length + 1);
scienceChart.update(); //update the chart values
}
d. Update the labels and data property in the chart object with the array names.
//new chart object declared with a variable so we can update later
var scienceChart = new Chart(chart1,
{
type: 'line', //type of chart could be bar, line, pie etc.
//data sets array for multiple series
data: {
labels: labels, //x axis labels as an array
datasets: [
// first series of data{
{
label: 'Temperature Celsius', //data set label
data: scienceData, //y values as an array that match the labels array by index position
borderWidth: 1,
backgroundColor: 'blue'
},
],
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
});
Extension:
What happens if you dont enter a value into the textbox? Can you address this problem?
Can you find a way to print the data in the arrays as a html table to show the raw data? You can review how to create this here
Here is a solution:
function showResults() {
var rows = resultsTable.rows;
//remove all old rows
while (rows.length > 1) {
resultsTable.deleteRow(1);
}
//add new rows
for (var i = 0; i < scienceData.length; i++) {
var newRow = resultsTable.insertRow(-1);
newRow.insertCell(0).innerHTML = labels[i];
newRow.insertCell(1).innerHTML = times[i];
newRow.insertCell(2).innerHTML = scienceData[i];
}
}
Go to this page - https://sites.google.com/concordia.sa.edu.au/seniordigitech/data-and-javascript/reading-data-from-source/reading-local-file-activity