javascript - Date range picker and chart js - Stack Overflow

admin管理员组

文章数量:1427798

I want to change the x-axis label on chart js according to my date range picker.If I select this week then x-axis label should started from sunday to saturday. If i select this month then the x-axis label should start from october 1.... october 30. If i select last month then it should be september 1..... september 30. If i select date range then it should should from the starting month to ending month.

Till now i tried this but i know for sure. It is rubish.

$('#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 date difference is a 6 then its a week 
        if date difference is greater than 31 then its a */       
    });

I want to change the x-axis label on chart js according to my date range picker.If I select this week then x-axis label should started from sunday to saturday. If i select this month then the x-axis label should start from october 1.... october 30. If i select last month then it should be september 1..... september 30. If i select date range then it should should from the starting month to ending month.

Till now i tried this but i know for sure. It is rubish.

$('#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 date difference is a 6 then its a week 
        if date difference is greater than 31 then its a */       
    });

• javascript
• charts
• chart.js
• daterangepicker
• chartjs-2.6.0

Share Improve this question Follow asked Oct 25, 2018 at 11:07 rakesh shrestharakesh shrestha 1,45533 gold badges2323 silver badges3939 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.

本文标签： javascriptDate range picker and chart jsStack Overflow