How to create a chart from JSON data using the Fetch API in JavaScript?-JS Tutorial-php.cn

How to create a chart from JSON data using the Fetch API in JavaScript?

WBOY

Release： 2023-08-24 08:49:09

forward

821 people have browsed it

In this article, we will explore how to create a chart after getting JSON data. To get JSON data, we use the fetch() method of Fetch API. We will first obtain the data and once it is available we will enter it into the system to create the chart. The Fetch API provides a simple interface for accessing and manipulating HTTP requests and responses.

Syntax

const response = fetch(resource [, init])

Copy after login

Parameters

Resource - This is the resource path to get the data.
init - It defines any additional options such as title, body, etc.

Method

< p>The steps can be defined as follows -

Step 1 - We will get the data from the remote server by calling the fetch function .

< strong>Step 1 - Once the data is available, we enter it into the system.

Step 3 - With the help of Chart JS library we will form the chart.

Example #1

In the following example, we get data from a remote server and then create the required chart. US population data is obtained from the server.

#index.html

Real-time demonstration

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">
   </script>
   <title>Population Chart</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <div style="width: 800, height: 600">
      <canvas id="bar-chart">
      </canvas>
   </div>
<script>
   getData();
   async function getData() {
      const response = await fetch(&#39;https://datausa.io/api/data?drilldowns=Nation&measures=Population&#39;);
      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: &#39;bar&#39;,
         data: {
            labels: labels,
            datasets: [
               {
                  label: "Population (millions)",
                  backgroundColor: ["#3a90cd",
                     "#8e5ea2",
                     "#3bba9f",
                     "#e8c3b9",
                     "#c45850",
                     "#CD9C5C",
                     "#40E0D0"],
                  data: values
               }
            ]
         },
         options: {
            legend: { display: false },
            title: {
               display: true,
               text: &#39;U.S population&#39;
            }
         }
      });
   }
</script>
</body>
</html>

Copy after login

Output

After successfully executing the above program, it will generate the population of the United States Bar chart. You can hover your mouse over the bar to see the population count for a specific year. It can also be seen in the gif below

如何使用 JavaScript 中的 Fetch API 从 JSON 数据创建图表？

The above is the detailed content of How to create a chart from JSON data using the Fetch API in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!