How can I set floating X axis in Timeline? My list is very long, and I see the timeline after scrolling. I would like to show timeline always at the bottom of the screen.
If you set a height on either the Timeline's container or in its options, the chart will draw with an internal scroll bar, giving the x-axis a fixed position at the bottom of the chart.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'Start', 'End'],
['Foo', new Date(2014, 0, 1), new Date(2014, 0, 2)],
['Bar', new Date(2014, 0, 3), new Date(2014, 0, 6)],
['Cad', new Date(2014, 0, 2), new Date(2014, 0, 3)],
['Qud', new Date(2014, 0, 7), new Date(2014, 0, 10)],
['Fiz', new Date(2014, 0, 4), new Date(2014, 0, 9)],
['Buz', new Date(2014, 0, 4), new Date(2014, 0, 5)],
['Baz', new Date(2014, 0, 3), new Date(2014, 0, 6)],
['Piz', new Date(2014, 0, 4), new Date(2014, 0, 6)],
['Pop', new Date(2014, 0, 2), new Date(2014, 0, 8)]
]);
var chart = new google.visualization.Timeline(document.querySelector('#chart_div'));
chart.draw(data, {
height: 300,
width: 600
});
}
google.load('visualization', '1', {packages: ['timeline'], callback: drawChart});