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="control2"></div>
                <div id="control1"></div>
                
                <div id="control3"></div>
            </td>
            <td style="float: left">
        <input type="button" value="Add" id="control4" />
            </td>
        </tr>
           <tr style='vertical-align: top'>
            <td style='width: 300px; font-size: 0.8em;'>
             <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.0', {
            packages: ['controls']
        });
    function drawVisualization() {
   // console.log('foo');
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
              ['Name', 'Tag', 'Type', 'Date'],
              ['WCHC 2007-1 PREF', 45, 'TK',new Date(2014, 12, 06)],
              ['WCHC 2007-1 PREF', 85, 'TK', new Date(2014, 12, 06)],
              ['VWALT 2014-A A2A', 100, 'TK', new Date(2014, 12, 06)],
              ['TRAP 2002-1A C1', 100.5, 'TK', new Date(2014, 12, 06)],
              ['TALON 1W 1', 99.5, 'TK', new Date(2014, 12, 06)],
              ['TALON 1W 1', 85.5, 'TK', new Date(2014, 12, 06)],
              ['TRAP 2002-1A C1', 99.6, 'TK', new Date(2014, 12, 06)]

            ]);
    
    // Define category pickers for 'Name'
    var countryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'control2',
        options: {
            filterColumnLabel: 'Name',
            ui: {
                labelStacking: 'vertical',
                allowTyping: false,
                allowMultiple: false,
                caption: 'Select Name',
                label: '',
            }
        }
    });
    
    
         var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
            var line = new google.visualization.ChartWrapper({
                'chartType': 'LineChart',
                'containerId': 'chart1',
                'options': {
                    'width': 950,
                    'height': 450,
                    'legend': 'none',

                    'hAxis': {
                        'format': "dd-MM-yyyy",
                        'hAxis.maxValue': 'viewWindow.max',
                        'maxValue': new Date(2014, 06, 30), 'minValue': new Date(2014, 06, 05),
                        'viewWindow': { 'max': new Date(2014, 06, 30) },
                    },
                    //...