Manually pivoted DataTable

HTML

<script src="https://www.google.com/jsapi?fake=.js"></script>
Before manual pivot:
<div id="table1"></div>
After manual pivot:
<div id="table2"></div>
<br />
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to manually pivot data in a DataTable</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

JavaScript

google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'A');
    data.addColumn('string', 'B');
    data.addColumn('number', 'C');
    data.addRows([
        [1, 'foo', 6],
        [2, 'foo', 2],
        [3, 'foo', 1],
        [4, 'foo', 3],
        [1, 'bar', 7],
        [2, 'bar', 3],
        [1, 'baz', 8],
        [2, 'baz', 4],
        [2, 'cad', 5],
        [2, 'cad', 6],
        [2, 'cad', 2],
        [2, 'qud', 9],
        [2, 'qud', 3],
        [2, 'qud', 3],
        [2, 'qud', 5],
        [2, 'qud', 1]
    ]);
    
    var table1 = new google.visualization.Table(document.getElementById('table1'));
    table1.draw(data, {});
    
    /* pivot the data table
     * set column A as the first column in the view, 
     * then we have to separate out the C values into their own columns
     * according to the value of B, using a DataView with calculated columns
     */
    
    // get all the values in column B
    // this sorts the values in lexicographic order, so if you need a different order you have to build the array appropriately
    var distinctValues = data.getDistinctValues(1);
    
    var viewColumns = [0];
    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 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 + 1,
            type: 'number',
            label: distinctValues[i],
           ...