Grid visible & js_link

Hi everyone,

First of all, thanks for being a great community and helping me with previous questions!

My question is the following:

I have got a an application I am deploying as HTML standalone. I would like to give users the option to show and hide the following properties: the grid of the graph, ticks, labels. So I tried to make CustomJS callbacks an js_link(s) “visible” property to the respective properties similar to “visible” of lines. I have an example of the code below:

import bokeh
from bokeh.plotting import figure, output_file
from bokeh.models.glyphs import Line
from bokeh.io import show
from bokeh.models.widgets import Toggle
from bokeh.layouts import Column
output_file('test.html', title='JS_LINK_QUESTION')

plot_fig.xgrid.visible=False
plot_fig=figure()
plot_line=plot_fig.line([1,2,3,4,5],[1,4,9,16,25])

line_toggle=Toggle(label='Show line', active=True)
line_toggle.js_link('active', plot_line,'visible')
grid_toggle=Toggle(label='Show grid', active=True)
# grid_toggle.js_link('active', plot_fig.ygrid,'visible')
layout=Column(line_toggle, grid_toggle,plot_fig)
show(layout)

I am a bit puzzled why it does not work. Many thanks for your help in advance! Is there any way to do it?

Best wishes,
Daniel

EDIT: The commented line is the one which gave me trouble and an error like (which I do not really know what to do about):

~/anaconda3/lib/python3.6/site-packages/bokeh/model.py in js_link(self, attr, other, other_attr)
    507 
    508         if not isinstance(other, Model):
--> 509             raise ValueError("'other' is not a Bokeh model: %r" % other)
    510 
    511         if other_attr not in other.properties():

ValueError: 'other' is not a Bokeh model: [Grid(id='1621', ...)]

Thinking about it a bit more, I guess my understanding of models is not 100% clear. I am a bit confused, why it seems to be possible to access x_range according to the documentation but I have my trouble with grid visibility.

That’s because x_range is the default range, a single instance of Model. Whereas xgrid is a splattable list of instances of Model. Unless you dynamically add grids, you can just iterate over the list and link each item in there.

@p-himik Perfect, works great!

EDIT: And many thanks :slight_smile: