Javascript Timeline

An example of a Google Charts Timeline.

by amindunited

HTML

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

CSS

#timeline {
  height: 260px;
}

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: 'Library' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
        	['jQuery', new Date(2008, 8, 26), new Date(2012, 9, 14) ],
          ['Backbone', new Date(2010, 10, 30), new Date(2014, 2, 4) ],
          ['AngularJs', new Date(2012, 10, 0), new Date(2016, 6, 1) ],
          ['Ember', new Date(2013, 08, 30), new Date(2017, 12, 4) ],
          ['React', new Date(2014, 6, 30), new Date(2018, 9, 1) ]
        ]);

        const options = {
          width: 480,
          height: 280,
          title: 'Javascript Age',
          colors: ['#0769ad', '#022A40', '#f44336', '#DE4F3F', '#66DBF9']
        };
        chart.draw(dataTable, options);
      }