Create an index.html page with template below
Create a javascript file called script.js
Have a copy of the downloaded dataset below
Download this file and save into a new folder - https://data.giss.nasa.gov/gistemp/tabledata_v4/GLB.Ts+dSST.csv
Have a look at the data structure
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
</head>
<body>
<div style="width:400px; height:400px;">
<canvas id="basicchart" width="400px" height="400px"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
Create some variable to store the read data
xLabels []
yData []
const chart1 = document.getElementById("basicChart"); //find and reference the canvas identifer in the HTML space
var xLabels = []; //will store the x axis labels or years
var yData = []; //will store the y axis data or temperatures
2. Read the local data from the file.
We are using an async function so that the remaining instructions are not executed until all the data is read.
async function getData() {
const response = await fetch("data.csv"); //read all data into response
const data = await response.text(); //convert response into text only
console.log(data); //print the data for testing
})
}
3. Now we need to work through each line of the text file and split the data based on the commas in each line. We will store each data item in separate arrays
xLabels
yData
See lines in blue
async function getData() {
const response = await fetch("data.csv");
const data = await response.text();
console.log(data);
const rows = data.split('\n').slice(1); //split all the lines by a new line \n and remove first two rows that contain titles
rows.forEach(elt => { //different way to loop. You could see use a for loop.
const row = elt.split(',') //read each line and split them into an array for each comma
const year = row[0]; //separate year
const temp = row[1]; //separate temp for Jan
console.log(year, temp);
xLabels.push(year); //push the found year into our global array
yData.push(parseFloat(temp)); //push the found temp into global array
})
}
The above examples could be reused on any text data set separated by commas. if you had more data you collect
var tempGraph = new Chart(chart1,
{
type: 'line', //type of chart could be bar, line, pie etc.
//data sets array for multiple series
data: {
labels: xLabels, //x axis labels as an array
datasets: [
// first series of data{
{
label: 'Water Temperatire', //data set label
data: yData, //y values as an array that match the labels array by index position
borderWidth: 1,
backgroundColor: 'blue'
},
],
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
});
Finally update the chart at the end of the getData function
tempGraph.update();
AND call the GetData() function at the top of the program