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 />
<div id="tableChartWrapper_div"></div>
Before table3:
<div id="table3"></div>
<div id="table4"></div>
<p id="demo0"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<div id="dashboard">
    <div id="namePicker-div"></div>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</div>

JavaScript

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', 6, 7],
        [2, 'foo', 2, 7],
        [3, 'foo', 1, 7],
        [4, 'foo', 3, 7],
        [1, 'bar', 7, 7],
        [2, 'bar', 3, 7],
        [1, 'baz', 8, 8],
        [2, 'baz', 4, 8],
        [2, 'cad', 5, 8],
        [2, 'cad', 6, 8],
        [2, 'cad', 2, 8],
        [2, 'qud', 9, 9],
        [2, 'qud', 3, 9],
        [2, 'qud', 3, 9],
        [2, 'qud', 5, 9],
        [2, 'qud', 1, 9]
    ]);
 document.write(data.lenght);
 var namePicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'namePicker-div',
        'options': {
           'filterColumnLabel': 'B',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true
            }
        }
    });
    var tableA = new google.visualization.ChartWrapper({
        chartType: 'Table',
            containerId: 'chart1',
           options: {
            width: 300,
                height: 300
        },
       //    view: {
       //     columns: [2, 3]
        //}
    });
    var newdata = new google.visualization.DataTable();
        newdata.addColumn('number', 'A');
    var distinctValues = data.getDistinctValues(1);
    var viewColumns = [0];
    var groupColumns = [];
    document.getElementById("demo0").innerHTML = distinctValues;
    document.getElementById("demo1").innerHTML = viewColumns;
    document.getElementById("demo2").innerHTML = groupColumns;
  
    // build column arrays for the view and grouping
  for (var j=0; j <  distinctValues.length; j++) {   
       newdata.addColumn('string', distinctValues[j]);
     
   }
        document.write(data.length);
      document.getElementById("demo3").innerHTML =...