Timeline Example

An example of a Google Timeline.

by Luca De Nardi

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: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(2019, 2, 4, 6, 30), new Date(2019, 2, 4, 17, 30) ],
          [ 'Adams',      new Date(2019, 2, 4, 9, 30), new Date(2019, 2, 4, 13, 0) ],
          [ 'Jefferson',  new Date(2019, 2, 4, 8, 14), new Date(2019, 2, 4, 11, 22) ]]);

		var options = {
				hAxis: {
        gridlines: { display: "none"},
        	ticks: [new Date(2019, 2, 4, 6, 30), new Date(2019, 2, 4, 12, 30)]
          }
      };

      chart.draw(dataTable, options);
      }