Google Chartsの日付と時間のフィルタリング

Question

私はChartRangeFilterを使って日付をフィルタリングし、それを時間レベルでフィルタリングしようとしています。 タイムスタンプ
2016年5月3日12時00分19秒
2016年5月3日12時01分31秒
2016年5月3日12時02分43秒
2016年5月3日12：例： 2016年6月3日11時50分42秒
2016年6月3日11時51分57秒
2016年6月3日11時53分32:01
2016年5月3日12時33分14秒
： 11
2016年6月3日11時54分25秒
2016年6月3日11時55分39秒
2016年7月3日午前15時43分50秒
2016年7月3日午後3時45分02秒
2016年7月3日午後三時46分14秒
2016年7月3日午後03時47分26秒

だから、唯一の2016年5月3日の日付を設定した後、私は12から時刻をフィルタリングします： 00〜12:15。 したがってチャートでは、最初の3つの値だけがプロットされます。
これを試しても機能しませんでした。

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

2つのフィルタを別々に使用するには、データに2つの別々の列が必要です。
しかしChartRangeFilterはまた、両方の日付と時刻、その必要はありません...

を処理し、range.startとrange.endのために設定された値は、日時の値でなければなりません。

次の例を参照してください...

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>