Pivoted Table twice

by forssux

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="CategoryFilter_div"></div>
<br />
TableChatwrapper_div 700_400
<div id="tableChartWrapper_div"></div>

Before table3:
<div id="table3"></div>

Before table4
<div id="table4"></div>
<div id="namePicker_div"></div>
<div id="dashboard">
    <div id="control1"></div>
    
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</div>

JavaScript

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

 var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind(namePicker, tableA);


function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'A');
    data.addColumn('string', 'B');
    data.addColumn('number', 'C');
    data.addColumn('number', 'D');
    data.addRows([
        [1, 'foo', 1, 7],
        [2, 'foo', 2, 7],
        [3, 'foo', 3, 7],
        [4, 'foo', 5, 7],
        [1, 'bar', 3, 7],
        [2, 'bar', 4, 7],
        [3, 'bar', 6, 7],
        [4, 'bar', 8, 7],
        [1, 'baz', 2, 8],
        [2, 'baz', 4, 8],
        [1, 'cad', 5, 8],
        [2, 'cad', 6, 8],
        [3, 'cad', 7, 8],
        [4, 'cad', 9, 9],
        [2, 'qud', 3, 9],
        [2, 'qud', 4, 9],
        [2, 'qud', 5, 9],
        [2, 'qud', 7, 9]
    ]);
    
///Before manual pivot///
    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 columnsTable = new google.visualization.DataTable();

    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...