Programmatically Pivoting the Google Visualization

Question

I excited with this fiddle and I tried to create the same kind with reference to that fiddle. My modified sample is given in here and i'm trying to create a view as follows.

var distinctValues = data.getDistinctValues(2);

    var viewColumns = [1];
    var groupColumns = [];
    // build column arrays for the view and grouping
    for (var i = 0; i < distinctValues.length; i++) {
        viewColumns.push({
            type: 'number',
            label: distinctValues[i],
            aggregation: google.visualization.data.count
        });
        groupColumns.push({
            column: i+1,
            type: 'number',
            //label: distinctValues[i],
            aggregation: google.visualization.data.sum
        });
    }

But my aim is to create a pivot table something like as follows.

['Column1', 'Column2', 100, 200, 300, 400],
['A', 'bar', 0, 1, 1, 0],
['A', 'baz', 0, 0, 1, 0],
['A', 'foo', 3, 1, 0, 0],
['B', 'baz', 0, 1, 0, 0],
['B', 'cad', 1, 0, 1, 1],
['B', 'qud', 1, 1, 1, 2]

How can I proceed?

Answer 1

You have to change a few things in your code. First, the viewColumns needs to contain both columns 0 and 1 to start if you want Column1 and Column2 to both be in the output. Then, you need to adjust the columns you add to the viewColumns: each one needs a calc parameter which calculates the value in the column. In this case, you want to compare the value of the column to distinctValues[i] and return 1 when they match and 0 when they don't. In the aggregation function for groupColumns, use sum instead of count:

var distinctValues = data.getDistinctValues(2);

var viewColumns = [0, 1];
var groupColumns = [];
// build column arrays for the view and grouping
for (var i = 0; i < distinctValues.length; i++) {
    viewColumns.push({
        type: 'number',
        label: distinctValues[i],
        calc: (function (x) {
            return function (dt, row) {
                return (dt.getValue(row, 2) == x) ? 1 : 0;
            }
        })(distinctValues[i])
    });
    groupColumns.push({
        column: i+2,
        type: 'number',
        //label: distinctValues[i],
        aggregation: google.visualization.data.sum
    });
}

Then, in the grouping function, pass columns 0 and 1 in the first array:

var pivotedData = google.visualization.data.group(view, [0, 1], groupColumns);

See these changes working here: http://jsfiddle.net/asgallant/DUn6B/1/