I am getting an issue my chart using chart.js is not appering until i tap 3 time on label button

by

👍:0

See if this works for you:

(async function() {
  var url = "https://api.covid19india.org/data.json";
  var response = await fetch(url);
  var data = await response.json();
  var barChartData = {
    labels: data.statewise
      .filter(({
        state
      }) => state !== "Total")
      .map(({
        state
      }) => state),
    datasets: [{
      label: "Confirmed cases",
      backgroundColor: "rgba(255,99,134,0.5",
      borderWidth: 1,
      data: data.statewise
        .filter(({
          state
        }) => state !== "Total")
        .map(({
          confirmed
        }) => confirmed),
    }, ],
  };
  var lineChartData = {
    labels: data.cases_time_series.map(({
      date
    }) => date),
    datasets: [{
        fill: false,
        label: "Confirmed cases",
        backgroundColor: "rgba(255,99,134,0.5",
        borderWidth: 1,
        data: data.cases_time_series.map(
          ({
            totalconfirmed
          }) => totalconfirmed
        ),
      },
      {
        fill: false,
        label: "Deceased",
        backgroundColor: "rgba(99,255,134,0.5",
        borderWidth: 1,
        data: data.cases_time_series.map(
          ({
            totaldeceased
          }) => totaldeceased
        ),
      },
    ],
  };
  var ctx = document.getElementById("canvas").getContext("2d");
  var ctx1 = document.getElementById("canvas1").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
      responsive: true,
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "States with most no. of cases",
      },
    },
  });
  window.myLine = new Chart(ctx1, {
    type: "line",
    data: lineChartData,
    options: {
      responsive: true,
      legend: {
        position: "top",
      },
      title: {
        display: true,
        text: "Number of cases/deceased over time",
      },
    },
  });
})();
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>COVID-19 in India</title>
</head>

<body>
  <div id="container" style="width: 75%;">
    <p>
      <canvas id="canvas"></canvas>
    </p>
    <p>
      <canvas id="canvas1"></canvas>
    </p>
  </div>
</body>

</html>

Leave a comment