JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
  <p style="padding-left: 1em"><strong>Donuts eaten per person</strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="slider_div" style="padding-left: 15px"></div>
      </td>
      <td>
        <div id="categoryPicker_div"></div>
      </td>
    </tr>
    <tr>

      <td colspan=2>
        <div id="table_div" style="padding-top: 30px"></div>
      </td>
    </tr>
  </table>
</div>

<div id='SelV'>

</div>
<br/>
<div id='filtTab'>

</div>
<br/>
<div id="selVal">
</div>
</div>

JavaScript

google.load('visualization', '1', {
  packages: ['table', 'corechart', 'controls']
});
google.setOnLoadCallback(drawTable);

function drawTable() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Gender');
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Donut Eaten');
  data.addRows([
    ['Michael', {v:1, f:'Male'}, 12, 5],
    ['Elisa', {v:2, f:'Female'}, 20, 7],
    ['Robert', {v:1, f:'Male'}, 7, 3],
    ['John', {v:1, f:'Male'}, 54, 2],
    ['Jessica', {v:2, f:'Female'}, 22, 6],
    ['Aaron', {v:1, f:'Male'}, 3, 1],
    ['Margareth', {v:2, f:'Female'}, 42, 8],
    ['Miranda', {v:2, f:'Female'}, 33, 6]
  ]);

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

  var slider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'slider_div',
    'options': {
      'filterColumnIndex': 2,
      'ui': {
        'labelStacking': 'vertical',
        'label': 'Age Filter:'
      }
    }
  });
  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'categoryPicker_div',
    'options': {
      'filterColumnIndex': 1,
       useFormattedValue: true,
      'ui': {
        'labelStacking': 'vertical',
        'label': 'Gender Selection:',
        'allowTyping': false,
        'allowMultiple': true
      }
    }
  });



  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div',
    'options': {
      'showRowNumber': true,

    }
  });


  google.visualization.events.addListener(table, 'ready', function() {
    seldata = "";
$("#filtTab").text("");  $("#SelV").text("");
    var zoneIDs = [],
      circleIDs = [],
      divIDs = [],
      subdivIDs = [],
      sectIDs = [],
      stationIDs = [],
      feederIDs = [];
    if (categoryPicker.getState().selectedValues.length > 0)...