How can I correctly hide columns in my Google chart?
<p>I have a google spreadsheet with with 5 columns in it. column 0 is the title column and the other four have the values.</p>

<p>I want to do a different column chart (using google charts API) for each of the four value columns, but I can't hide the other columns. When I use </p>

<pre><code>chartview1.setColumns([ 0, 1 ]);
</code></pre>

<p>it works fine! But when I do </p>

<pre><code>chartview2.setColumns([0, 2 ]);
</code></pre>

<p>I get the error: </p>

<blockquote>
  <p>Invalid column index 2. Should be an integer in the range [0-1]</p>
</blockquote>

<p>Similarly, when I do <code>tableview2.setColumns([ 0, 2]);</code> and then implement the dataView as a table (rather than a columnChart) </p>

<p>it works fine and hides the other columns.</p>

<p>Can anyone tell me what I am doing wrong? I can provide the full code if necessary.</p>

<p>I tried using the method outlined here :
<a href="https://stackoverflow.com/questions/8785894/how-to-hide-column-in-google-charts-table">how to hide column in google charts table</a>
but this doesn't work for me.</p>

<p>Thanks</p>

<p>UPDATE: Here is the full code:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;

    &lt;title&gt;Service Desk Performance (Weekly)&lt;/title&gt;
    &lt;style&gt;

    h2 {
    font-family:"helvetica",arial, sans-serif;
    }
    .tableHeader {
    background:transparent;
    }
    .tableHeader th {
    background-image:none !important;
    background:#ccc !important;
    color:#fff !important;
    border-bottom:2px solid #222 !important;
    }
    .tableRow {
    background:#e9e9e9;

    }
    &lt;/style&gt;

    &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;


       google.load("visualization", "1", {packages:["corechart", "table"]});

    function initialize() {
            var opts = {sendMethod: 'auto'};
            // Replace the data source URL on next line with your data source URL.
            var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1c6r2xi4eY4iGcgWCRQcPce8A79OhDN4v5khkkC2WFVM/edit?usp=sharing', opts);         
            -
            // Optional request to return only column C and the sum of column B, grouped by C members.
            //query.setQuery('select C, sum(B) group by C');

            // Send the query with a callback function.
            query.send(handleQueryResponse);
    }

    function handleQueryResponse(response) {
          if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
          }

    var data = response.getDataTable();

    var chartview1 = new google.visualization.DataView(data);
    var tableview1 = new google.visualization.DataView(data);

    var chartview2 = new google.visualization.DataView(data);
    var tableview2 = new google.visualization.DataView(data);

    var chartview3 = new google.visualization.DataView(data);
    var tableview3 = new google.visualization.DataView(data);

    var chartview4 = new google.visualization.DataView(data);
    var tableview4 = new google.visualization.DataView(data);

    chartview1.setColumns([ 0, 1 ]);
    tableview1.setColumns([ 0, 1 ]);

    chartview2.setColumns([ 0, 2 ]);
    tableview2.setColumns([ 0, 2 ]);

    chartview3.setColumns([ 0, 3 ]);
    tableview3.setColumns([ 0, 3 ]);

    chartview4.setColumns([ 0, 4 ]);
    tableview4.setColumns([ 0, 4 ]);

    var test= chartview2.getNumberOfColumns();
    console.log(test);

    var chartOptions = {


      vAxis: {
      title: 'Requests',
      gridlines: {color: 'transparent'},
      baseline:0
      },

      chartArea: {
      left:100,
      top:40,
      width:"100%"
      },

      hAxis: { title: 'Assignee Group' },

      colors: [ '#00ccff', '#afafaf' ],

      animation: {
        startup: true,
        duration: 500,
        easing: 'in'
      },

      legend: {position:'none'}

    };

    var tableOptions = {

      showRowNumber: false, 
      right:100,
      top:40,
      width: '100%',
      alternatingRowStyle: false,
      cssClassNames: {
      headerRow: 'tableHeader',
      tableRow: 'tableRow',
      tableCell: 'tableCell'

      }

    };

    var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
    var table1 = new google.visualization.Table(document.getElementById('table1'));

    chart1.draw(chartview1, chartOptions);
    table1.draw(tableview1, tableOptions);

    var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
    var table2 = new google.visualization.Table(document.getElementById('table2'));

    chart2.draw(chartview2, chartOptions);
    table2.draw(tableview2, tableOptions);

    var chart3 = new google.visualization.ColumnChart(document.getElementById('chart3'));
    var table3 = new google.visualization.Table(document.getElementById('table3'));

    chart3.draw(chartview3, chartOptions);
    table3.draw(tableview3, tableOptions);

    var chart4 = new google.visualization.ColumnChart(document.getElementById('chart4'));
    var table4 = new google.visualization.Table(document.getElementById('table4'));

    chart4.draw(chartview4, chartOptions);
    table4.draw(tableview4, tableOptions);

    }

  google.setOnLoadCallback(initialize);


    &lt;/script&gt;
  &lt;/head&gt;



  &lt;body&gt;
  &lt;h2&gt;Week 1&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;div style="float:left;width:70%;"&gt;
        &lt;div id="chart1" style="width:100%; height:600px;position:relative;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:right;width:30%;"&gt; 
        &lt;div id="table1" style="width:100%;margin:10px 40px 0 0;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;  
  &lt;/div&gt;

  &lt;hr&gt;
  &lt;h2&gt;Week 2&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;div style="float:left;width:70%;"&gt;
        &lt;div id="chart2" style="width:100%; height:600px;position:relative;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:right;width:30%;"&gt; 
        &lt;div id="table2" style="width:100%;margin:10px 40px 0 0;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;  
  &lt;/div&gt;
  &lt;h2&gt;Week 3&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;div style="float:left;width:70%;"&gt;
        &lt;div id="chart3" style="width:100%; height:600px;position:relative;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:right;width:30%;"&gt; 
        &lt;div id="table3" style="width:100%;margin:10px 40px 0 0;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;  
  &lt;/div&gt;

  &lt;hr&gt;
  &lt;h2&gt;Week 4&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;div style="float:left;width:70%;"&gt;
        &lt;div id="chart4" style="width:100%; height:600px;position:relative;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="float:right;width:30%;"&gt; 
        &lt;div id="table4" style="width:100%;margin:10px 40px 0 0;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;  
  &lt;/div&gt;





  &lt;/body&gt;
&lt;/html&gt;
</code></pre>