Linked Tables - aSynchronous

by beej

HTML

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
Month Selector: <select id="monthSelector">
    <option value="0">8</option>
    <option value="1">9</option>
</select>
<p>Table1:</p>
<div id='Table1'></div>
<p>Table2:</p>
<div id='Table2'></div>

CSS

p { margin-top: 15px; }

JavaScript

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

var Table1 = {};
var Table2 = {};

var index = [[["O47.28-03", 8]], [["O47.28-03", 9]]];

google.setOnLoadCallback(function() {
    $('#monthSelector').change(function() {
        Table1.Data.removeRows(0, Table2.Data.getNumberOfRows());
        Table1.Data.addRows(index[$(this).val()]);
        Table1.Table.draw(Table1.Data);
    });
    initialize();
});

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

    Table2 = {
        Data: new google.visualization.DataTable({
            "cols": [{
                "id": "Column",
                "label": "Column",
                "type": "number"},
            {
                "id": "Turnout",
                "label": "Turnout",
                "type": "string"},
            {
                "id": "Usage",
                "label": "Usage",
                "type": "number"}]
        }),
        Table: new google.visualization.Table(document.getElementById('Table2'))
    };

    Table1.Data.addRows(index[$('#monthSelector').val()]);

    google.visualization.events.addListener(Table1.Table, 'select', showTable2);
    Table1.Table.draw(Table1.Data);
}

function showTable2() {
    var selection = Table1.Table.getSelection();

    fakeAjax(Table1.Data.getValue(selection[0].row, 1), function(retrievedData) {
        Table2.Data.removeRows(0, Table2.Data.getNumberOfRows());
        Table2.Data.addRows(retrievedData);
        Table2.Table.draw(Table2.Data);
    });
}

function fakeAjax(month, callback) {
    var augustdata = eval([[1, "O47.28-03", 4.17], [2, "O47.28-03",...