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(2023,05,22),  new Date(2023,05,22) ]
     ]);

  var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false,
    avoidOverlappingGridLines: true

    };

    chart.draw(dataTable, options);
  }