Time series data visualization using JSON

by

1👍

✅

Below runnable code snippet illustrates how this can be done.

let dates = [];
let confirmed = [];
let recovered = [];
let deaths = [];

fetch("https://pomber.github.io/covid19/timeseries.json")
  .then(response => response.json())
  .then(data=> {
    data["South Africa"].forEach(o => {
      dates.push(o.date);
      confirmed.push(o.confirmed);
      recovered.push(o.recovered);
      deaths.push(o.deaths);
    })
    new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: {
        labels: dates,
        datasets: [{
            label: 'Confirmed',
            borderColor: 'orange',
            backgroundColor: 'orange',
            fill: 'false',
            data: confirmed
          },
          {
            label: 'Recovered',
            borderColor: 'green',
            backgroundColor: 'green',
            fill: 'false',
            data: recovered
          },
          {
            label: 'Deaths',
            borderColor: 'red',
            backgroundColor: 'red',
            fill: 'false',
            data: deaths
          }
        ]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Covid-19 / South Africa'
        }
      }
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment