JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

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

  <div id="timeline"></div>

JavaScript

google.charts.load('45', {'packages':['timeline']});
 google.charts.load('45', {'packages':['controls']});
  google.charts.load('45', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawGID);
var timespan;
var timespandays;
 function drawGID() {
      var queryString = encodeURIComponent('SELECT *');

     var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1QnFXoJF4Um5cUMDTWczMbSGZQR4D_f0McN3ROteH4kk/edit#gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var dataTable = response.getDataTable();
     dataTable.setColumnProperty(2, 'role', 'tooltip')
     dataTable.setColumnProperty(3, 'role', 'style')
     dataTable.setColumnProperty(4, 'date', 'Start'); 
     dataTable.setColumnProperty(5, 'date', 'End');
   
      var container = document.getElementById('timeline');
      var chart = new google.visualization.Timeline(container);
       var view = new google.visualization.DataView(dataTable);
    view.setColumns([0, 1, 2,3,4,5]);
    
     var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard'));			  
   var dataTableGroup = google.visualization.data.group(dataTable, [0]);
  var dateRangeStart = dataTable.getColumnRange(4);
  var dateRangeEnd = dataTable.getColumnRange(5);
 
      var options = {

//options style chart
        
        }; 
function drawChart() {

   chart.draw(view, options); 
  
  }

 
  window.addEventListener('resize', drawChart(), false);
  drawChart();
 }