Manually change x range for Bokeh plot

So I’m trying to create a Bokeh plot for which I would like to be able to manually adapt the range of the X-Axis with a slider.

Being a newbie I’ve only managed to get this far and despite researching this subject I haven’t been able to solve this problem.

Here my code:

from bokeh.layouts import column

from bokeh.models import CustomJS, ColumnDataSource, Slider

from bokeh.plotting import Figure, output_file, show

output_file(“test.html”)

x = [x*0.5 for x in range(0, 200)]

y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=600, plot_height=400, x_range=(0, 100))

plot.line(‘x’, ‘y’, source=source, line_width=2, line_alpha=0.75)

callback = CustomJS(args=dict(x_range=plot.x_range), code="""

var start = cb_obj.value

x_range.set({“start”: start, “end”: start+10})

“”")

slider = Slider (start=0, end=90, value=20, step=10)

slider.js_on_change(‘value’, callback)

layout = column(slider, plot)

show(layout)

My biggest problem is to understand how I connect the CustomJS to my plot. I would gladly appreciate your help.

Hi,

You almost got it - just replace “x_range.set” inside the callback code with “x_range.setv”: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/core/has_props.ts#L277

Regards,

Eugene

···

On Tuesday, January 30, 2018 at 4:09:34 AM UTC+7, golanu’ de la mare wrote:

So I’m trying to create a Bokeh plot for which I would like to be able to manually adapt the range of the X-Axis with a slider.

Being a newbie I’ve only managed to get this far and despite researching this subject I haven’t been able to solve this problem.

Here my code:

from bokeh.layouts import column

from bokeh.models import CustomJS, ColumnDataSource, Slider

from bokeh.plotting import Figure, output_file, show

output_file(“test.html”)

x = [x*0.5 for x in range(0, 200)]

y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=600, plot_height=400, x_range=(0, 100))

plot.line(‘x’, ‘y’, source=source, line_width=2, line_alpha=0.75)

callback = CustomJS(args=dict(x_range=plot.x_range), code="""

var start = cb_obj.value

x_range.set({“start”: start, “end”: start+10})

“”")

slider = Slider (start=0, end=90, value=20, step=10)

slider.js_on_change(‘value’, callback)

layout = column(slider, plot)

show(layout)

My biggest problem is to understand how I connect the CustomJS to my plot. I would gladly appreciate your help.

Hi Eugene,

thank your very much for your reply! Greatly appreciate it.

Have a nice day!

···

On Tuesday, January 30, 2018 at 4:47:56 AM UTC+1, Eugene Pakhomov wrote:

Hi,

You almost got it - just replace “x_range.set” inside the callback code with “x_range.setv”: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/core/has_props.ts#L277

Regards,

Eugene

On Tuesday, January 30, 2018 at 4:09:34 AM UTC+7, golanu’ de la mare wrote:

So I’m trying to create a Bokeh plot for which I would like to be able to manually adapt the range of the X-Axis with a slider.

Being a newbie I’ve only managed to get this far and despite researching this subject I haven’t been able to solve this problem.

Here my code:

from bokeh.layouts import column

from bokeh.models import CustomJS, ColumnDataSource, Slider

from bokeh.plotting import Figure, output_file, show

output_file(“test.html”)

x = [x*0.5 for x in range(0, 200)]

y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=600, plot_height=400, x_range=(0, 100))

plot.line(‘x’, ‘y’, source=source, line_width=2, line_alpha=0.75)

callback = CustomJS(args=dict(x_range=plot.x_range), code="""

var start = cb_obj.value

x_range.set({“start”: start, “end”: start+10})

“”")

slider = Slider (start=0, end=90, value=20, step=10)

slider.js_on_change(‘value’, callback)

layout = column(slider, plot)

show(layout)

My biggest problem is to understand how I connect the CustomJS to my plot. I would gladly appreciate your help.