How to retain tooltip when pivoting Google Visualization DataTable

Question

I'm using some great code from @asgallant to pivot a Google DataTable for use in a line chart. His code is here: http://jsfiddle.net/asgallant/HkjDe/

In my original DataTable I have a 4th column however that is a tooltip string. When I pivot the table with his code my tooltip if no longer available. I would like to use the tooltips provided and for the cells that are 'created' use some standard tooltip text. Here is what my version of the initial table setup looks like.

var data = new google.visualization.DataTable();
data.addColumn('number', 'A');
data.addColumn('string', 'B');
data.addColumn('number', 'C');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
    [1, 'foo', 6, 't1'],
    [2, 'foo', 2, 'hello'],
    [3, 'foo', 1, 't2'],
    [4, 'foo', 3, 'test'],
    [1, 'bar', 7, 't3'],
    [2, 'bar', 3, 'again'],
    [1, 'baz', 8, 't4'],
    [2, 'baz', 4, 'and'],
    [2, 'cad', 5, 't5'],
    [3, 'cad', 6, 'again'],
    [1, 'qud', 9, 'x'],
    [5, 'qud', 1, 'z']
]);

Can anyone provide some assistance?

-- UPDATE --

Edited the initial addRows statement to be more representative of my data model.

Answer 1

In order to preserve the tooltips, you need to add tooltip columns to the view and pivot data:

for (var i = 0; i < distinctValues.length; i++) {
    viewColumns.push({
        type: 'number',
        label: distinctValues[i],
        calc: (function (x) {
            return function (dt, row) {
                // return values of C only for the rows where B = distinctValues[i] (passed into the closure via x)
                return (dt.getValue(row, 1) == x) ? dt.getValue(row, 2) : null;
            }
        })(distinctValues[i])
    });
    groupColumns.push({
        column: (i * 2) + 1,
        type: 'number',
        label: distinctValues[i],
        aggregation: google.visualization.data.sum
    });
    // add columns for the tooltips
    viewColumns.push({
        type: 'string',
        calc: (function (x) {
            return function (dt, row) {
                // return values of the tooltip column only for the rows where B = distinctValues[i] (passed into the closure via x)
                return (dt.getValue(row, 1) == x) ? dt.getValue(row, 3) : null;
            }
        })(distinctValues[i])
    });
    groupColumns.push({
        column: (i * 2) + 2,
        type: 'string',
        aggregation: function (values) {
            return values.join('');
        }
    });
}

The group function does not handle column roles properly, so you have to set them afterwards:

// fix the tooltip column roles, since the group function won't create them properly
for (var i = 1; i < pivotedData.getNumberOfColumns(); i++) {
    if (pivotedData.getColumnType(i) == 'string') {
        pivotedData.setColumnProperty(i, 'role', 'tooltip');
    }
}

See example: http://jsfiddle.net/asgallant/HkjDe/23/