Json data visualization in Javascript with chartjs

JavaScript
1

I’m developing an app which shows json COVID-19 api data into visualiztion using chartjs. I tried this, but I can’t show the visual data. please help me. Here is my code

<html>
<body>
	<canvas id="chart" style="width:400%;max-width:400px"></canvas>
      <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js">
      </script>
      
      <script type="text/javascript" scr="js/chart.js">

const xlabels= [];
chartit();
async function chartit(){
 await getData();
const ctx = document.getElementById('chart').getContext('2d');
const xlabels = [];
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels:  xlabels,
        datasets: [{
          label: "Covid-19",
            fill: true,
            lineTension: 0.1,
            backgroundColor: "rgba(204, 16, 52, 0.5)",
            borderColor: "#CC1034",
            borderCapStyle: "butt",
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: "miter",
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: xlabels
        }]
    },
  });
};
     
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;
    xlabels.push(timeline.cases);
    console.log(timeline.cases);
	};
      
</script>
</body>
</html>

Screenshot 2021-06-10 133029
Screenshot 2021-06-10 133029886×798 13.1 KB

I can get the data in the console,but when I stored it into xlabels ,nothing appears on the graph ,I want to dispaly date on x-axis and number of cases on y-axis

It should look like this
Screenshot 2021-06-10 133500

2

Hi @NaghS ,

Could it be because xlabels is again being assigned to after getData() ?

async function chartit(){
 await getData();
const ctx = document.getElementById('chart').getContext('2d');
**const xlabels = [];**
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.