Using multiple Checkboxgroups to hide/show glyphs

[wyoon]

I have quite a few bar glyphs whose visibility I want to be able to control via two separate checkboxgroups. The first checkboxgroup will have choices like ‘BRAND1’,‘BRAND2’,‘BRAND3’. The second checkboxgroup will have ‘ITEM1’,‘ITEM2’,‘ITEM3’,‘ITEM4’. Each BRAND has the all of the same ITEM’s.

I know I can just have every combination listed in a big checkboxgroup (‘BRAND1_ITEM1’,‘BRAND1_ITEM2’,‘BRAND1_ITEM3’,‘BRAND1_ITEM4’,‘BRAND2_ITEM1’,etc…) and I am able to set the visibility as expected using a single checkboxgroup. However, the reason I want to set visibility based on the active selections from both checkboxgroups is because I have quite a few combinations (15 BRANDS, 7 ITEMS), so it would result in a very long list. By splitting the choices into two columns the selection fits much better on the screen next to the plot.

I have a couple of questions:

1. Is it possible to see what is active from one checkbox in the other? I don’t really have any idea how to go about this if it is possible.
2. Is there another way for me to achieve this multilevel selection? I was thinking maybe each checkboxgroup item could be a dropdown list or something like that, but that seems more annoying for the user.

[gmerritt123]

To answer both your questions: yes.

I implement this “multi-criteria filter” by using the CustomJSFilter (Providing data — Bokeh 2.4.2 Documentation). Essentially you pass in each checkbox group instance as args to the CustomJSFilter, and in the CustomJSFilter code you check each record in your ColumnDataSource against the state of each checkbox group, and if it “passes” the selection criteria, you push that index to an array, and then you return that array of selected indices. Then you create a CDSView with that filter applied, then assign that CDSView to the specific renderer you want to appear as filtered. The documentation for this is pretty comprehensive (that example I linked to is key) so give it a go, and if you get hung up on the javascript side I’ll give you a hand here

EDIT A word

[wyoon]

Thank you, I’ll give that a try.

[gmerritt123]

I just remembered I posted an example a while back that’ll probably help:

Create a table with widgets as entries

I made a multifilter example with dummy data. Get ‘data.csv’ from here : data.csv · GitHub Code: import pandas as pd import numpy from bokeh.models import ColumnDataSource, CustomJS, RadioGroup, CheckboxGroup, CustomJSFilter, CDSView from bokeh.models.widgets import DataTable, TableColumn from bokeh.plotting import figure, save from bokeh.layouts import layout df = pd.read_csv('data.csv').reset_index() #create source src = ColumnDataSource({x:df[x].tolist() for x in df.columns}) #instantiate …

This is with a radiobutton group and a checkbox group but it’s the same idea.

[wyoon]

That’s exactly what I needed. After looking at your sample, I was definitely going to stumble around trying to figure out exactly how to handle the javascript portion, so thank you very much for that multifilter example, it is very helpful.