Google timeline chart

by Satheesh Kumar

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="example5.4" style="height: 150px;"></div>

JavaScript

google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Satheesh (8hrs)',  'Working',  '#6ce890' , new Date(0,0,0,0,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Satheesh (8hrs)',  'Break',   '#f5eea2' ,  new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Satheesh (8hrs)',  'Lunch','#000000', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
       [ 'Satheesh (8hrs)',  'Working','#6ce890', new Date(0,0,0,19,0,0), new Date(0,0,0,23,30,0) ],
       
        [ 'Thamil (8hrs)',  'Working',  '#6ce890' , new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Thamil (8hrs)',  'Break',   '#f5eea2' ,  new Date(0,0,0,14,30,0), new Date(0,0,0,16,30,0) ],
      [ 'Thamil (8hrs)',  'Lunch','#000000', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ]
     ]);

  var options = {
      timeline: { colorByRowLabel: true,
       hAxis: 'top'},
      alternatingRowStyle: false,
    avoidOverlappingGridLines: true,
 hAxis: {
        format: 'hh:mm',
      },
    };

    chart.draw(dataTable, options);
  }