JSFiddle - React, Tailwind, and code Playground

by heennkkee

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>

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
        }
    });
//Second control
    var control2 = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
            'containerId': 'numberRangeFilter_control_div_2',
            'options': {
            'filterColumnIndex': 1,
                'minValue': 0,
                'maxValue': 60
        }
    });
//The chart
    var chart = new google.visualization.ChartWrapper({
        'chartType': 'BarChart',
            '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': 'BarChart',
            'containerId': 'numberRangeFilter_chart_div_custom',
        dataTable: data,
            'options': {
            'width': 400,
                'height': 300,
       ...