Table Footer

794 views
Skip to first unread message

Kanik

unread,
Aug 23, 2010, 3:18:04 AM8/23/10
to Google Visualization API
Hi.
many peoples asked for unsorted table footer or TOTAL row.
I wrote this function and hope to help you.

----------------------------------------------
step 1 ) declare this variable at top of your script
footer=[['1st column text',1st_ColSpan],['2nd column text',
2nd_ColSpan],....];

example
footer=[['Total',5],['1,234,567',1]]; // <---assume our table have 6
columss

step 2 ) add this function to your script (anywhere)

function addFooter(){
if (document.getElementById('google-visualization-table-
footer')) return
var tables=document.getElementsByTagName('TABLE');
for (i=0; i<tables.length; i++)
if (tables[i].className=='google-visualization-table-
table'){
var r=tables[i].insertRow();
r.id='google-visualization-table-footer'
var c;
r.className='google-visualization-table-tr-head';
for (j=0; j<footer.length; j++){
c=r.insertCell();
c.className='google-visualization-table-th'
c.innerHTML=footer[j][0]
c.colSpan=footer[j][1]
}
}
}

step 3 ) add these event listener before table.draw() method

google.visualization.events.addListener(table, 'ready',
addFooter);
google.visualization.events.addListener(table, 'sort',
addFooter);
google.visualization.events.addListener(table, 'page',
addFooter);


Kanik

unread,
Aug 24, 2010, 11:54:41 PM8/24/10
to Google Visualization API
Hi
function addFootr not works correctly in Firefox.
here is a new working version

--------------------------------------
function addFooter(){
if (document.getElementById('google-visualization-table-
footer')) return
var tables=document.getElementsByTagName('TABLE');
for (i=0; i<tables.length; i++)
if (tables[i].className=='google-visualization-table-
table'){
var r=tables[i].insertRow(tables[i].rows.length);
r.id='google-visualization-table-footer'
var c;
r.className='google-visualization-table-tr-head';
for (j=0; j<footer.length; j++){
c=r.insertCell(j);
Reply all
Reply to author
Forward
0 new messages