JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<select id="yearSelector">
    <option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option>    </select>
Select Turnout: <select id="turnoutSelector"></select>
<div id="MonthlyUsageGraph"></div>
<div id="MonthlyUsageTable"></div>
<div id="UsageOnTurnout"></div>

JavaScript

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

var Deliveries = {};
google.setOnLoadCallback(function() {
    Deliveries = {
        Turnouts: eval([["2008", "O47.28-03"], ["2008", "O47.30-01"], ["2008", "X89.29-02"], ["2008", "X89.30-03"], ["2008", "X89.31-01"], ["2008", "X89.32-02"], ["2009", "O47.28-03"], ["2009", "O47.29-03"], ["2009", "X89.28-02"], ["2009", "X89.29-02"], ["2009", "X89.30-03"], ["2009", "X89.31-01"], ["2009", "X89.32-02"], ["2010", "O47.28-03"], ["2010", "O47.29-03"], ["2010", "X89.28-01"], ["2010", "X89.28-02"], ["2010", "X89.29-02"], ["2010", "X89.30-03"], ["2010", "X89.31-01"], ["2010", "X89.32-02"], ["2011", "O47.28-03"], ["2011", "X89.28-01"], ["2011", "X89.28-02"], ["2011", "X89.29-02"], ["2011", "X89.30-03"], ["2011", "X89.31-01"], ["2011", "X89.32-02"]]),
        MonthyUsageColumns: {
            "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"}]
        },
        TurnoutDetailsColumns: {
            "cols": [{
                "id": "ReadingDate",
                "label": "Reading Date",
                "type": "string"},
            {
                "id": "Turnout",
                "label": "Turnout",
                "type": "string"},
            {
                "id": "Usage",
                "label": "Usage",
                "type": "number"},
            {
                "id": "Category",
                "label": "Category",
                "type": "string"},
            {
                "id": "Billed",
               ...