Timeline Example

An example of a Google Timeline.

by benedict_chan

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 180px;"></div>

JavaScript

google.charts.load('current', {'packages':['timeline']});
      google.charts.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: 'Loc' });
        dataTable.addColumn({ type: 'string', id: 'Length' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'L01', '2', new Date(2016, 11, 01), new Date(2016, 11, 03) ],
          [ 'L01', '3', new Date(2016, 11, 07), new Date(2016, 11, 10) ],
          [ 'L02', '2', new Date(2016, 11, 01), new Date(2016, 11, 03) ],
          [ 'L02', '3', new Date(2016, 11, 06), new Date(2016, 11, 09) ],

//Shortest
					//[ 'L02', '2', new Date(2016, 11, 03), new Date(2016, 11, 05) ],
          //[ 'L02', '1', new Date(2016, 11, 05), new Date(2016, 11, 06) ],
          //[ 'L01', '4', new Date(2016, 11, 03), new Date(2016, 11, 07) ],

//Longest - Failed
					//[ 'L01', '2', new Date(2016, 11, 03), new Date(2016, 11, 05) ],
          //[ 'L02', '1', new Date(2016, 11, 05), new Date(2016, 11, 06) ],
          //[ 'L01', '4', new Date(2016, 11, 03), new Date(2016, 11, 07) ],


//Shortest - Failed
					//[ 'L02', '2', new Date(2016, 11, 03), new Date(2016, 11, 05) ],
          //[ 'L01', '3', new Date(2016, 11, 03), new Date(2016, 11, 06) ],
          //[ 'L01', '2', new Date(2016, 11, 05), new Date(2016, 11, 07) ],

//Longest
					//[ 'L01', '2', new Date(2016, 11, 03), new Date(2016, 11, 05) ],
          //[ 'L02', '3', new Date(2016, 11, 03), new Date(2016, 11, 06) ],
          //[ 'L01', '2', new Date(2016, 11, 05), new Date(2016, 11, 07) ],


          ]);

        chart.draw(dataTable);
      }