Toggle the column visibility in Google visualization table based on category picker control

Question

Here is a example where the chart can be hide/show based on category picker control. I work on a similar approach where i trying to hide/show a column from the Google visualization table as given in this fiddle

google.visualization.events.addListener(dashboard, 'ready', function() {
          var countrySelectedValues = countryPicker.getState()['selectedValues'];
          var regionSelectedValues = regionPicker.getState()['selectedValues'];          
          if (countrySelectedValues.length == 0 || regionSelectedValues.length == 0) {
            document.getElementById('chart2').hideColumns([1]);
          } else {
            document.getElementById('chart2').hideColumns([]);       
          }
        });
      }

Answer 1

DOM elements do not have a hideColumns method, which is why you are getting those error messages. This is not valid:

document.getElementById('chart2').hideColumns([1]);

If I understand your intent correctly, you want to hide the "Country" and "Region" columns if there are no values selected. To do that, you need to hook up a "statechange" event handler for each control, and set the Table's view appropriately based on the state of the controls, then redraw the Table:

function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Region/State', 'City', 'Population'],
        ['USA', 'California', 'San Francisco', 776733],
        ['USA', 'California', 'Los Angeles', 3694820],
        ['USA', 'California', 'Mountain View', 70708],
        ['USA', 'New York', 'New York', 8175173],
        ['USA', 'New York', 'Albany', 857592],
        ['France', 'Ile-de-France', 'Paris', 2193031],
        ['France', 'Ile-de-France', 'Orly', 21372],
        ['France', 'Provence', 'Marseille', 852395],
        ['France', 'Provence', 'Nice', 348556]
    ]); 

    // Define category pickers for 'Country', 'Region/State'
    var countryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control1',
        'options': {
            'filterColumnLabel': 'Country',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false    
            }
        }
    });

    var regionPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Region/State',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': false    
            }
        }
    });

    // Define a bar chart to show 'Population' data.
    // The bar chart will show _only_ if the user has choosen a value

    // Define a table.
    // The table shows whatever is selected by the category pickers. It's here
    // just for reference and debugging.
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'chart2',
        'options': {
            'width': '300px'
        }
    });

    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    function showHideColumns () {
        var selectedCountries = countryPicker.getState().selectedValues;
        var selectedRegions = regionPicker.getState().selectedValues;
        var columns = [2, 3];
        if (selectedRegions.length) {
            columns.splice(0, 0, 1);
        }
        if (selectedCountries.length) {
            columns.splice(0, 0, 0);
        }
        table.setView({columns: columns});
        table.draw();
    }
    google.visualization.events.addOneTimeListener(dashboard, 'ready', showHideColumns);
    google.visualization.events.addListener(countryPicker, 'statechange', showHideColumns);
    google.visualization.events.addListener(regionPicker, 'statechange', showHideColumns);

    // Configure the controls so that:
    // - the 'Country' selection drives the 'Region' one,
    // - both the 'Country' and 'Region' selection drive the barchart
    // - both the 'Country' and 'Region' selection drive the table
    dashboard.bind([countryPicker], [regionPicker]);
    dashboard.bind([regionPicker], [table]);
    // Draw the dashboard
    dashboard.draw(data);
}

google.setOnLoadCallback(drawVisualization);
google.load('visualization', '1.0', {packages: ['controls']});

Example here: http://jsfiddle.net/asgallant/x3JT4/1/