I want to get currencies between 2 date from some API and show them in the form of charts such as each chart shows only 1 month. For example, let's say I want to fetch currencies between date "09-05-2021" and "10-09-2021" (format is "MM-DD-YY") from API. In this case, I should get 2 charts, where the first chart starts with "09-05-2021" and ends with "09-30-2021", and the second one starts with "10-01-2021" and ends with "10-09-2021".
I have interval
array where I keep all months and iterate this array for drawing charts.
Here's my code:
for (var i = 0; i < interval.length; i++) {
var days = [];
var day = new Date(interval[i][0].getTime());
for (; day <= interval[i][1]; day.setDate(day.getDate() + 1)){
days.push(new Date(day).getDate());
}
var chr = String.fromCharCode(97 + i);
$('#charts').append(`<div style="width: 800px; height: 400px;"><canvas id="chart${chr}"></canvas></div>`);
$.ajax({
type: 'GET',
url: "https://localhost:5001/currency/" + selectedCurrency,
dataType: 'json',
data: {
StartDate: interval[i][0].toISOString().split('T')[0],
EndDate: interval[i][1].toISOString().split('T')[0]
},
success: function(data) {
console.log(data);
var ctx = document.getElementById(`chart${chr}`).getContext('2d');
let chart = new Chart(ctx, {
type: 'line',
data: {
labels: days,
datasets: [{
label: label,
borderColor: '#006241',
borderWidth: 1,
fill: true,
data: data
}]
},
});
}
});
}
My start date is "09/05/2021" and end date is "10/09/2021". So my interval
array will be
[["09/05/2021", "09/30/2021"], ["10/01/2021", "10/09/2021"]]
where the first element represents September
month and the second element represents October
month.
But I have two problem here:
- Why I get October month before September month where I should get September first?
- Why I get
Canvas is already in use
error