Filtern von Daten und dann Zeit in Google Charts

Question

Ich versuche, ChartRangeFilter zu verwenden, um die Daten zu filtern und dann auf Zeitniveau zu filtern. Zum Beispiel: Zeitstempel
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 nach der Datumseinstellung für nur 2016.05.03, möchte ich die Zeit von 12 filtern: 00 bis 12:15. In der Grafik werden also nur die ersten drei Werte dargestellt.
Versuchte dies und es hat nicht funktioniert.

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

Um zwei separate Filter zu haben, benötigen Sie zwei separate Spalten in den Daten.
Aber die ChartRangeFilter Griffe sowohl Datum und Zeit, so dass keine Notwendigkeit ...

Zusätzlich werden die eingestellten Werte für range.start und range.end sollte Datetime-Werte sein.

Siehe Beispiel folgende ...

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>