JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['annotationchart']}]}"></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" style="display:none"></div>
                </td>
                <td style='width: 600px'>
                    <div style="float: left;" id="chart1"></div>
                    <div style="float: left;" id="chart2"></div>
                </td>
            </tr>
        </table>
    </div>
</body>

JavaScript

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

function drawVisualization() {
    control1 = createDashboard1();
    control2 = createDashboard2();

    google.visualization.events.addListener(control1, 'statechange', function () {
        control2.setState(control1.getState());
        control2.draw();
    });
}

function createDashboard1() {
    // Prepare the data.
    var data = google.visualization.arrayToDataTable([
        ['Name', 'Age'],
        ['Michael', 12],
        ['Elisa', 20],
        ['Robert', 7],
        ['John', 54],
        ['Jessica', 22],
        ['Aaron', 3],
        ['Margareth', 42],
        ['Miranda', 33]
    ]);

    // Define a StringFilter control for the 'Name' column
    var stringFilter = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
            'containerId': 'control1',
            'options': {
            'filterColumnLabel': 'Name'
        }
    });

    // Define a table visualization
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
            'containerId': 'chart1',
            'options': {
            'height': '13em',
                'width': '20em'
        }
    });

    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the string filter to affect the table contents
    bind(stringFilter, table).
    // Draw the dashboard
    draw(data);

    return stringFilter;
}

function createDashboard2() {
    // Prepare the data.
    var data = google.visualization.arrayToDataTable([
        ['Fruit', 'Calories'],
        ['Apple', 12],
        ['Banana', 20],
        ['Kiwi', 7],
        ['Peach', 54],
        ['Watermelon', 22],
        ['Raspberry', 3],
        ['Strawberry', 42],
        ['Orange', 33]
    ]);

    // Define a StringFilter control for the 'Name' column
    var stringFilter = new...