I am trying to use a button to toggle whether or not a series of plots have their x axes linked. I’m hoping to do this entirely on the client side without having to bother the server. The method that I’m trying to use (and maybe this is totally wrong) is to create a new Range1d model and reassign all of the x_range properties of the Figure models to this new Range1d model. The customJS that I am using to do this is here:
CustomJS(args=dict(source=link_source),code=''' const Range1d = Bokeh.Models("Range1d"); var doc = Bokeh.documents[0]; if (cb_obj.active.length>0){ //button has been checked var linked_rng = new Range1d({start:0, end:1000}); for (i = 0; i < source.data['plotids'].length; i++){ doc.get_model_by_id(source.data['plotids'][i]).x_range = linked_rng; } } else { for (i = 0; i < source.data['plotids'].length; i++){ doc.get_model_by_id(source.data['plotids'][i]).x_range = new Range1d({start:0, end:1000}); } } ''')
As far as I can tell this is working perfectly as far as the Javascript is concerned but this is not reflected in the HTML document. For example, if I set plot1.x_range.start = 1 then plot2.x_range.start will return 1. But the start of the actual plot being displayed will not change and the plots will not behave as if they are linked.
It seems like reassigning the x_range property of the Figure models to a new Range1d model breaks the linkage between javascript and the HTML.
Does anyone know how I can fix my current approach of if there is a better way to do this?