JSFiddle - React, Tailwind, and code Playground

by Stephanie Remias

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <table>
        <tr style='vertical-align: top'>
            <td style='width: 230px; font-size: 0.9em; background-color: rgba(240, 232, 232, 0.89)'>
                <div id="control1"></div>
                <br>
                <div id="control2"></div> <div id="projects"></div>
                <br>
                <div id="gauge1"></div>
            </td>
 <td style='width: 1000px'>
                <div style="float: left;" id="chart1"></div>
            </td>
          
        </tr>
    </table>
</div>

CSS

.goog-menu-vertical {
    max-height:  200px;
    overflow-y: auto;
}

JavaScript

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

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
     ['Pct', 'Project'],
        [0, 'PROJECT 10'],
        [66, 'PROJECT 1'],
        [100, 'PROJECT 2'],
    ]);

    // Define category pickers for 'Project'
    var ProjectPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'projects',
        options: {
            filterColumnLabel:'Project',
            ui: {
                labelStacking: 'vertical',
                allowTyping: true,
                allowMultiple: true,
                caption: 'Pick a project',
                label: 'Select a project'
            }
        }
    });

        //TO DO: remove this
//Define a chart to show AML CFT Risk per country
  var geoChart = new google.visualization.ChartWrapper({
        chartType: 'GeoChart',
        containerId: 'chart1',
        // changed "ID" to "Id"
        options: {
            title: 'CFT Risk',
            displayMode: 'regions',
            width: 1000,
            datalessRegionColor: 'C0C0C0',
            colorAxis: {
                colors: ['#00FF00', '#FFFF00', '#FF0000'],
                minValue: 0,
                maxValue: 10
            }
        },
        // Defines data to show in geoChart
        view: {
            columns: [1]
        }
    });  

    // set up gauge datatable
    var gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn('string', 'Series');
    gaugeData.addColumn('number', 'Average');

    var gauge1 = new google.visualization.ChartWrapper({
        chartType: 'Gauge',
        dataTable: gaugeData,
        containerId: 'gauge1',
        options: {
            width: 150,
            height: 150,
            min: 0,
            max: 150,
            animation: {
                duration: 1000,
               ...