Linked Tables - Synchronous

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], ["O47.28-03", 9]]);

var augustdata = eval([[1, "O47.28-03", 4.17], [2, "O47.28-03", 4.17], [3, "O47.28-03", 4.17], [4, "O47.28-03", 4.17]]);

var septemberdata = eval([[5, "O47.28-03", 5.25], [6, "O47.28-03", 5.25], [7, "O47.28-03", 5.25], [8, "O47.28-03", 5.25]]);

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"}]
        }),
        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(table1data);

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

function showTable2() {
    var selection = Table1.Table.getSelection();
    var dataSet = [];
    
    if (Table1.Data.getValue(selection[0].row, 1) === 8) {
        dataSet = augustdata;
    } else {
        dataSet = septemberdata;
    }

    Table2.Data.removeRows(0, Table2.Data.getNumberOfRows());
    Table2.Data.addRows(dataSet);
    Table2.Table.draw(Table2.Data);
}