JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="http://www.google.com/jsapi"></script>
<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"></div>
            </td>
            <td style='width: 600px'>
                <div style="float: left;" id="chart1"></div>
                <div style="float: left;" id="chart2"></div>
                <div style="float: left;" id="chart3"></div>
            </td>
        </tr>
    </table>
</div>

JavaScript

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

google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'City', 'Population'],
        ['USA', 'California', 'San Francisco', 776733],
        ['USA', 'California', 'Los Angeles', 3694820],
        ['USA', 'California', 'Mountain View', 70708],
        ['USA', 'New York', 'New York', 8175173],
        ['USA', 'New York', 'Albany', 857592],
         ['USA', 'Texas', 'Albany', 857592],
        ['France', 'Ile-de-France', 'Paris', 2193031],
        ['France', 'Ile-de-France', 'Orly', 21372],
        ['France', 'Provence', 'Marseille', 852395],
        ['France', 'Provence', 'Nice', 348556]
    ]); 
    
    // Define category pickers for 'Country', 'Region/State'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false    
            }
        }
    });
    
    var regionPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false    
            }
        }
    });
  
    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    
    dashboard.bind([countryPicker], [regionPicker]);
    // Draw the dashboard
    dashboard.draw(data);
}