ZuoTi.Pro
Question

Write a javascript program that downloads data from an API and displays it on a graph....

Write a javascript program that downloads data from an API and displays it on a graph. Use a government API.

I recommend using jsfiddle or other online editor.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1 
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
 
  <script 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: " 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>

Demo 250 200- 150- Height In CM 100 50 0 C-3PO R2-D2 R5-14 Darth Vader Leia Organa Owen Lars Beru Whitesun lars Biggs Darklig

0 0
Add a comment
Know the answer?
Add Answer to:
Write a javascript program that downloads data from an API and displays it on a graph....
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT