Responsive Google Timeline Visualization

by sanjaymohan

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: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });

  dataTable.addRows([

    ['Lantec', 'Software Designer', new Date(1995, 07, 15), new Date(1997, 05, 31)],
    ['Nortel', 'Sr. Software Designer', new Date(1997, 06, 06), new Date(1999, 08, 30)],
    ['DataBeacon', 'Architect', new Date(1999, 09, 13), new Date(2000, 07, 30)],
    ['Nortel Networks', 'Sr. Architect', new Date(2000, 08, 14), new Date(2001, 09, 30)],
    ['Cognos', 'Sr. Architect', new Date(2001, 11, 19), new Date(2006, 06, 30)],
    ['DNA13', 'Dev Manager', new Date(2006, 07, 05), new Date(2008, 08, 10)],
    ['7068883 Canada Inc', 'Director (Incorporated)', new Date(2008, 08, 29), new Date(2015, 05, 30)],
    ['ITSP Inc.', 'Lead Consulatant', new Date(2008, 08, 29), new Date(2010, 03, 04)],
    ['Affinity Inc.', 'Solution Architect', new Date(2010, 03, 4), new Date(2011, 01, 17)],
    ['DonRiver Inc.', 'WU - Solution Architect', new Date(2011, 01, 17), new Date(2012, 01, 09)],
    ['DonRiver Inc.', 'Rogers - Solution Architect', new Date(2012, 01, 09), new Date(2015, 05, 30)]

  ]);

  chart.draw(dataTable);
}