JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id='MonthlyUsage'></div>
<div id="MonthlyChart"></div>

JavaScript

google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(initMonthlyUsage);
var optionsMonthlyUsage, MonthlyUsage, MonthlyUsageView;

function initMonthlyUsage() {
    optionsMonthlyUsage = {
        allowHTML: true
    };
    MonthlyUsage = new google.visualization.DataTable();
    MonthlyUsage.addColumn('string', 'Month');
    MonthlyUsage.addColumn('number', 'Acre Feet');
    MonthlyUsage.addRows([['April', 380.8], ['May', 733.51], ['June', 893.76], ['July', 913.03], ['August', 1187.6], ['September', 1201.53], ['October', 14.17]]);
    google.visualization.events.addListener(MonthlyUsage, 'ready', function() {
        alert('Ready');
    });
    drawMonthlyUsage();

    if (optionsMonthlyUsage['page'] == 'enable') {
        var select = document.MonthlyUsageForm.numRows;
        for (i = 10; i <= MonthlyUsage.getNumberOfRows(); i += 10) {
            select.options[select.length] = new Option(i, i);
        }
        select.options[select.length] = new Option('All', MonthlyUsage.getNumberOfRows());
    }
}

function setOptionMonthlyUsage(prop, value) {
    optionsMonthlyUsage[prop] = value;
    drawMonthlyUsage();
}

function drawMonthlyUsage() {
    var numberFormatter = new google.visualization.NumberFormat({
        prefix: '$',
        negativeParens: true
    });
    var dateFormatter = new google.visualization.DateFormat({
        pattern: 'M/d/y'
    });
    var table = new google.visualization.Table(document.getElementById('MonthlyUsage'));



    MonthlyUsageView = new google.visualization.DataView(MonthlyUsage);

    table.draw(MonthlyUsageView, optionsMonthlyUsage);
}

function MonthlyUsageSelector() {
    return true;
}