在Google图表中过滤日期，然后过滤时间

Question

I'm trying to use ChartRangeFilter to filter the dates and then filter it at time level. For Example: Timestamp
05/03/2016 12:00:19
05/03/2016 12:01:31
05/03/2016 12:02:43
05/03/2016 12:32:01
05/03/2016 12:33:14
06/03/2016 11:50:42
06/03/2016 11:51:57
06/03/2016 11:53:11
06/03/2016 11:54:25
06/03/2016 11:55:39
07/03/2016 15:43:50
07/03/2016 15:45:02
07/03/2016 15:46:14
07/03/2016 15:47:26

So after setting the date for only 5/03/2016, I want to filter the time from 12:00 to 12:15. So in the chart, it'll only plot first three values.
Tried this and it didn't work.

chartDateFilter = new google.visualization.ControlWrapper({
'controlType' : 'ChartRangeFilter',
'containerId' : 'chartDateFilter_id',
'state' : {
    'range' : {
        'start' : '1',
        'end'   : '31'
               }
            },
'options' : {
    'filterColumnLabel':'TimeStamp'
}
});

chartTimeFilter = new google.visualization.ControlWrapper({
'controlType' : 'ChartRangeFilter',
'containerId' : 'chartFilter_id',
'state' : {
    'range' : {
    'start' : '00:00',
    'end'   : '23:59'
}
},
'options' : {
    'filterColumnLabel':'TimeStamp'
            }
});

Answer 1

In order to have two separate filters, you would need two separate columns in the data.
But the ChartRangeFilter handles both date and time, so no need...

In addition, the values set for range.start and range.end should be datetime values.

See following example...

 google.charts.load('44', { callback: drawChart, packages: ['controls', 'corechart'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'TimeStamp'); data.addColumn('number', 'Value'); data.addRow([new Date('05/03/2016 12:00:19'), 0]); data.addRow([new Date('05/03/2016 12:01:31'), 1]); data.addRow([new Date('05/03/2016 12:02:43'), 2]); data.addRow([new Date('05/03/2016 12:32:01'), 3]); data.addRow([new Date('05/03/2016 12:33:14'), 4]); data.addRow([new Date('06/03/2016 11:50:42'), 5]); data.addRow([new Date('06/03/2016 11:51:57'), 6]); data.addRow([new Date('06/03/2016 11:53:11'), 7]); data.addRow([new Date('06/03/2016 11:54:25'), 8]); data.addRow([new Date('06/03/2016 11:55:39'), 9]); data.addRow([new Date('07/03/2016 15:43:50'), 10]); data.addRow([new Date('07/03/2016 15:45:02'), 11]); data.addRow([new Date('07/03/2016 15:46:14'), 12]); data.addRow([new Date('07/03/2016 15:47:26'), 13]); var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control_div', state: { range: { start: new Date('05/03/2016 12:00:00'), end: new Date('05/03/2016 12:15:00') } }, options: { filterColumnLabel: 'TimeStamp' } }); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div' }); var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); dash.bind([control], [chart]); dash.draw(data); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard"> <div id="chart_div"></div> <div id="control_div"></div> </div>