JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="linechart"></div>
    <div id="filter"></div>
    <div id="columnchart"></div>  
    <div id="toolbar"></div>
    <div id="gauges"></div>          
</div>

CSS

div#dashboard {
    width:99.5%;
}
#dashboard div {
    margin-bottom: 1em;
} 
div#filter {
    margin-left: 2.7em;
    margin-right: 2.7em;
}                   
div#gauges {
    margin-left: 10em;
}

JavaScript

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

// why make these global?
var query, data, dashboard, dataSourceUrl, rangeSlider, lineChart, gauges;

function drawDashboard() {
    // I changed this up to use a manually built data table because your data source isn't public
    handleQueryResponse();
    return;
    
    dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?key=0Asffgktd29tldDRkQ0o1endDdzB1SDlCQjZ3NHhvWlE&gid=45&range=B%3AG&headers=-1';
    query = new google.visualization.Query(dataSourceUrl);
    //query.setQuery('SELECT *');
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
/*
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    data = response.getDataTable();
*/
    // manually built DataTable:
    data = new google.visualization.DataTable();
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');
    data.addColumn('number', 'Y3');
    data.addColumn('number', 'Y4');
    data.addColumn('number', 'Y5');
    data.addColumn('date', 'Date');
    var y = [50, 50, 50, 50, 50];
    var today = new Date();
    // fill with 100 days of random data
    for (var i = 100; i > 0; i--) {
        for (var j = 0; j < y.length; j++) {
            y[j] = y[j] + Math.floor(Math.random() * 20) - 10;
            if (y[j] > 100) {
                y[j] = 100;
            }
            else if (y[j] < 0) {
                y[j] = 0;
            }
        }
        data.addRow([y[0], y[1], y[2], y[3], y[4], new Date(today.getYear(), today.getMonth(), today.getDate() - i)]);
    }
    
    dashboard = new google.visualization.Dashboard(document.getElementById("dashboard"));

    rangeSlider = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'filter',
        options: {
            // Filter by the date axis.
     ...