JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="numberRangeFilter_dashboard_div">
    <div id="numberRangeFilter_control_div"></div>
    <div id="numberRangeFilter_control_div_2"></div>
    <div id="numberRangeFilter_chart_div"></div>
</div>
<div id="numberRangeFilter_chart_div_custom"></div>
<div id="numberRangeFilter_dashboard_div">
    <div id="numberRangeFilter_control_div"></div>
   </div><input type="button" class="btn btn-warning"  id="myBtn" onclick='this.value= ""' value="Atualizar" />
   <form > 
  <input type="text" id="query" class="awt-searchFilter-input" value=""  placeholder= "Pesquisar" onclick='this.value= ""' onkeyup="drawTable()" />
  </form><br>
 
<span id='table_div'></span>

CSS

.modal-backdrop {
  z-index: -1;
}

JavaScript

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

// Create data
function drawChart() {
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('numberRangeFilter_dashboard_div'));

//First control
    var control = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
            'containerId': 'numberRangeFilter_control_div',
            'options': {
            'filterColumnIndex': 1,
                'minValue': 0,
                'maxValue': 60
        }
    });

//The chart
    var chart = new google.visualization.ChartWrapper({
        'chartType': 'Table',
            'containerId': 'numberRangeFilter_chart_div',
            'options': {
            'width': 400,
                'height': 300,
                'hAxis': {
                'minValue': 0,
                    'maxValue': 60
            },
                'chartArea': {
                top: 0,
                right: 0,
                bottom: 0
            }
        }
    });
//And some data
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Age'],
        ['Michael', 12],
        ['Elisa', 20],
        ['Robert', 7],
        ['John', 54],
        ['Jessica', 22],
        ['Aaron', 3],
        ['Margareth', 42],
        ['Miranda', 33]
    ]);
//The "custom" chart
    var customFilterChart = new google.visualization.ChartWrapper({
        'chartType': 'Table',
            'containerId': 'numberRangeFilter_chart_div_custom',
        dataTable: drawTable(),
            'options': {
            'width': 400,
                'height': 300,
                'hAxis': {
                'minValue': 0,
                    'maxValue': 50
            },
                'chartArea': {
                top: 0,
                right: 0,
                bottom: 0
            }
        }
    });



    dashboard.bind(control, chart);
    dashboard.draw(data);
   ...