CODEWITHSUNDEEP
chartsgoogle-visualization
ramkumar-yoganathan
ramkumar-yoganathan

Reputation: 2168

How do I bind google visualization category filter with all filters at any direction of selection?

I have three category filter which had a binding clockwise direction of dropdown selection. Now I need to bind it for any direction. It means, If I select any dropdown other 2 dropdown should be filter their values.

Code works for clockwise direction:

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

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

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

    var tblSearchFilters = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'tblSearchFilters',
        'options': {
            'allowHtml': true, 'showRowNumber': true, 'page': 'enable', 'pageSize': 10,
            width: '100%'
        }
    });

    new google.visualization.Dashboard(document.getElementById('dashboard'))
        .bind(cblAnalyst, cblAdvocate)
        .bind(cblAdvocate, cblProductNames)
        .bind(cblProductNames, tblSearchFilters)
        .draw(dtSearchFilters);

Category filter drawn:

enter image description here

Solution looking for:

I should be able to filter the Analyst and Advocate when i chosen the product.

EDITED:

Sample Data:

Filter 1    Filter 2    Filter 3 (Apply filter here)
AN - 1  AD - 1  PD - 1
AN - 1  AD - 1  PD - 2
AN - 1  AD - 2  PD - 3
AN - 2  AD - 3  PD - 4
AN - 2  AD - 4  PD - 5

Copy this into excel spreadsheet and apply filter as specified..

Upvotes: 0

Views: 489

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the question is difficult to understand without a working example

typically, when binding multiple controls to the same chart(s),
only one bind call is needed 

new google.visualization.Dashboard(document.getElementById('dashboard'))
    .bind([cblAnalyst, cblAdvocate, cblProductNames], tblSearchFilters)
    .draw(dtSearchFilters);

this will keep all the filters in sync with the table

for instance, if a Product is selected,
only the remaining Analysts and Advocates associated with that product will be available in the filters

Upvotes: 1

Related Questions