Responsive Google Timeline Visualization

by Ryan Turner

HTML

<script src="https://rawgithub.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<div id="visualization_wrap">
    <div id="visualization"></div>
</div>

CSS

body {
    width:80%;
    margin:10% auto;
    background:#e6e6e6;
}
#visualization_wrap {
    border:1px solid gray;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow:hidden;
}
#visualization {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}

JavaScript

google.setOnLoadCallback(drawChart);
$(window).on("throttledresize", function (event) {
    drawChart();
});

function drawChart() {
    var container = document.getElementById('visualization');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
        type: 'string',
        id: 'Term'
    });
    dataTable.addColumn({
        type: 'string',
        id: 'Name'
    });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({
        type: 'date',
        id: 'Start'
    });
    dataTable.addColumn({
        type: 'date',
        id: 'End'
    });
    dataTable.addRows([
        ['0', 'S3a', '5880', new Date(5875, 0, 0), new Date(5885, 0, 0)],
        ['0', 'S2a', '5900', new Date(5895, 0, 0), new Date(5905, 0, 0)],
        ['0', 'S1a', '5920', new Date(5915, 0, 0), new Date(5925, 0, 0)],
        ['1', 'S3b', '5920', new Date(5865, 0, 0), new Date(5875, 0, 0)],
        ['2', 'O1', '5920', new Date(5855, 0, 0), new Date(5865, 0, 0)],
        ['2', 'O2', '5920', new Date(5845, 0, 0), new Date(5855, 0, 0)],
        ['1', 'S2b', '5890', new Date(5885, 0, 0), new Date(5895, 0, 0)],
        ['1', 'S1b', '5920', new Date(5905, 0, 0), new Date(5915, 0, 0)],
    ]);

    var options = {
        timeline: {
            showRowLabels: false
        }
    };

    chart.draw(dataTable, options);
}