JSFiddle - React, Tailwind, and code Playground

by jun_a

HTML

<div id="dashboard">
    <table>
        <tr style='vertical-align: top'>
            <td style='width: 300px; font-size: 0.9em;'>
                <div id="control1"></div>
            </td>
            <td style='width: 800px'>
                <div style="float: left;" id="chart2"></div>
            </td>
        </tr>
    </table>
</div>

JavaScript

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

    function drawVisualization() {
     
        var data = google.visualization.arrayToDataTable([
            ['Fruit', 'Date'],
            ['Apple', new Date(2014, 05, 09)],
            ['Banana', new Date(2014, 05, 09)],
            ['Kiwi', new Date(2014, 05, 10)],
            ['Peach', new Date(2014, 05, 09)],
            ['Watermelon', new Date(2014, 05, 10)],
            ['Raspberry', new Date(2014, 05, 10)],
            ['Strawberry', new Date(2014, 05, 11)],
            ['Orange', new Date(2014, 05, 11)],
            ['Apple', new Date(2014, 05, 11)],
            ['Banana', new Date(2014, 05, 12)],
            ['Kiwi', new Date(2014, 05, 12)],
            ['Peach', new Date(2014, 05, 12)],
            ['Watermelon', new Date(2014, 05, 13)],
            ['Raspberry', new Date(2014, 05, 13)],
            ['Strawberry', new Date(2014, 05, 13)],
            ['Orange', new Date(2014, 05, 16)],
            ['Banana', new Date(2014, 05, 16)],
            ['Kiwi', new Date(2014, 05, 16)],
            ['Peach', new Date(2014, 05, 16)],
            ['Strawberry', new Date(2014, 05, 13)]
        ]);


        var datePicker = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'control1',
            options: {
                filterColumnLabel: 'Date',
                ui: {
                    labelStacking: 'vertical',
                    allowTyping: false,
                    allowMultiple: false
                },
                useFormattedValue: true
            }

        });

       
        var table = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'chart2',
            options: {
                width: '500px'
            }
        });

        new...