FPT TV timeline 2018

Using Google Timeline.

by Kieran Dang

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 780px; width: 1200px;"></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();


// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = 16 * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;

 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', 'Account system (backend)',      new Date(2018, 6, 1),  new Date(2018, 8, 1) ],
          [ 'Connectivity', 'CDN (start)',  new Date(2018, 5, 1),  new Date(2018, 7, 1) ],
          [ 'Connectivity', 'CDN (improvement)',  new Date(2018, 7, 1),  new Date(2018, 11, 1) ], 
          [ 'Connectivity', 'Content protection - DRM',  new Date(2018, 5, 1),  new Date(2018, 7, 1) ],      
          [ 'Connectivity', 'Content protection - Watermarking',  new Date(2018, 5, 1),  new Date(2018, 7, 1) ],            
          [ 'Connectivity', 'Game (notification, chatting)',  new Date(2018, 5, 1),  new Date(2018, 7, 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) ]   ,      
    [ '2nd screen', 'Cross-device bookmarking/On the go',  new Date(2018, 6, 1),  new Date(2018, 8, 1) ],   
    [ '2nd screen', '2nd screen (pilot)', ...