Getting the value of Parent control in Google visualization CategoryFilter

Question

I have a sample fiddle here in which the Google visualization Category Filter control is created as,

  var countryPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnIndex': 0,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

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

        var cityPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control3',
          'options': {
            'filterColumnIndex': 2,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

Here We can select the filter in any combination. But, If I directly select Albany in CityPicker control then, how can I get its parent's values (ie, The value USA from countryPicker and the value New York from regionPicker) in which that particular city belongs to?

Answer 1

You can use a statechange event handler to get the current city, and then filter the DataTable by city to get the region and country combo(s) that correspond to that city. Here's an example:

google.visualization.events.addListener(cityPicker, 'statechange', function () {
    var state = cityPicker.getState();
    if (state.selectedValues.length) {
        // there is a selected city
        // since you set allowMultiple to false, there can be only one, so it is safe to do this:
        var city = state.selectedValues[0];
        var rows = data.getFilteredRows([{column: 2, value: city}]);
        // parse the rows for all country/region/state combos
        var regionsCountries = [];
        var comboChecker = {};
        for (var i = 0; i < rows.length; i++) {
            var country = data.getValue(rows[i], 0);
            var region = data.getValue(rows[i], 1);
            // the comboChecker makes sure we don't add a region/country combo more than once to the data set
            if (!comboChecker[region + country]) {
                comboChecker[region + country] = true;
                regionsCountries.push({region: region, country: country});
            }
        }
        // do something with regionsCountries
    }
});

See working example here: http://jsfiddle.net/asgallant/KLhD3/1/