How can I correctly hide columns in my Google chart?

Question

I have a google spreadsheet with with 5 columns in it. column 0 is the title column and the other four have the values.

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

chartview1.setColumns([ 0, 1 ]);

it works fine! But when I do

chartview2.setColumns([0, 2 ]);

I get the error:

Invalid column index 2. Should be an integer in the range [0-1]

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

it works fine and hides the other columns.

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

I tried using the method outlined here : how to hide column in google charts table but this doesn't work for me.

Thanks

UPDATE: Here is the full code:

<html>
  <head>
    <meta charset="UTF-8">

    <title>Service Desk Performance (Weekly)</title>
    <style>

    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;

    }
    </style>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">


       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);


    </script>
  </head>



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

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

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





  </body>
</html>

urchino urchino · Accepted Answer · 2016-03-11T10:28:44

I have had very similar issues to this - I create a 5 column DataTable from an array of analytic data and then dynamically construct a DataView in order to hide different sets of columns as and when the user chooses options on the page and finally display as an AreaChart. I found that hiding the last 2 columns using either view.hideColumns([3,4]) or view.setColumns([0,1,2]) works ok, but any attempt to hide a column that results in a non-contiguous set of column indices results in a failure of the AreaChart to display the result - it sounds like your ColumnChart has exactly the same issue.

The only solution I've discovered thus far is to make a copy of the view after the columns have been hidden. This creates a new view which has contiguous column indices and which will correctly populate the chart. It shouldn't be necessary, but I can't find any other way around the issue so far.

So in your case:

// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0, 2 ]);

// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);

// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2_copy, chartOptions);

This isn't pretty, but it worked for me, so perhaps the same will solve your issues also.

How can I correctly hide columns in my Google chart?

1 Answers