Archived discussions · Captured October 28, 2026

Bokeh widget filters

toh.christianFeb 16, 2016 #1

I’m creating a very simple dashboard using bokeh and flask right now, and it needs to have basic filtering functionality (think two multiselect widgets with customer state, type, and a textinput with a product partial string).

I’d like for the widgets to subset a dataframe I’ve loaded in when they are modified, without using bokeh-server. Can it be done using just CustomJS callbacks which I believe are the alternative? Can anyone find an example of this using these?

⌁ Link to post

Dennis_O_BrienFeb 16, 2016 #2

I don’t have an example I can share at the moment (it was for a work project) but I have done what you are mentioning using CustomJS. The basic gist is this:

In your CustomJS callback, pass two datasource objects, one for the original and one for the filtered. The original is not touched, the filtered is rebuilt in the filtering process. The filtered data source is also the source used by your chart.
Get the values of the widgets you will use for filtering.
If your data is editable (e.g., a DataTable with editable columns) you will update your “original source” with the edited values before the next filter stage.
Iterate through each key of the original data source. For each item in original_data[key], if it passes the filter criteria, add it to filtered_data[key]. (The iteration could be sped up by something like crossfilter, but in my case with about 10k rows and 20 columns, performance was fine.)
Trigger changes.
There is just one generic CustomJS object which is attached to all the filtering widgets.

There is a similar process as above when you want to save the results of your filtered data.

I’ll try to get an example to share. In the meantime, I hope this is helpful.

cheers,

Dennis

···

On Mon, Feb 15, 2016 at 8:35 PM toh.christian@gmail.com wrote:

I’m creating a very simple dashboard using bokeh and flask right now, and it needs to have basic filtering functionality (think two multiselect widgets with customer state, type, and a textinput with a product partial string).

I’d like for the widgets to subset a dataframe I’ve loaded in when they are modified, without using bokeh-server. Can it be done using just CustomJS callbacks which I believe are the alternative? Can anyone find an example of this using these?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/931d5016-a4a6-4414-be0c-fca75e8c0837%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

Dennis_O_BrienFeb 17, 2016 #3

Here are a couple code sample demonstrating this. Both will run in a notebook.

Multiple filters:

https://gist.github.com/dennisobrien/450d7da20daaba6d39d0

Multiple filters, send the filtered data somewhere:

https://gist.github.com/dennisobrien/2e9fa913436f3e3aebfa

Neither example deals with editable data in the data table.

Hope this helps. If there are other (simpler) ways to do this let me know.

cheers,

Dennis

···

On Tue, Feb 16, 2016 at 1:26 AM Dennis O’Brien dennis@dennisobrien.net wrote:

I don’t have an example I can share at the moment (it was for a work project) but I have done what you are mentioning using CustomJS. The basic gist is this:

In your CustomJS callback, pass two datasource objects, one for the original and one for the filtered. The original is not touched, the filtered is rebuilt in the filtering process. The filtered data source is also the source used by your chart.

Get the values of the widgets you will use for filtering.

If your data is editable (e.g., a DataTable with editable columns) you will update your “original source” with the edited values before the next filter stage.

Iterate through each key of the original data source. For each item in original_data[key], if it passes the filter criteria, add it to filtered_data[key]. (The iteration could be sped up by something like crossfilter, but in my case with about 10k rows and 20 columns, performance was fine.)

Trigger changes.
There is just one generic CustomJS object which is attached to all the filtering widgets.

There is a similar process as above when you want to save the results of your filtered data.

I’ll try to get an example to share. In the meantime, I hope this is helpful.

cheers,

Dennis

On Mon, Feb 15, 2016 at 8:35 PM toh.christian@gmail.com wrote:

I’m creating a very simple dashboard using bokeh and flask right now, and it needs to have basic filtering functionality (think two multiselect widgets with customer state, type, and a textinput with a product partial string).

I’d like for the widgets to subset a dataframe I’ve loaded in when they are modified, without using bokeh-server. Can it be done using just CustomJS callbacks which I believe are the alternative? Can anyone find an example of this using these?

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/931d5016-a4a6-4414-be0c-fca75e8c0837%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

⌁ Link to post

birdsarah_continuumMar 04, 2016 #4

These examples are awesome - thanks Dennis.

···

On 2/17/16 1:12 AM, Dennis O’Brien
wrote:

    Here are a couple code sample demonstrating this.

Both will run in a notebook.

Multiple filters:

https://gist.github.com/dennisobrien/450d7da20daaba6d39d0

Multiple filters, send the filtered data somewhere:

https://gist.github.com/dennisobrien/2e9fa913436f3e3aebfa

Neither example deals with editable data in the data table.

      Hope this helps.  If there are other (simpler) ways to do

this let me know.

cheers,

Dennis

        On Tue, Feb 16, 2016 at 1:26 AM Dennis O'Brien

<dennis@dennisobrien.net >
wrote:

          I don't have an example I can share at the
moment (it was for a work project) but I have done what
you are mentioning using CustomJS. The basic gist is
this:
                In your CustomJS callback, pass two datasource
objects, one for the original and one for the
filtered. The original is not touched, the filtered
is rebuilt in the filtering process. The filtered
data source is also the source used by your chart.
                Get the values of the widgets you will use for
filtering.
                If your data is editable (e.g., a DataTable with
editable columns) you will update your “original
source” with the edited values before the next
filter stage.
                Iterate through each key of the original data
source. For each item in original_data[key], if it
passes the filter criteria, add it to
filtered_data[key]. ( The iteration could
be sped up by something like crossfilter, but in
my case with about 10k rows and 20 columns,
performance was fine.)
Trigger changes.
There is just one generic CustomJS object which is
attached to all the filtering widgets.

            There is a similar process as above when you want to

save the results of your filtered data.

            I'll try to get an example to share.  In the

meantime, I hope this is helpful.

cheers,

Dennis

On Mon, Feb 15, 2016 at 8:35 PM < >
wrote:

              I'm creating a very simple dashboard
using bokeh and flask right now, and it needs to have
basic filtering functionality (think two multiselect
widgets with customer state, type, and a textinput
with a product partial string).

                I'd like for the widgets to subset a dataframe
I’ve loaded in when they are modified, without using
bokeh-server. Can it be done using just CustomJS
callbacks which I believe are the alternative? Can
anyone find an example of this using these?

–
            You received this message because you are subscribed to
the Google Groups “Bokeh Discussion - Public” group.
            To unsubscribe from this group and stop receiving emails
from it, send an email to bokeh+unsubscribe@continuum.io.
            To post to this group, send email to                 .
To view this discussion on the web visit .
For more options, visit .

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to bokeh+unsubscribe@continuum.io.

  To post to this group, send email to bokeh@continuum.io.

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAPUwX3O0y0MwitRS1wG6ETUucd_DrVGri73DxQrnPjK_Z4NKTg%40mail.gmail.com?utm_medium=email&utm_source=footer)      .

For more options, visit .

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)

toh.christian@gmail.com
bokeh@continuum.io
https://groups.google.com/a/continuum.io/d/msgid/bokeh/931d5016-a4a6-4414-be0c-fca75e8c0837%40continuum.io
https://groups.google.com/a/continuum.io/d/optout
https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAPUwX3O0y0MwitRS1wG6ETUucd_DrVGri73DxQrnPjK_Z4NKTg%40mail.gmail.com
https://groups.google.com/a/continuum.io/d/optout

⌁ Link to post

systemJul 21, 2021 #5

⌁ Link to post

End of archived discussion · Replies are disabled