JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 250px;"></div>

JavaScript

google.charts.load('43', {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: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1786, 3, 3), new Date(1786, 3, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1817, 2, 4) ]]);
          
        var options = {
          hAxis: {
            minValue: new Date(1785, 0, 0),
            maxValue: new Date(1816, 0, 0)
          }
        };
        chart.draw(dataTable, options);
    }