how to hide column in google charts table

Question

I\'ve got a Google Charts Table that displays a couple of columns and rows. Say for instance we have 4 columns(A,B,C,D respectively). How would I be able to still load column C\

Answer 1

Here's an alternative using a ChartWrapper instead of a chart.

var opts = {
    "containerId": "chart_div",
    "dataTable": datatable,
    "chartType": "Table",
    "options": {"title": "Now you see the columns, now you don't!"}
}
var chartwrapper = new google.visualization.ChartWrapper(opts);

// set the columns to show
chartwrapper.setView({'columns': [0, 1, 4, 5]});    
chartwrapper.draw();

If you use a ChartWrapper, you can easily add a function to change the hidden columns, or show all the columns. To show all the columns, pass null as the value of 'columns'. For instance, using jQuery,

$('button').click(function() {
    // use your preferred method to get an array of column indexes or null
    var columns = eval($(this).val());

    chartwrapper.setView({'columns': columns});    
    chartwrapper.draw();
});

In your html,

Hide columns
Expand All

(Note: eval used for conciseness. Use what suits your code. It's beside the point.)