[Chartjs]-How to fetch all data from API files and assign their values to chart?

by

1👍

There are 2 problems in this code.

Problem 1: using async and sync code in one place. Here is an example snippet (for testing I removed fetch, but replaced it with its data, because your fetch is not working in snippet here).

Compare results of DATA1 and DATA2. The first one is sync, the second – async. You can see, that your sync variant is not working. So, you need async (using .then).

const getData = async() => {
  //console.log("Processing");
  //const request = await fetch("http://46.101.95.202/api/repos/RxJava/");
  //const data = await request.json();
  const data = {
    "key": "RxJava", "name": "RxJava", "language": "java",
    "path": "/RxJava_c", "links": { "self": "/api/repos/RxJava/" },
    "contents": [{
        "path": "/RxJava_c/docs", "name": "docs",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/docs"
      },
      {
        "path": "/RxJava_c/gradle", "name": "gradle",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/gradle"
      },
      {
        "path": "/RxJava_c/src", "name": "src",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/src"
      }
    ]};
  return data;
};

console.log("DATA1 =", getData());

getData().then((mydata) => {
  console.log("DATA2 =", mydata);
});

Problem 2: even if we change sync code to be async, the data itself is not suitable for ChartJS. Look:

const getData = async() => {
  //console.log("Processing");
  //const request = await fetch("http://46.101.95.202/api/repos/RxJava/");
  //const data = await request.json();
  const data = {
    "key": "RxJava", "name": "RxJava", "language": "java",
    "path": "/RxJava_c", "links": { "self": "/api/repos/RxJava/" },
    "contents": [{
        "path": "/RxJava_c/docs", "name": "docs",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/docs"
      },
      {
        "path": "/RxJava_c/gradle", "name": "gradle",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/gradle"
      },
      {
        "path": "/RxJava_c/src", "name": "src",
        "type": "directory",
        "follow": "/api/repos/RxJava?data_path=/RxJava_c/src"
      }
    ]};
  return data;
};

getData().then((mydata) => {
  //console.log(mydata);

  var popCanvas = document.getElementById("myChart");

  Chart.defaults.global.defaultFontFamily = "Lato";
  Chart.defaults.global.defaultFontSize = 18;

  //  y = Line of code in the file
  //  x = Line of comments in the file
  var popData = {
    datasets: [{
      label: ['How many comments have been made in the code?'],
      data: [{
          x: mydata,
          y: mydata,
          r: mydata
        },

      ],
      backgroundColor: "#FF9966"
    }]
  };

  var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData
  });
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart">

Leave a comment