[Chartjs]-Filter dates from the first day of the month to the current date

by

2👍

✅

This gives u list data from api between your expected dates

var today = new Date();
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);


var getDateArray = function(start, end) {
    var arr = new Array();
    var dt = start;
    while (dt <= end) {
        arr.push(dt.getFullYear()+'-'+(dt.getMonth()+1)+'-'+dt.getDate());
        dt.setDate(dt.getDate() + 1);
    }
    return arr;
}

var dateArr = getDateArray(firstDay, today);

getDatas("South Africa");

function getDatas(counryName){
  fetch("https://pomber.github.io/covid19/timeseries.json")
    .then(response => response.json())
    .then(data=> {
        var categories=[];
        var confirms=[];
        var recovers=[];
        var result = data[counryName].filter(function(item) {
         
          return dateArr.includes(item.date); 
        })
        result.forEach(item=>{
           categories.push(item.date);
           confirms.push(item.confirmed);
           recovers.push(item.recovered);
        })
       
        var options = {
          type: 'line',
          data: {
            labels: categories,
            datasets: [
              {
                label: '# of Confirmed',
                data: confirms,
                borderWidth: 1
              },	
              {
                label: '# of Recovered',
                data:recovers,
                borderWidth: 1
              }
            ]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  reverse: false
                }
              }]
            }
          }
        }

        var ctx = document.getElementById('chartJSContainer').getContext('2d');
        new Chart(ctx, options);
         console.log(result);
      });

}


    
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

0👍

The problem is that the end date is not formatted as date and the loop (while) is not doing it correctly. The solution is new Date(end)

var getDateArray = function(start, end) {
var arr = new Array();
var dt = new Date(start);
while (dt <= new Date(end)) {
    arr.push(new Date(dt));
    dt.setDate(dt.getDate() + 1);
}
return arr;

}

and the complete code would be

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

var today = new Date();
var TodayDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

var startDate = '01-04-2020'; //YYYY-MM-DD
var endDate = TodayDate; //YYYY-MM-DD

var getDateArray = function(start, end) {
    var arr = new Array();
    var dt = new Date(start);
    while (dt <= new Date(end)) {
        arr.push(new Date(dt));
        dt.setDate(dt.getDate() + 1);
    }
    return arr;
}

var dateArr = getDateArray(startDate, endDate);



fetch("https://pomber.github.io/covid19/timeseries.json")
  .then(response => response.json())
  .then(data=> {
    data["South Africa"].forEach(o => {
      dates.filter(function() {
        o.date==dateArr;
      }).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,
        maintainAspectRatio: false,
        title: {
          display: true,
          text: 'COVID-19 / Eswatini Time Series'
        }
      }
    });
  });
console.log(dateArr)

Leave a comment