JSFiddle - React, Tailwind, and code Playground

by mis786

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() {
            //console.log('foo');
            // Prepare the data
            var data = google.visualization.arrayToDataTable([
                     ['Country', 'Region/State', 'City', 'Date'],
                     ['USA', 'California', 'San Francisco', new Date(2014, 06, 09)],
                     ['USA', 'California', 'Los Angeles', new Date(2014, 06, 09)],
                     ['USA', 'California', 'Mountain View', new Date(2014, 06, 09)],
                     ['USA', 'New York', 'New York', new Date(2014, 06, 08)],
                     ['USA', 'New York', 'Albany', new Date(2014, 06, 08)],
                     ['France', 'Ile-de-France', 'Paris', new Date(2014, 06, 06)],
                     ['France', 'Ile-de-France', 'Orly', new Date(2014, 06, 06)],
                     ['France', 'Provence', 'Marseille', new Date(2014, 06, 06)],
                     ['France', 'Provence', 'Nice', new Date(2014, 06, 06)]
            ]);




            // Define category pickers for 'Name'
            var countryPicker = new google.visualization.ControlWrapper({
                controlType: 'CategoryFilter',
                containerId: 'control1',
                options: {
                    filterColumnLabel: 'Date',
                    ui: {
                        labelStacking: 'vertical',
                        allowTyping: false,
                        allowMultiple: false
                    }
                }
            });


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

            new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker],...