Chartjs-Json data visualization in Javascript with chartjs

by

1👍

✅

you didn’t pass the proper data to the chart object.

Example below:

let xlabels = [];

chartit();

async function chartit() {
  await getData();
  const ctx = document.getElementById("chart").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: xlabels.map(o => o.date),
      datasets: [
        {
          label: "Covid-19",
          fill: true,
          lineTension: 0.1,
          backgroundColor: "rgba(204, 16, 52, 0.5)",
          borderColor: "#CC1034",
          data: xlabels.map(o => o.cases),
        },
      ],
    },
  });
}

async function getData() {
  const response = await fetch(
    "https://disease.sh/v3/covid-19/historical/Lebanon?lastdays=30"
  );
  const data = await response.json();
  const { timeline } = data;
  const cases = timeline.cases;
  for (const item in cases) {
    xlabels.push({ date: item, cases: cases[item] });
  }
  //console.log(timeline.cases);
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<html>
  <body>
    <canvas id="chart" style="width: 400%; max-width: 400px"></canvas>
  </body>
</html>

Leave a comment