Timeline Example - GOOGLE TIMELINE

An example of a Google Timeline.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
       <div id="timeline" style="height: 180px;width:400px;overflow-x:scroll;overflow-y:hidden;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
function drawChart() {

  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Type' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Event', 'SU123998',       new Date(2015,2,6,8,57,59),  new Date(2015,2,6,9,49,5) ],
    [ 'Event', 'SI123998',    new Date(2015,2,6,11,24,31),  new Date(2015,2,6,15,14,8) ]]);



  var options = {
    width: dataTable.getNumberOfRows() * 200
  };

  chart.draw(dataTable, options);
}