TJ72 TJ72 - 1 year ago 136
Javascript Question

Google Charts Update Category Filter based on other Category Filter

I have these two filters below, both are implemented into google charts. When I change filter1, the data changes in the visualization, but the values in filter2 do not change. I was wondering if that was possible with Google Charts.


  • filter1 has: 1 and 2 for options

  • filter2 has: A,B,C,D,E,F for options



Selecting 1 from filter1 needs to trigger the data-source of filter2 to filter to A,B,C.

Selecting 2 from filter1 needs to trigger the data-source of filter2 to filter to D,E,F.

Filters for google charts:

var filter_1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter1',
'options': {
'filterColumnIndex': 0,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'selectedValuesLayout': 'belowStacked',
'label': 'Filter 1:'
}
}
});


var filter_2= new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter2',
'options': {
'filterColumnIndex': 1,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'selectedValuesLayout': 'belowStacked',
'label': 'Filter 2:'
}
}
});

Answer Source
bind(filter_1, filter_2)

This will make any filter_2 change its options based on filter_1. Change the order to have the reverse effect. Once that is done, to get both filters to your chart...

bind([filter_1, filter_2], chart)
draw(chart)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download