[Chartjs]-Date range picker and chart js

One way you could do this would be to dynamically assign the endpoint you want to get the data from.

$('#report-overview-range').on('apply.daterangepicker', function (ev, picker) {
    let startDate = picker.startDate.format('YYYY-MM-DD');
    let endDate = picker.endDate.format('YYYY-MM-DD');
    let date = startDate + '&' + endDate;
    $(this).attr('date', date);
    let today = moment().format('YYYY-MM-DD');
    let dateDiff = moment(today).diff(moment(startDate), 'days');
    if (dateDiff < 6) {
        dataEndpoint = "weekRange.php?" + date;
        title = "Week View";
    } else {
        dataEndpoint = "monthRange.php?" + date;
        title = "Month View";
    }

    // assign a reference to the chart in the dom
    let chartRef = document.getElementById("chart-id-goes-here").getContext('2d');

    $.ajax({
        url: dataEndpoint,
        dataType: 'json',
        success: function (graphData) {
            new Chart(chartRef, {
                type: 'bar',
                data: {
                    labels: Object.keys(graphData),
                    datasets: [{
                        label: title,
                        data: Object.values(graphData),
                    }] //end datasets
                }, //end data
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }
    })
});

In this example there’s an if statement that changes the variable dataEndpoint. I’m making some assumption on the way you’re acquiring data, but the strategy should work in general.

If you map your x-axis to the keys and your y-axis to the pairs it will populate the table correctly using Object.keys(graphData) and Object.values(graphData) respectively. Here’s an example return for weekRange.php (I tossed this into an existing project, that’s affecting the CSS a little bit):

{
    "Sun":"41454.33",
    "Mon":"17546.34",
    "Tue":"12558.60",
    "Wed":"25757.79",
    "Thur":"26119.51",
    "Fri":"21195.63",
    "Sat":"20528.79"
}

And the chart after it’s populated:

This is some junk data that monthRange.php returns:

{
    "1": "880.33",
    "2": "387.77",
    "3": "1056.54",
    "4": "48.58",
    "5": "1107.97",
    "6": "852.45",
    "7": "534.34",
    "8": "349.77",
    "9": "324.77",
    "10": "464.51",
    "11": "1135.88",
    "12": "514.75",
    "13": "278.85",
    "14": "176.22",
    "15": "167.96",
    "16": "424.49",
    "17": "1123.37",
    "18": "469.74",
    "19": "1844.47",
    "20": "346.86",
    "21": "424.05",
    "22": "664.59",
    "23": "985.48",
    "24": "1288.77",
    "25": "821.07",
    "26": "969.48",
    "27": "814.52",
    "28": "164.76",
    "29": "184.77",
    "30": "1730.73",
    "31": "657.75"
}

Here’s what this data will look like on the same chart:

I’m not sure about dateDiff in this logic, I think you may need to rework it to return an integer.