Google Charts how to filter charts based on month and year?

Question

I want to implement an AreaChart where I can filter based on months. For example I want to filter in the period 2021-1 till 2021-5 without a day because I retrieve a total value per specific month. The year and month is not recognized as Date and the filter is not working. How can I make this work?

HTML:

   <div id="dashboard_div">
   <div id="filter_div"></div>
   <div id="graph-month"></div>
   </div>

JQuery:

        function drawAreaChart(){
            google.charts.load('current', {'packages': ['corechart', 'controls', 'table']});

        google.charts.setOnLoadCallback(drawChart);


        function drawChart() {
            $.ajax({
                type: 'GET',
                url: 'testurl',
                dataType: "json",
                success: function (result) {
             
                    var data = new google.visualization.DataTable();

                    // Create a dashboard.
                    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));


                 
                    data.addColumn('number', 'month');
                    data.addColumn('number', 'Total');


                   // This is the json I retrieve from the AJAX call

                     var jsondata = [{"year":2021,"month":1,"total":3242}, 
                     {"year":2021,"month":2,"total":2134}, 
                     {"year":2021,"month":3,"total":2321}];

                    $.each(result, function (index, row) {
                        data.addRow([
                            parseFloat(new Date(row.year, row.month)),
                            parseFloat(row.total)
                        ]);
                    });

                    var filter = new google.visualization.ControlWrapper({
                        'controlType': 'NumberRangeFilter',
                        'containerId': 'filter_div',
                        'options': {
                            'filterColumnLabel': 'month'},
                        'ui': {
                            'allowTyping': false,
                            'allowMultiple': false,
                            'labelStacking': 'vertical'
                        }
                    });

                    // Create a pie chart, passing some options
                            var aChart = new google.visualization.ChartWrapper({
                                'chartType': 'AreaChart',
                                'containerId': 'graph-month',
                                'options': {
                                    'pieSliceText': 'value',
                                    'legend': 'right'
                                }
                            });

                    dashboard.bind(filter, aChart );

                    var options = {
                        title: 'Total per month',
                        hAxis: {title: ,
                        vAxis: {minValue: 0}
                    };


                    dashboard.draw(data, options);

                }
            });
         }
        }

Answer 1

looks like you're forcing the date to be a number,
you can definitely use a date instead...

here, change the type when adding the column to date...

data.addColumn('date', 'month');
data.addColumn('number', 'Total');

then when adding the rows, remove parseFloat from the date...

$.each(result, function (index, row) {
  data.addRow([
    new Date(row.year, row.month),
    parseFloat(row.total)
  ]);
});

then you should be able to use a DateRangeFilter, here...

var filter = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'filter_div',
    'options': {
        'filterColumnLabel': 'month'},
    'ui': {
        'allowTyping': false,
        'allowMultiple': false,
        'labelStacking': 'vertical'
    }
});