In this article, we are going to create a simple chart by fetching JSON Data using Fetch() method of Fetch API. The Fetch API allows us to conduct HTTP requests in a simpler way.
The fetch() method: The fetch method fetches a resource thereby returning a promise which is fulfilled once the response is available.
Syntax:
const response = fetch(resource [, init])
Parameters:
- resource: The path of the resource( can also be a local file)
- init: Any further options you want to add such as headers, body, method, etc.
Approach: The steps can be described as below:
Step 1: The first step is to call the fetch function by specifying the path of the resource. In this example, we will be using the free resource from the URL as follows:
“https://datausa.io/api/data?drilldowns=Nation&measures=Population
It contains the population of the U.S in different years. The Response object is shown below:
Response {
type: “cors”,
URL: “https://datausa.io/api/data?drilldowns=Nation&measures=Population”,
redirected: false,
status: 200,
ok: true,
statusText: “OK”,
headers: Headers,
body: ReadableStream,
bodyUsed: true
}
body: ReadableStream { locked: true }
bodyUsed: true
headers: Headers { }
ok: true
redirected: false
status: 200
statusText: “OK”
type: “cors”
url: “https://datausa.io/api/data?drilldowns=Nation&measures=Population”
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }
Step 2: We will then get a result in the stream of data. We are then viewing our JSON data which is as follows:
Object { data: (7) […], source: (1) […] }
data: Array(7) [ {…}, {…}, {…}, … ]
0: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2019, …
}
”ID Nation”: “01000US”
“ID Year”: 2019
Nation: “United States”
Population: 328239523
“Slug Nation”: “united-states”
Year: “2019”
<prototype>: Object { … }
1: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2018, …
}
2: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2017, …
}
3: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2016, …
}
4: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2015, …
}
5: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2014, …
}
6: Object {
“ID Nation”: “01000US”,
Nation: “United States”,
“ID Year”: 2013, …
}
length: 7
<prototype>: Array []
source: Array [ {…} ]
<prototype>: Object { … }
As you can see we have an array of length 7. And each object has several properties. Out of these properties, we are just storing the two properties i.e., Year and Population into two different arrays by using a for loop.
Step 3: The final step is we are creating a chart from the data received. For doing so, we are using chart.js which is an easy way to include charts on our website. Add CDN link in your head tag
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js”>
Below is the implementation of the above approach:
<html>
<head>
<script type="text/javascript" src=
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script src=
</script>
<title>US Population Chart</title>
</head>
<body>
<canvas id="bar-chart" width="800" height="450">
</canvas>
<script>
getData();
async function getData() {
const response = await fetch(
console.log(response);
const data = await response.json();
console.log(data);
length = data.data.length;
console.log(length);
labels = [];
values = [];
for (i = 0; i < length; i++) {
labels.push(data.data[i].Year);
values.push(data.data[i].Population);
}
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd",
"#8e5ea2",
"#3cba9f",
"#e8c3b9",
"#c45850",
"#CD5C5C",
"#40E0D0"],
data: values
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'U.S population'
}
}
});
}
</script>
</body>
</html>
|