CODEWITHSUNDEEP
google-visualization
ramkumar-yoganathan
ramkumar-yoganathan

Reputation: 2168

Google Chart: How do implement individual category filter without binding them?

I have 3 category filter which doesn't want to bind them and act as an individual drop-down list. Is there any way to achieve? Thanks for your help. This is an initial code developed.

function formInitialization() {
            var sqlQuery = "sql?tq=select * &sqlQueryID=form_dropdown_data";
            var requestControlHandler = new google.visualization.Query(sqlQuery);
            requestControlHandler.send(responseControlHandler);
        }
        function responseControlHandler(queryControlResponse) {
            var filterProductTypes = new google.visualization.ControlWrapper(
            {
                'controlType': 'CategoryFilter',
                'containerId': 'filterProductTypesContainer',
                'options': {
                    'filterColumnIndex': '0', 'ui': {
                        'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false
                    }
                }
            });

            var filterSupportLifecycle = new google.visualization.ControlWrapper(
            {
                'controlType': 'CategoryFilter',
                'containerId': 'filterSupportLifecycleContainer',
                'options': {
                    'filterColumnIndex': '2',
                    'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
                }
            });

            var filterReleaseTypes = new google.visualization.ControlWrapper(
           {
               'controlType': 'CategoryFilter',
               'containerId': 'filterReleaseTypesContainer',
               'options': {
                   'filterColumnIndex': '1',
                   'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
               }
           });
            var responseControlDataTable = queryControlResponse.getDataTable();
            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
            dashboard.draw(filterProductTypes, responseControlDataTable);
            //   initialization();
        }

Upvotes: 1

Views: 515

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

set the 'dataTable' property, then draw each control individually

see following snippet... 

function responseControlHandler(queryControlResponse) {
  var filterProductTypes = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filterProductTypesContainer',
    'dataTable': queryControlResponse.getDataTable(),
    'options': {
      'filterColumnIndex': '0',
      'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
    }
  });
  filterProductTypes.draw();

  var filterSupportLifecycle = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filterSupportLifecycleContainer',
    'dataTable': queryControlResponse.getDataTable(),
    'options': {
      'filterColumnIndex': '2',
      'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
    }
  });
  filterSupportLifecycle.draw();

  var filterReleaseTypes = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filterReleaseTypesContainer',
    'dataTable': queryControlResponse.getDataTable(),
    'options': {
      'filterColumnIndex': '1',
      'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
    }
  });
  filterReleaseTypes.draw();
}

EDIT

to set the default value for a CategoryFilter,

set the 'state' property

'state' has one property --> 'selectedValues'

'selectedValues' is an array of values that will be selected when drawn
(the values must exist in the list)

see following snippet... 

  var filterProductTypes = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filterProductTypesContainer',
    'dataTable': queryControlResponse.getDataTable(),
    'options': {
      'filterColumnIndex': '0',
      'ui': { 'label': '', 'labelSeparator': ':', 'labelStacking': 'horizontal', 'allowTyping': false, 'allowNone': false, 'allowMultiple': false }
    },
    'state': {
      'selectedValues': ['Default Value']
    }
  });

Upvotes: 1

Related Questions