JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<script type="text/javascript" src="http://www.google.com/jsapi">   
</script>
<body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
        <table>
            <tr style='vertical-align: top'>
                <td style='width: 300px; font-size: 0.9em;'>
                    <div id="control1"></div>
                    <div id="control2"></div>
<!--             <div id="control3" style="display:none"></div> -->
                       <div id="control3" </div>
                </td>
                <td style='width: 600px'>
                    <div style="float: left;" id="chart1"></div>
                    <div style="float: left;" id="chart2"></div>
                </td>
            </tr>
        </table>
        <div id="dashboard1"/>
        <div id="dashboard2"/>
    </div>
</body>

JavaScript

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

function drawVisualization() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XGqGIs36krgKbRjufKJJNRdu1NUBZlgIJek2ojnOo2Y/edit#gid=967698286');

    // Apply query language statement.
    query.setQuery('SELECT A,B,C  ORDER BY C');

    // Send the query with a callback function.
    query.send(handleQueryResponse);
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data1 = response.getDataTable();
    // Prepare the data
    var distinctValues = data.getDistinctValues(1);
    var viewColumns = [0];
    var groupColumns = [];
    // build column arrays for the view and grouping
    for (var i = 0; i < distinctValues.length; i++) {
        viewColumns.push({
            type: 'number',
            label: distinctValues[i],
            calc: (function (x) {
                return function (dt, row) {
                    // return values of C only for the rows where B = distinctValues[i] (passed into the closure via x)
                    return (dt.getValue(row, 1) == x) ? dt.getValue(row, 2) : null;
                }
            })(distinctValues[i])
        });
        groupColumns.push({
            column: i + 1,
            type: 'number',
            label: distinctValues[i],
            aggregation: google.visualization.data.sum
        });
    }

    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    // next, we group the view on column A, which gets us the pivoted data
    //var pivotedData = google.visualization.data.group(view, [0], groupColumns);
	var data2 = google.visualization.data.group(view, [0], groupColumns);
            
    /*
	    // Prepare the data
    var data1 =...