0

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
                    }]
                    },
                });
            }
        });
    }

And here's my result: Charts

And here's my error log: Error

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:

  1. Why I get October month before September month where I should get September first?
  2. Why I get Canvas is already in use error
  • 1
    https://stackoverflow.com/questions/40056555/destroy-chart-js-bar-graph-to-redraw-other-graph-in-same-canvas – Andy Oct 10 '21 at 15:08
  • I have read this question, but I don't want to destroy my chart, instead want to append new charts for each month to canvas – Ferhad Mehdizade Oct 10 '21 at 15:09
  • Does this answer your question? https://stackoverflow.com/a/61983138/2358409 – uminder Oct 10 '21 at 15:18
  • I solved the problem. The only thing I need to do was to add `async: false` to $.ajax. So It doesn't fetch all months at the same time. – Ferhad Mehdizade Oct 10 '21 at 15:39

0 Answers0