Summary Rows

Grouping data for summarization requires a simple strategy. We will calculate a summary subrow for every row in the table, then just hide the ones not on a group boundary. So here is some (boring!) numeric data:

{ 
	identifier: 'id',
	label: 'name',
	items: [
        { id:'Q1_06', name: 'Q1 2006', year:2006, quarter:1, sales:345436 },
        { id:'Q2_06', name: 'Q2 2006', year:2006, quarter:2, sales:234525 },
        { id:'Q3_06', name: 'Q3 2006', year:2006, quarter:3, sales:129104 },
        { id:'Q4_06', name: 'Q4 2006', year:2006, quarter:4, sales:-10000 },
        { id:'Q1_07', name: 'Q1 2007', year:2007, quarter:1, sales:-178775 },
        { id:'Q2_07', name: 'Q2 2007', year:2007, quarter:2, sales:286027 },
        { id:'Q3_07', name: 'Q3 2007', year:2007, quarter:3, sales:429546 },
        { id:'Q4_07', name: 'Q4 2007', year:2007, quarter:4, sales:946375 }
    ]
}

To implement our strategy, we first build two functions which supply the total and total label for each totalling subrow.

function getYearlyLabel(inRowIndex) {
            return model.getRow(inRowIndex) ? "Total for " + model.getRow(inRowIndex).year : 'None';
        }
        function getYearlyTotal(inRowIndex) {
            return model.getRow(inRowIndex) ? (yearlyTotal += model.getRow(inRowIndex).sales) : -1;
        }

Next, we make an onAfterRow procedure to hide all the rows that are not after Q4

// inRow is an array of subRows. we hide the summary subRow except for every nth row
function onAfterRow(inDataIndex, inRow) {
    // note that header row inDataIndex == -1
    inRow[1].hidden = true;

    // Before rows 3, 7, 11 turn on display of the total
    if (inDataIndex != -1 && inDataIndex % 4 == 3) {
	yearlyTotal = 0;
        inRow[1].hidden = false;
    }
}

Then we wire it all up in the view definition:

var view1 = {
    onAfterRow: onAfterRow,
	cells: [[
		{name: 'Year/Quarter', field:'name'}, 
		{name: 'Sales', field:'sales'}
	],[
	    // The summary subrow, which will be hidden on most rows
		{name: 'Cell2', get: getYearlyLabel },
		{name: 'Yearly Sales', get:getYearlyTotal, styles:'font-weight:bold;'},
	]]
};

And the summary rows are displayed. Currently this example shows the summary row for all rows. A question is pending on the forums about this, and the example will be fixed accordingly.