Dynamically link a Span and a Slider in a python bokeh plot
<p>I am trying to create plots in python using bokeh that allow dynamic visualization of data in bins.  It's worth knowing that I am relatively new to python, very new to bokeh, and I know ZERO javascript.  I have consulted this:</p>

<p><a href="http://stackoverflow.com/questions/38032737/link-a-span-or-cursor-in-between-plots-with-bokeh-in-python">Link a Span or Cursor in between plots with Bokeh in Python</a></p>

<p>and this:</p>

<p><a href="http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html" rel="nofollow">http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html</a></p>

<p>but am having trouble implementing the necessary parts of each.  Here is my code prior to adding the requested capabilities:</p>

<pre><code>from bokeh.layouts import column, widgetbox
from bokeh.models.widgets import Slider
from bokeh.models import Span, CustomJS

output_file('Raw_Spectra_and_Spillover_Data.html')

# widgets for bin setup
Pix1_LowLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 129, step = 1, title = 'Pixel-1 - Low Bin - Low Thresh')
Pix1_LowHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 204, step = 1, title = 'Pixel-1 - Low Bin - High Thresh')
Pix1_HighLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 218, step = 1, title = 'Pixel-1 - High Bin - Low Thresh')
Pix1_HighHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 500, step = 1, title = 'Pixel-1 - High Bin - High Thresh')

plot1spect = figure(width=700, height=250, title='pixel-1 Spectrum')
plot1spect.line(self.SpectDACvals1[0], self.SpectrumData1[0], line_width=2)
plot1spect_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
plot1spect_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
plot1spect_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
plot1spect_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
plot1spect.renderers.extend([plot1spect_LowLowSpan, plot1spect_LowHighSpan, plot1spect_HighLowSpan, plot1spect_HighHighSpan])

plot1spill = figure(width=700, height=250, title='pixel-1 Spillover')
plot1spill.line(self.SpillDACvals1[0], self.SpillData1[0], line_width=2)
plot1spill_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height')
plot1spill_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height')
plot1spill_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height')
plot1spill_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height')
plot1spill.renderers.extend([plot1spill_LowLowSpan, plot1spill_LowHighSpan, plot1spill_HighLowSpan, plot1spill_HighHighSpan])

show(row(plot1spect,plot1spill, widgetbox(Pix1_LowLow, Pix1_LowHigh, Pix1_HighLow, Pix1_HighHigh)))
</code></pre>

<p>This code gives me this:</p>

<p><img src="http://i.stack.imgur.com/dGEbT.png" alt="Bokeh plot of code above."></p>

<p>If someone can show me how get <code>Pix1_LowLow</code> slider to dynamically control the location of <code>plot1spect_LowLowSpan</code>, then I can extend the technique to the other sliders and spans.  Many thanks in advance!</p>

<p>python 3.5.2 - bokeh 12.0</p>

<p>Here is a minimal complete example. Note that the recommended way to add annotations like <code>Span</code> is with <code>plot.add_layout</code> as shown below:</p>

<pre><code>from bokeh.layouts import row, widgetbox
from bokeh.models import Slider, Span, CustomJS
from bokeh.plotting import figure, output_file, show

slider = Slider(start=0, end=10, value=3, step=0.1, title='Slider')

plot = figure(width=700, height=250, x_range=(0,10), y_range=(-1, 1))
span = Span(location=slider.value, dimension='height')
plot.add_layout(span)

slider.callback = CustomJS(args=dict(span=span, slider=slider), code="""
    span.location = slider.value
""")

output_file('span_slider.html')

show(row(plot, widgetbox(slider)))
</code></pre>

python bokeh