JSFiddle - React, Tailwind, and code Playground

by Ankit G.

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="timeline">
</div>

JavaScript

google.load("visualization", "1", {packages:["timeline"]});
google.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: 'Employee' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
            [ 'Spiderman', new Date(2015, 04, 07, 04, 43, 49),  new Date(2015, 04, 07, 06, 45, 05), ],
            [ 'Iron Man',  new Date(2015, 04, 07, 04, 40, 53),  new Date(2015, 04, 07, 08, 45, 47), ],
            [ 'Spiderman',  new Date(2015, 04, 07, 09, 10, 19),  new Date(2015, 04, 07, 13, 22, 02), ],
    ]);

    var options = {
        timeline: {
            singleColor: '#00f',
            colorByRowLabel: true,
            groupByRowLabel: true,
        },
        backgroundColor: '#ffffff'
    };

    chart.draw(dataTable, options);
            
}