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>

   <html>
  <head>
    <title>Say hello using the People API</title>
    <meta charset='utf-8' />
  </head>
  <body>
    <p>Say hello using the People API.</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize-button" style="display: none;">Authorize</button>
    <button id="signout-button" style="display: none;">Sign Out</button>

    <div id="content"></div>

    <script type="text/javascript">
      // Enter an API key from the Google API Console:
      //   https://console.developers.google.com/apis/credentials
      var apiKey = 'YOUR_API_KEY';
      // Enter the API Discovery Docs that describes the APIs you want to
      // access. In this example, we are accessing the People API, so we load
      // Discovery Doc found here: https://developers.google.com/people/api/rest/
      var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];
      // Enter a client ID for a web application from the Google API Console:
      //   https://console.developers.google.com/apis/credentials?project=_
      // In your API Console project, add a JavaScript origin that corresponds
      //   to the domain where you will be running the script.
      var clientId = 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com';
      // Enter one or more authorization scopes. Refer to the documentation for
      // the API or https://developers.google.com/people/v1/how-tos/authorizing
      // for details.
      var scopes = 'profile';
      var authorizeButton = document.getElementById('authorize-button');
      var signoutButton = document.getElementById('signout-button');
      function handleClientLoad() {
        // Load the API client and auth2 library
        gapi.load('client:auth2', initClient);
      }
      function initClient() {
        gapi.client.init({
            apiKey: apiKey,
           ...

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();
 }