I want to set the minimum and maximum date (range) on the X axis in the google range histogram, but I can not set it using the code below:
google.load('visualization', '1', {packages: ['timeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Activity', 'Start Time', 'End Time'],
['Sleep',
new Date(2014, 10, 15, 0, 30),
new Date(2014, 10, 15, 6, 30)],
['Eat Breakfast',
new Date(2014, 10, 17, 6, 45),
new Date(2014, 10, 18, 7)],
['Get Ready',
new Date(2014, 10, 19, 7, 4),
new Date(2014, 10, 22, 7, 30)],
['Commute To Work',
new Date(2014, 10, 22, 7, 30),
new Date(2014, 10, 24, 8, 30)],
['Work',
new Date(2014, 10, 24, 8, 30),
new Date(2014, 10, 25, 17)],
['Commute Home',
new Date(2014, 10, 25, 17),
new Date(2014, 10, 26, 18)],
['Gym',
new Date(2014, 10, 26, 18),
new Date(2014, 10, 27, 18, 45)],
['Eat Dinner',
new Date(2014, 10, 27, 19),
new Date(2014, 10, 28, 20)],
['Get Ready For Bed',
new Date(2014, 10, 28, 21),
new Date(2014, 10, 29, 22)]
]);
var options = {
width: 800,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
hAxis: {
window: 'explicit',
viewWindow: {
min: new Date(2014, 10, 14),
max: new Date(2014, 10, 20)
}
},
ticks: [new Date(2014, 10, 14), new Date(2014, 10, 15), new Date(2014, 10, 16)]
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
Below is the URL to edit the code above:
https://jsfiddle.net/t8Luy7qu/
I am trying to set the minimum date on November 14, 2014 and the maximum date as November 20, 2014, so the graph should be horizontally scrollable for dates after November 20 (in the current graph until November 28).
I use the following URL to achieve the same functionality:
set the x Axis range in google chart
and it works for numerical data on the x axis, but am I using dates so anyone can help me?