Unable to display graph in JavaScript

Question

I'm calling a REST based API and I am getting the data properly in JavaScript. In the code below, the variable dataPoints is being set up properly. The code that gets the data from web service and updates a structure is working fine. After this, I need to display the data in a chart.

However when the chart is plotted, the data does not appear.

window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Total cases"
    },
    axisY: {
      title: "Units",
      titleFontSize: 24
    },
    data: [{
      type: "column",
      yValueFormatString: "#,### Units",
      dataPoints: dataPoints
    }]
  });


  fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
        "x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
      }
    })

    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      for (var i = 0; i < data.length; i++) {
        dataPoints.push({
          x: data[i].date,
          y: data[i].totalconfirmed
        })


      }
      chart.render();
    });
}

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

Answer 1

Canvas Js accepts Date or number as x and y co-ordinates. And the output we are getting from the api is in string.date: "30 January ",totalconfirmed: "1" So we need to convert them into date and number for plotting of graph.

   dataPoints.push({
        x: new Date(data[i].date + new Date().getFullYear()), // converting into date
          y: parseInt(data[i].totalconfirmed) // converting into number
        })

window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Total cases"
    },
    axisY: {
      title: "Units",
      titleFontSize: 24
    },
    data: [{
      type: "column",
      yValueFormatString: "#,### Units",
      dataPoints: dataPoints
    }]
  });


  fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
        "x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
      }
    })

    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      for (var i = 0; i < data.length; i++) {
        dataPoints.push({
        x: new Date(data[i].date + new Date().getFullYear()),
          y: parseInt(data[i].totalconfirmed)
        })


      }
      chart.render();
    });
}

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>