CODEWITHSUNDEEP
google-visualizationtimeline
plaidshirt
plaidshirt

Reputation: 5671

Google Chart Timeline floating X-axis

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.

Upvotes: 0

Views: 2203

Answers (1)

asgallant
asgallant

Reputation: 26340

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});

http://jsfiddle.net/asgallant/z18ruap9/

Upvotes: 1

Related Questions