Fetch API Demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #chart-one {
      height: 75%;
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="chart-one"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    const fetchParams = {
      method: "GET",
      mode: "cors",
      cache: "default"
    };

    const url = "https://swapi.py4e.com/api/people/";

    fetch(url, fetchParams)
      .then(res => {
        if (!res.ok) {
          throw new Error(res.statusText);
        }
        return res.json();
      })
      .then(data => {
        const characters = data.results;
        let characterData = [];
        characters.forEach(function(character) {
          characterData.push([character.name, parseInt(character.height)]);
        });
        const chartOneData = {
          type: "bar",
          title: {
            text: "Fetch + REST API Endpoint Demo",
            adjustLayout: true
          },
          tooltip: {
            text: 'Name: %kt<br>Height: %vvcm'
          },
          scaleX: {
            label: {
              text: 'Characters'
            },
            item: {
              angle: '-45'
            }
          },
          scaleY: {
            label: {
              text: 'Height In CM'
            }
          },
          series: [{
            values: characterData
          }],
          plotarea: {
            margin: 'dynamic'
          }
        };
        zingchart.render({
          id: "chart-one",
          data: chartOneData,
          height: "100%",
          width: "100%"
        });
      })
      .catch(err => {
        console.log("Error Getting Data From Star Wars API");
      });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="chart-one"></div>
</body>

</html>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#chart-one {
  height: 75%;
  width: 80%;
  margin: 0 auto;
}

const fetchParams = {
  method: "GET",
  mode: "cors",
  cache: "default"
};

const url = "https://swapi.py4e.com/api/people/";

fetch(url, fetchParams)
  .then(res => {
    if (!res.ok) {
      throw new Error(res.statusText);
    }
    return res.json();
  })
  .then(data => {
    const characters = data.results;
    let characterData = [];
    characters.forEach(function(character) {
      characterData.push([character.name, parseInt(character.height)]);
    });
    const chartOneData = {
      type: "bar",
      title: {
        text: "Fetch + REST API Endpoint Demo",
        adjustLayout: true
      },
      tooltip: {
        text: 'Name: %kt<br>Height: %vvcm'
      },
      scaleX: {
        label: {
          text: 'Characters'
        },
        item: {
          angle: '-45'
        }
      },
      scaleY: {
        label: {
          text: 'Height In CM'
        }
      },
      series: [{
        values: characterData
      }],
      plotarea: {
        margin: 'dynamic'
      }
    };
    zingchart.render({
      id: "chart-one",
      data: chartOneData,
      height: "100%",
      width: "100%"
    });
  })
  .catch(err => {
    console.log("Error Getting Data From Star Wars API");
  });