JSFiddle - React, Tailwind, and code Playground

by smichelotti

HTML

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

        dataTable.addColumn({ type: 'string', id: 'Segment' });
        dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
        	['Filler', '', new Date(2019, 7, 31, 5, 2, 0), new Date(2019, 7, 31, 5, 2, 0)],
          ['Filler', '', new Date(2019, 7, 31, 5, 3, 0), new Date(2019, 7, 31, 5, 3, 0)],
          ['Filler', '', new Date(2019, 7, 31, 5, 4, 0), new Date(2019, 7, 31, 5, 4, 0)],
          ['Name Used', '', new Date(2019, 7, 31, 5, 5, 0), new Date(2019, 7, 31, 5, 5, 0)],
          ['Name Used', '', new Date(2019, 7, 31, 5, 6, 0), new Date(2019, 7, 31, 5, 6, 0)],
          ['Name Used', '', new Date(2019, 7, 31, 5, 25, 0), new Date(2019, 7, 31, 5, 25, 0)],
          ['Fist Bump', '', new Date(2019, 7, 31, 5, 16, 0), new Date(2019, 7, 31, 5, 16, 0)],
          ['Fist Bump', '', new Date(2019, 7, 31, 5, 29, 0), new Date(2019, 7, 31, 5, 29, 0)],
          ['Fist Bump', '', new Date(2019, 7, 31, 5, 30, 0), new Date(2019, 7, 31, 5, 30, 0)],
          ['Segment', 'Intro', new Date(2019, 7, 31, 5, 0, 0), new Date(2019, 7, 31, 5, 5, 0)],
          ['Segment', 'Warm up', new Date(2019, 7, 31, 5, 5, 0), new Date(2019, 7, 31, 5, 15, 0)],
          ['Segment', 'Metcon', new Date(2019, 7, 31, 5, 15, 0), new Date(2019, 7, 31, 5, 45, 0)],
          ['Segment', 'Cool down', new Date(2019, 7, 31, 5, 45, 0), new Date(2019, 7, 31, 6, 0, 0)],
          ]);

        chart.draw(dataTable);
      }