JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<p>Table1:</p>
<div id='Table1'></div>
<p>Table2:</p>
<div id='Table2'></div>

CSS

#Table1, #Table2 {
    margin-bottom: 15px;
}

JavaScript

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

var table1data = eval([["O47.28-03", 8, "August", 128.22], ["O47.28-03", 9, "September", 96.95]]);
var augustdata = eval([[new Date(2011, 7, 1, 6, 0, 0, 0), "O47.28-03", 3.12, "District Water", "Y", 2.1, 36, "On"], [new Date(2011, 7, 2, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 7, 3, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 7, 4, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 7, 5, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"]]);
var septemberdata = eval([[new Date(2011, 8, 1, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 8, 2, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 8, 3, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 8, 4, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 8, 5, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"], [new Date(2011, 8, 6, 0, 0, 0, 0), "O47.28-03", 4.17, "District Water", "Y", 2.1, 48, "Run"]]);
var Table1 = {};
var Table2 = {};

google.setOnLoadCallback(drawTable);

function drawTable() {
    Table1 = {
        Data: new google.visualization.DataTable({
            "cols": [{
                "id": "Turnout",
                "label": "Turnout",
                "type": "string"},
            {
                "id": "MonthNumber",
                "label": "Month Number",
                "type": "number"},
            {
                "id": "Month",
                "label": "Month",
                "type": "string"},
            {
                "id": "AcreFeet",
                "label": "Acre Feet",
                "type": "number"}]
        }),
        Table: new google.visualization.Table(document.getElementById('Table1'))
   ...