title: How to Convert Pivoted Table to DataTable Google visualization
body: <p>Thanks to asgalant I have found a way to pivote a 3 columns table <a href="http://jsfiddle.net/asgallant/HkjDe/" rel="nofollow">here</a> </p>
  
  <p>Now I would like to use a categoryfilter to choose some of the columns and present a Linechart of the choosen columns.</p>
  
  <p>I use a pivoted chart that loads it data from a spreadsheet.</p>
  
  <p>Here is my <a href="http://jsfiddle.net/forssux/1yw40yLL/" rel="nofollow">example</a>, In essence I think I need to get the pivotedData back into a new DataView od DataTable.</p>
  
  <p>Can somebody help me?</p>
  
  <p>Kind Regards
  Guy</p>
  
  <pre><code> google.load('visualization', '1', {
      packages: ['table']
  });
  google.setOnLoadCallback(drawChart);
  function drawChart() {
      ///// getting the data ////////
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XGqGIs36krgKbRjufKJJNRdu1NUBZlgIJek2ojnOo2Y/edit#gid=967698286');
  
      // Apply query language statement.
      query.setQuery('SELECT A,B,C  ORDER BY C');
  
      // Send the query with a callback function.
      query.send(handleQueryResponse);
  
  
  }
  
  ///// ----------------------- //////
  
  function handleQueryResponse(response) {
      var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div'));
      if (response.isError()) {
          alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
          return;
      }
  
      var data = response.getDataTable();
  
  
      //    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 &lt; 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],
              aggregation: google.visualization.data.sum
          });
      }
  
      var view = new google.visualization.DataView(data);
      view.setColumns(viewColumns);
  
      // next, we group the view on column A, which gets us the pivoted data
      var pivotedData = google.visualization.data.group(view, [0], groupColumns);
  
      var table2 = new google.visualization.Table(document.getElementById('table2'));
      table2.draw(pivotedData, {});
  
      var Linechart = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          containerId: 'linechart_div',
          view: {
              'columns': [0, 1, 2, 3, 4]
          },
          options: {
              height: 400,
              // omit width, since we set this in CSS
              chartArea: {
                  width: '75%' // this should be the same as the ChartRangeFilter
              }
          }
      });
  
      var RangeFiltercontrol = new google.visualization.ControlWrapper({
          controlType: 'ChartRangeFilter',
          containerId: 'ChartRangecontrol_div',
          options: {
              filterColumnIndex: 0,
              ui: {
                  chartOptions: {
                      height: 50,
                      // omit width, since we set this in CSS
                      chartArea: {
                          width: '75%' // this should be the same as the ChartRangeFilter
                      }
                  }
              }
          }
      });
  
      var annotationchart = new google.visualization.AnnotationChart(document.getElementById('annotationchart_div'));
  
      var options = {
          displayAnnotations: false
      };
  
      annotationchart.draw(pivotedData, options);
  
  
  var LineChartView = new google.visualization.DataView(pivotedData);
  LineChartView.setColumns([0, 1, 2, 3, 4]);
  //dataView.hideColumns(3);
  // dataView.toDataTable(myView)
  var dashboard = new google.visualization.Dashboard(document.querySelector('dashboard_div'));
  dashboard.bind([RangeFiltercontrol], [Linechart]);
  dashboard.draw(LineChartView);
  
  
  function zoomLastDay() {
      var range = data.getColumnRange(0);
      control.setState({
          range: {
              start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
              end: range.max
          }
      });
      control.draw();
  }
  
  function zoomLastWeek() {
      var range = data.getColumnRange(0);
      control.setState({
          range: {
              start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7),
              end: range.max
          }
      });
      control.draw();
  }
  
  function zoomLastMonth() {
      // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month
      // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist
      // you can tweak this to make it function differently if you want
      var range = data.getColumnRange(0);
      control.setState({
          range: {
              start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()),
              end: range.max
          }
      });
      control.draw();
  }
  
  var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
      google.visualization.events.removeListener(runOnce);
  
      if (document.addEventListener) {
          document.querySelector('#lastDay').addEventListener('click', zoomLastDay);
          document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek);
          document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth);
      } else if (document.attachEvent) {
          document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay);
          document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek);
          document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth);
      } else {
          document.querySelector('#lastDay').onclick = zoomLastDay;
          document.querySelector('#lastWeek').onclick = zoomLastWeek;
          document.querySelector('#lastMonth').onclick = zoomLastMonth;
      }
  });
   }
  </code></pre>