JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
        <div id="chart_div"></div>
    </div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

JavaScript

<html><head>
<title>Google visualisation demo: chart query controls</title>
 
<!--Load the AJAX API-->

<script type="text/javascript">

  // Load the Visualization API and the controls package.
  // Packages for all the other charts you need will be loaded
  // automatically by the system.
  google.load('visualization', '1.1', {'packages':['controls','linechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(initialize);

function initialize() {
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1mX7kQqfMNb1Fh8-NhwGUexsj1OgAlidTk4aXYaesvpE/edit#gid=0');
  
  
  // Send the query with a callback function.
  query.send(drawDashboard);
}


function drawDashboard(response) {
  var data = response.getDataTable();
  // Everything is loaded. Assemble your dashboard...
  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'driver',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
  });

  var laptimeChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {
      'width': 800,
      'height': 800
    }
  });
  
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
    bind(namePicker, laptimeChart).
    draw(data)
    
  }