JSFiddle - React, Tailwind, and code Playground

by Chriseif

HTML

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

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

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

				var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
  			query.send(response);
        
        function handleQueryResponse(response) {
  				if (response.isError()) {
    				alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    				return;
  					}
        		var data1 = response.getDataTable();
            }
            
            
        // Create our data table.
      //  var data = google.visualization.arrayToDataTable([
      //    ['Name', 'Donuts eaten'],
       //   ['Michael' , 5],
       //   ['Elisa', 7],
        //  ['Robert', 3],
       //   ['John', 2],
       //   ['Jessica', 6],
       //   ['Aaron', 1],
       //   ['Margareth', 8]
      //  ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnIndex ': 2
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new...