Setting Time as range value instead of date in google charts - google-visualization

Question

Trying to work with Google charts and ended up with a range slider thru few code snippets provided by developer docs.
<https://jsfiddle.net/hari41980/gsvr18hw/11/>
Now I need someone to help me on getting the date range from date to TIME.
Expected:expected output
Regards

Answer 1

just need to set the desired format in the options for the slider...
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
see following example...
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Time Stamp',
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 600,
'height': 300,
'legend': 'none',
}
});
var data = google.visualization.arrayToDataTable([
['Time Stamp', 'Bulk'],
[new Date(2014, 9, 15, 10, 30) , 5],
[new Date(2014, 9, 15, 11, 30) , 10],
[new Date(2014, 9, 15, 12, 30) , 15],
[new Date(2014, 9, 15, 13, 30) , 5],
[new Date(2014, 9, 15, 14, 30) , 10],
[new Date(2014, 9, 15, 15, 30) , 8],
[new Date(2014, 9, 15, 16, 30) , 12],
[new Date(2014, 9, 15, 17, 30) , 15],
[new Date(2014, 9, 15, 18, 30) , 25]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_control_div"></div>
<div id="programmatic_chart_div"></div>