Timeline Example

An example of a Google Timeline.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
<div id="example2.1" style="width: 1500px; height: 460px;"class="BoldMe"></div>

CSS

.BoldMe{
font-weight: bold;
}

JavaScript

google.setOnLoadCallback(drawChart);

 function drawChart() {
     var container = document.getElementById('example2.1');
     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(2003, 01, 10)] ,
         ['Cognos', 'Development Manager', new Date(2003, 01, 10), 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.', 'Program Manager', new Date(2010, 03, 4), new Date(2011, 01, 17)],
         ['DonRiver Inc.', 'WU - Program Manager', new Date(2011, 01, 17), new Date(2012, 01, 09)],
         ['DonRiver Inc.', 'Rogers - Program Manger', new Date(2012, 01, 09), new Date(2015, 05, 30)]

     ]);

     chart.draw(dataTable);
 }