JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="timer">Table took: <span id="tableTimer"></span><br/>Dashboard took: <span id="dashboardTimer"></span><br/>Control took: <span id="controlTimer"></span></div>
<div id="dashboard">
    <div id="control"></div>
    <div id="chart1"></div>
</div>

JavaScript

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

// Create data
function drawChart() {
    var start = new Date();
    
    var data = new google.visualization.DataTable();
        data.addColumn('string', 'foo');
        data.addColumn('number', 'filterValue');
        data.addColumn('number', 'valueOfWealth');
    
    for (x = 0; x < 20; x++){
        for (y = 0; y < 20; y++){
        var value = Math.round(Math.random()*20);   
        var theString = "";
            if (value > 10)
                theString = "foo";
            else
                theString = "bar";
            
        data.addRow([theString, x, value]);
        }
        
    }
    var control = new google.visualization.ControlWrapper({
        controlType:'NumberRangeFilter',
        containerId:'control',
        options:{
            filterColumnIndex:1,   
            ui:{
                allowMultiple:false,
                allowTyping:false,
                sortValues:false,
                allowNone: false
            }
        }
    });
    var chart1 = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'chart1',
    });
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))
        
    google.visualization.events.addListener(chart1, 'ready', function(){
        chartStop = new Date();
        document.getElementById('tableTimer').innerHTML = chartStop-start + " ms";
    });
    google.visualization.events.addListener(dashboard, 'ready', function(){
        dashStop = new Date();
        document.getElementById('dashboardTimer').innerHTML = dashStop-start + " ms";
    });
    google.visualization.events.addListener(control, 'ready', function(){
        controlStop = new Date();
        document.getElementById('controlTimer').innerHTML = controlStop-start + " ms";
    });

    dashboard.bind(control, chart1);
    dashboard.draw(data);
}