Create a chart from JSON data using Fetch GET request (Fetch API) in JavaScript - GeeksforGeeks

29 Nov, 2021
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: trueheaders: Headers { }ok: trueredirected: falsestatus: 200statusText: “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
<html>  <head>    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">    </script>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,                                    initial-scale=1">    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">    </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('https://datausa.io/api/data?drilldowns=Nation&measures=Population');            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>
javascript-object
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?