Linked Tables - aSynchronous

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>
Month Selector: <select id="monthSelector">
    <option value="0">1</option>
    <option value="1">2</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 = [[["Foo", 1]], [["Bar", 2]]];

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

function initialize() {
    Table1 = {
        Data: new google.visualization.DataTable({
            "cols": [{
                "id": "Column1",
                "label": "Column1",
                "type": "string"},
            {
                "id": "Column2",
                "label": "Column2",
                "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 aug = [[1,"foo",4.17],[2,"foo",4.17],[3,"foo",4.17],[4,"foo",4.17]];
    var sept = [[5, "bar", 5.25], [6, "bar", 5.25], [7, "bar", 5.25], [8, "bar", 5.25]];
    
    var select = Table1.Table.getSelection();
    
    var switchData = '';
    if(Table1.Data.getValue(select[0].row, 1) == 1) {
        switchData = aug;
    } else {
        switchData = sept;
    }
    
    var data = {
        json: $.toJSON({
...