Timeline Example

An example of a Google Timeline.

by Kieran Dang

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: 'Position' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Connectivity', 'All', new Date(2018, 5, 1), new Date(2018, 11, 1) ],
          [ 'Connectivity', 'Account system (backend)',      new Date(2018, 6, 1),  new Date(2018, 8, 1) ],
          [ 'Connectivity', 'CDN (phase 1)',  new Date(2018, 5, 1),  new Date(2018, 7, 1) ],
          [ 'Connectivity', 'CDN (phase 2)',  new Date(2018, 7, 1),  new Date(2018, 9, 1) ],          
  [ 'Điều chỉnh', 'FPT TV Remote',  new Date(2018, 6, 1),  new Date(2018, 8, 1) ]   ,  
  [ 'Điều chỉnh', 'KaraTivi',  new Date(2018, 6, 1),  new Date(2018, 8, 1) ]   ,    
  [ 'Điều chỉnh', 'Account system (box)',  new Date(2018, 6, 15),  new Date(2018, 8, 1) ]   ,    
  [ 'Điều chỉnh', 'Merging/Migrating',  new Date(2018, 9, 1),  new Date(2018, 11, 1) ]   ,   
  [ 'Thiết kế mới', 'Lẩu cá kèo',  new Date(2018, 6, 1),  new Date(2018, 7, 1) ]   ,
  [ 'Thiết kế mới', 'Lẩu cá kèo (pilot)',  new Date(2018, 7, 1),  new Date(2018, 7, 15) ],     
    [ 'Thiết kế mới', 'Cross-device bookmarking/On the go',  new Date(2018, 6, 1),  new Date(2018, 8, 1) ],   
    [ 'Thiết kế mới', '2nd screen (pilot)',  new Date(2018, 8, 1),  new Date(2018, 9, 1) ],       
          ]);

        chart.draw(dataTable);
      }