Drill-down table
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;
}
TypeScript
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);
}