how to populate data in chart.js

Question

I'm trying to visualize the following dataset with chart.js

var data = 
{
    "count": 2,
    "result": {
        "2020-01-22": {
            "confirmed": 12,
            "deaths": 5,
            "recovered": 4
        },
        "2020-01-23": {
            "confirmed": 20,
            "deaths": 3,
            "recovered": 2
        }
    }
}

So far I've figured out how to use the dates as label.

  var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',    
        data: { // mapping the dates as labels
            labels: Object.entries(data.result).map( (item) => item[0]),
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: ??
            },{
                label: 'My Second dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: ??
            },{
                label: 'My Third dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: ??
            }]
        },    // Configuration options go here
        options: {}
    });

I'd like to display the values of 'confirmed', 'deaths' and 'recovered' as three lines within this chart. Therefore I would include three different datasets right? How would I access the required information from json as array to populate the data arrays?

Thanks for your support

you need to construct three array from your json data and feed it to chartjs — sandeep joshi

sandeep joshi sandeep joshi · Accepted Answer · 2020-09-27T04:59:44

just map the key and values to appropriate arrays and consume them as datasets and labels.

var data = {
  "count": 2,
  "result": {
    "2020-01-22": {
      "confirmed": 12,
      "deaths": 5,
      "recovered": 4
    },
    "2020-01-23": {
      "confirmed": 20,
      "deaths": 3,
      "recovered": 2
    }
  }
}
var dates = Object.keys(data["result"]).map(x => x);
var confirm = Object.values(data.result).map(x => x.confirmed);
var deaths = Object.values(data.result).map(x => x.deaths);
var recovered = Object.values(data.result).map(x => x.recovered);


var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: dates,
    datasets: [{
        label: 'confirmed',
        data: confirm,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      },
      {
        label: 'Deaths',
        data: deaths,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',


        borderColor: 'rgba(54, 162, 235, 1)',

        borderWidth: 1
      }, {
        label: 'recovered',
        data: recovered,
        backgroundColor: 'rgba(255, 206, 86, 0.2)',


        borderColor: 'rgba(255, 206, 86, 1)',

        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="100" height="50"></canvas>

how to populate data in chart.js

1 Answers