Bokeh widget filters

Community Support
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?

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 [email protected] 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 [email protected].

To post to this group, send email to [email protected].

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.

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 [email protected] 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 [email protected] 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 [email protected].

To post to this group, send email to [email protected].

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.

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

<[email protected] >
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 [email protected].

            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 [email protected].

  To post to this group, send email to [email protected].

  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)

[email protected]
[email protected]
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