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

Last Updated : 29 Nov, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

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 
<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>

Output:


Next Article
Create a chart from JSON data using Fetch GET request (Fetch API) in JavaScript

N
namaldesign
Improve
Article Tags :

Similar Reads