19

It would be nice to be able to interactively display and hide lines in a bokeh plot. Say, I have created my plot something like this:

from bokeh.plotting import output_file, figure, show
from numpy.random import normal, uniform

meas_data_1 = normal(0, 1, 100)
meas_data_2 = uniform(-0.5, 0.5, 100)

output_file("myplot.html", title="My plot")
fig = figure(width=500, plot_height=500)

fig.line(x=range(0, len(meas_data_1)), y=meas_data_1)
fig.line(x=range(0, len(meas_data_2)), y=meas_data_2)

show(fig)

How can I add the possibility to interactively enable/disable one of the two lines?

I know that this is on the wish list (see this feature request), but that doesn't sound like it would be implemented too soon.

I have the impression that this should be possible using a CheckBoxGroup and a self-defined callback, but unfortunately this callback has to be written in JavaScript, which I have absolutely no experience in.

Eike P.
  • 3,333
  • 1
  • 27
  • 38

2 Answers2

15

EDIT: Interactive legends are now built into the library as of Bokeh 0.12.5, see https://bokeh.github.io/blog/2017/4/5/release-0-12-5/

This appears on track to be implemented at some point as interactive legends: https://github.com/bokeh/bokeh/issues/3715

Currently (v0.12.1), there is an example that uses CustomJS on checkboxes to achieve this: https://github.com/bokeh/bokeh/pull/4868

Relevant code:

import numpy as np

from bokeh.io import output_file, show
from bokeh.layouts import row
from bokeh.palettes import Viridis3
from bokeh.plotting import figure
from bokeh.models import CheckboxGroup, CustomJS

output_file("line_on_off.html", title="line_on_off.py example")

p = figure()
props = dict(line_width=4, line_alpha=0.7)
x = np.linspace(0, 4 * np.pi, 100)
l0 = p.line(x, np.sin(x), color=Viridis3[0], legend="Line 0", **props)
l1 = p.line(x, 4 * np.cos(x), color=Viridis3[1], legend="Line 1", **props)
l2 = p.line(x, np.tan(x), color=Viridis3[2], legend="Line 2", **props)

checkbox = CheckboxGroup(labels=["Line 0", "Line 1", "Line 2"],
                         active=[0, 1, 2], width=100)
checkbox.callback = CustomJS(args=dict(l0=l0, l1=l1, l2=l2, checkbox=checkbox),
                             lang="coffeescript", code="""
l0.visible = 0 in checkbox.active;
l1.visible = 1 in checkbox.active;
l2.visible = 2 in checkbox.active;
""")

layout = row(checkbox, p)
show(layout)
bigreddot
  • 33,642
  • 5
  • 69
  • 122
user2561747
  • 1,333
  • 2
  • 16
  • 39
  • Thanks for the edit! Side question: is there a way to do this using a list of renderers instead of separate variables? I'd like to show/hide a set of ~30 different renderers at once. – user2561747 Aug 11 '16 at 14:53
  • Probably, you should be able to pass a list as one of the values in the `args` dict, IIRC. – bigreddot Aug 11 '16 at 15:12
  • Couldn't get that to work, bokeh raised `ValueError: expected an element of Dict(String, Instance(Model)), got {'renderers': [, ...], 'checkbox': }` – user2561747 Aug 11 '16 at 22:21
  • For a workaround, I gave each renderer that I wanted to be able to interactively hide the `name="hideable"`. Then instead of a list of renderers, I passed `plot=p` into the `args` dict. My coffeescript code was then: `rends = plot.select("hideable"); rends[i].visible = i in checkbox.active for i in [0...rends.length];` – user2561747 Aug 11 '16 at 22:28
  • Ah, sending simple containers might not be too hard to implement, if you want to make a GH feature request (no guarantees about when it might be addressed) – bigreddot Aug 12 '16 at 00:59
  • In Bokeh 0.12.3, use the `.from_coffeescript` method instead of `lang="coffeescript"` – user2561747 Nov 24 '16 at 02:32
  • 3
    As of 0.12.5 you just use `plot.legend.click_policy = "hide"` and you're done. – user136036 Jul 16 '17 at 17:33
  • Thanks for the example. Needed to remove lang="coffeescript" to make it work in my case. – Noel Aug 30 '17 at 11:20
  • For version 3.1.0 scripting has slightly changed, please refer to https://docs.bokeh.org/en/latest/docs/examples/plotting/line_on_off.html – Aroc Apr 15 '23 at 05:42
2

I may be wrong, but it seems to me that there is no id available for the various lines, one way of hiding them would have been to do a document.getElementById("idSelected").style.visibility = "hidden";

since CheckBoxGroup doesn't have a callback available I decided to use a Select. I can get the selected source in the CustomJS, but that's pretty much all :

from bokeh.io import vform
from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.plotting import output_file, figure, show
from numpy.random import normal, uniform

meas_data_1 = normal(0, 1, 10)
meas_data_2 = uniform(-0.5, 0.5, 10)

x1 = range(0, len(meas_data_1))
y1 = meas_data_1
source1 = ColumnDataSource(data=dict(x=x1, y=y1))
x2 = range(0, len(meas_data_2))
y2 = meas_data_2
source2 = ColumnDataSource(data=dict(x=x2, y=y2))



output_file("myplot.html", title="My plot")
fig = figure(width=500, plot_height=500)

fig.line('x', 'y', source=source1, line_width=3, line_alpha=0.6)
fig.line('x', 'y', source=source2, line_width=3, line_alpha=0.6)

select = Select(title="Option:", options=["source1", "source2"])

select.callback = CustomJS(args=dict(source1=source1, source2=source2, select=select), code="""

        console.log(select.attributes.value);
    """)



show(vform(fig, select))

Maybe you can "tweak" the data in the CustomJS making it all 0 depending on what is selected, or maybe if you can access the line_width property and make it 0, but that's pretty much all I can think of.

euri10
  • 2,446
  • 3
  • 24
  • 46
  • Sorry for the downvote, the new answer re `0.12.1` reflects the most current information / new features to make this much simpler. – bigreddot Aug 11 '16 at 17:13