title: How to categoryFilter for a column that can't be displayed within Google Charts datatable
body: <p>I am using Google Charts with a datatable build up like this:</p>
  <blockquote>
  <p>'Created', 'Passed', 'Passed with Bugs','In
  Process','Failed','Untested','Retest','Blocked','Functionality']<br>
  &quot;August 31, 2020&quot;,1,10,3,5,23,0,0,&quot;Functionality1&quot;<br>
  &quot;August 31, 2020&quot;,5,4,23,1,39,0,0,&quot;Functionality2&quot;<br>
  &quot;August 31, 2020&quot;,1,10,3,5,23,0,0,&quot;Functionality3&quot;<br>
  &quot;September 6, 2020&quot;,1,10,3,5,23,0,0,&quot;Functionality1&quot;<br>
  &quot;September 6, 2020&quot;,5,4,23,1,39,0,0,&quot;Functionality2&quot;<br></p>
  </blockquote>
  <p>I am grouping values by column 0 (date) and the visualization is done in a stacked Columnchart like this:
  <a href="https://i.stack.imgur.com/JbDQG.png" rel="nofollow noreferrer">ColumnChart Example</a></p>
  <p>Since I am mixing up numbers (columns 1-7) with a string (column 8) I create a DataView without column 8. If I don't do this I get the error &quot;All series on a given axis must be of the same data type&quot;.</p>
  <p>Still I would like to have column 8 to use it within a ControlWrapper as a &quot;CategoryFilter&quot;.
  E.g. draw the columnChar only showing &quot;Functionality1&quot; data.</p>
  <p>Below my code. It is a mix of Jinja (running a Flask webserver) and javascript:</p>
  <pre><code>  &lt;body&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
        var dataArrayTests = new Array();
      &lt;/script&gt;
  
  {% for item in test_details %}
      &lt;script type=&quot;text/javascript&quot;&gt;
          dataArrayTests.push([
              '{{ item[&quot;created&quot;] }}',
              parseInt('{{ item[&quot;Passed&quot;] }}'),
              parseInt('{{ item[&quot;Passed with bugs found&quot;] }}'),
              parseInt('{{ item[&quot;In Process&quot;] }}'),
              parseInt('{{ item[&quot;Failed&quot;] }}'),
              parseInt('{{ item[&quot;Untested&quot;] }}'),
              parseInt('{{ item[&quot;Retest&quot;] }}'),
              parseInt('{{ item[&quot;Blocked&quot;] }}'),
              '{{ functionality }}'
          ]);
      &lt;/script&gt;
  {% endfor %}   
  
    &lt;script type=&quot;text/javascript&quot;&gt;
      google.charts.load(&quot;current&quot;, {packages:['corechart']});
      google.charts.setOnLoadCallback(drawDashboard);
      dataArrayTests.reverse()
      dataArrayTests.unshift(['Created', 'Passed', 'Passed with Bugs','In Process','Failed','Untested','Retest','Blocked','Functionality'])
  
      // Load the Visualization API and the controls package.
      // Packages for all the other charts you need will be loaded
      // automatically by the system.
      google.charts.load('current', {'packages':['corechart', 'controls']});
  
      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);
  
      function drawDashboard() {
      // Everything is loaded. Assemble your dashboard...
  
        var data = google.visualization.arrayToDataTable(dataArrayTests);
  
        var result = google.visualization.data.group(
            data,
            [0],
            [{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
            {'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}
          ]
        )
        var options = {
          height: 600,
          legend: { position: 'top' },
          bar: { groupWidth: '75%' },
          isStacked: true,
        };
  
      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  
      // Create a Category Filter, passing some options
      var functionalityFilter = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'filter_div',
          'options': {
               //This gives an error right now since there is no column 8 in the view I create below. Index from 0-7 works without errors ... but these are not the columns I want to filter by
              'filterColumnIndex' : 8 
          }
      });
  
      // Create a ColumnChart, passing some options
      var columnStack = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'options': {
              &quot;height&quot;: 600,
              &quot;legend&quot;: { position: 'top' },
              &quot;bar&quot;: { groupWidth: '75%' },
              &quot;isStacked&quot;: true,
          }
      });
  
      // Create a view to filter out column 8 to avoid the error &quot;All series on a given axis must be of the same data type&quot;
      var view = new google.visualization.DataView(result)
      view.setColumns([0,1,2,3,4,5,6,7]);
  
      dashboard.bind(functionalityFilter, columnStack)
      dashboard.draw(view);
    }
    &lt;/script&gt;
  </code></pre>