Bokeh Plot with multiple slider - Issue

hkbokeh · December 1, 2015, 9:35pm

I have a Bokeh plot with 3 sliders. I am able to change the sliders value and modify my plot. The problem is with the “value” of sliders. Two of the slider’s values are dependent on each other and by changing one the other one does not change or update. And there is no way to pass the source to slider to update its value. To clarify better, assume we have a line going from (x = 0, y = 10) to (x = 10, y = 10) and the second line going from (x = 10, y = 10) to (x = 20, y = 5), and the third line goes from (x = 20, y = 5) to (x = 30, y = 5). My second slider change the length of second piece, and the third slider change the length of third piece. changing slider values will change the lines in such away I would like but does not change the value of the other slider correctly. Find below a section of my code for sliders. Thanks a lot for your valuable product.

sourceupper = ColumnDataSource(data=dict(x=xsource, y=ysourceupper))
p.line(‘x’, ‘y’, source = sourceupper, line_color = “navy”, line_width = 4)

callback1 = CustomJS(args=dict(source=sourceupper), code="""

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

y[0] = f *10;

y[1] = f *10;

source.trigger(‘change’);

“”")

callback2 = CustomJS(args=dict(source=sourceupper), code="""

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[1] = f

source.trigger(‘change’);

“”")

callback3 = CustomJS(args=dict(source=sourceupper), code="""

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[2] = parseInt(f) + 10

console.log(x[2])

source.trigger(‘change’);

“”")

p.background_fill= “#cccccc”

p.grid.grid_line_color=“white”

slider1 = Slider(start=0, end = 100, value = ysourceupper[1] / bthrs, step = 0.5, title = “Magnitude”, callback = callback1)

slider2 = Slider(start=0, end = tend * 60, value = xsource[1] , step = 0.5, title = “Hold Time (secs)”, callback = callback2)

slider3 = Slider(start=0, end = tend * 60, value = xsource[2] - sol[0], step = 1, title = “Decay Time (secs)”, callback = callback3)

Sarah_Bird3 · December 1, 2015, 11:16pm

It may be possible to update slider values using bokeh server. bokeh server just went through a major overhaul and is in the process of being
re-documented…

···

On 12/1/15 1:35 PM, hkbokeh wrote:

    I have a Bokeh plot with 3 sliders.  I am able to
change the sliders value and modify my plot. The problem is
with the “value” of sliders. Two of the slider’s values are
dependent on each other and by changing one the other one does
not change or update. And there is no way to pass the source to
slider to update its value. To clarify better, assume we have a
line going from (x = 0, y = 10) to (x = 10, y = 10) and the
second line going from (x = 10, y = 10) to (x = 20, y = 5), and
the third line goes from (x = 20, y = 5) to (x = 30, y = 5). My
second slider change the length of second piece, and the third
slider change the length of third piece. changing slider values
will change the lines in such away I would like but does not
change the value of the other slider correctly. Find below a
section of my code for sliders. Thanks a lot for your valuable
product.

      sourceupper = ColumnDataSource(data=dict(x=xsource,
y=ysourceupper))
p.line(‘x’, ‘y’, source = sourceupper, line_color =
“navy”, line_width = 4)

        callback1 = CustomJS(args=dict(source=sourceupper),

code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

y[0] = f *10;

y[1] = f *10;

source.trigger(‘change’);

“”")

        callback2 =
CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[1] = f

source.trigger(‘change’);

“”")

        callback3 =
CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[2] = parseInt(f) + 10

console.log(x[2])

source.trigger(‘change’);

“”")

p.background_fill= “#cccccc”

p.grid.grid_line_color=“white”

        slider1 = Slider(start=0, end = 100, value =
ysourceupper[1] / bthrs, step = 0.5, title = “Magnitude”,
callback = callback1)

        slider2 = Slider(start=0, end = tend * 60, value
= xsource[1] , step = 0.5, title = “Hold Time (secs)”,
callback = callback2)

        slider3 = Slider(start=0, end = tend * 60, value
= xsource[2] - sol[0], step = 1, title = “Decay Time
(secs)”, callback = callback3)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io?utm_medium=email&utm_source=footer)      .

For more options, visit .

https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io
https://groups.google.com/a/continuum.io/d/optout

Havoc_Pennington · December 3, 2015, 8:46pm

Hi,

I may not understand the question properly, but I’ll try.

The straightforward but a little clunky solution I would think is to pass the sliders in to each callback (in the args dict) and update the other two sliders when one slider changes - you would have to set callback after creating the sliders I guess, so create the sliders and then create callbacks and then do slider1.callback = callback1 etc.

A possibly-better solution is to use the Backbone.Model API to listen to ‘change’ on the source and update the sliders. But this requires generating your own chunk of JavaScript outside of the callback mechanism so it gets a little annoying and I’m not even sure of the best way.

With the 0.11dev Bokeh server, you can use server-side callbacks instead of CustomJS, those callbacks would look something like:

def data_changed(attr, old, new):

update sliders here

slider1.value = # whatever

source.on_change(‘data’, data_changed)

def slider1_changed(attr, old, new):

source.data = # set new data or modify data

slider1.on_change(‘value’, slider1_changed)

However the disadvantage of this server-side approach is that data has to get shipped back to the client each time it changes, so if it’s large that’s an issue.

Havoc

···

On Tue, Dec 1, 2015 at 4:35 PM, hkbokeh [email protected] wrote:

I have a Bokeh plot with 3 sliders. I am able to change the sliders value and modify my plot. The problem is with the “value” of sliders. Two of the slider’s values are dependent on each other and by changing one the other one does not change or update. And there is no way to pass the source to slider to update its value. To clarify better, assume we have a line going from (x = 0, y = 10) to (x = 10, y = 10) and the second line going from (x = 10, y = 10) to (x = 20, y = 5), and the third line goes from (x = 20, y = 5) to (x = 30, y = 5). My second slider change the length of second piece, and the third slider change the length of third piece. changing slider values will change the lines in such away I would like but does not change the value of the other slider correctly. Find below a section of my code for sliders. Thanks a lot for your valuable product.

sourceupper = ColumnDataSource(data=dict(x=xsource, y=ysourceupper))
p.line(‘x’, ‘y’, source = sourceupper, line_color = “navy”, line_width = 4)

callback1 = CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

y[0] = f *10;

y[1] = f *10;

source.trigger(‘change’);

“”")

callback2 = CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[1] = f

source.trigger(‘change’);

“”")

callback3 = CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[2] = parseInt(f) + 10

console.log(x[2])

source.trigger(‘change’);

“”")

p.background_fill= “#cccccc”

p.grid.grid_line_color=“white”

slider1 = Slider(start=0, end = 100, value = ysourceupper[1] / bthrs, step = 0.5, title = “Magnitude”, callback = callback1)

slider2 = Slider(start=0, end = tend * 60, value = xsource[1] , step = 0.5, title = “Hold Time (secs)”, callback = callback2)

slider3 = Slider(start=0, end = tend * 60, value = xsource[2] - sol[0], step = 1, title = “Decay Time (secs)”, callback = callback3)

–

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Havoc Pennington

Senior Software Architect

yhdanid · December 4, 2015, 9:04am

I am also new to bokeh. I browsed the gallery and watched a few videos a long time ago, but I only started to view the code and try something today.

I started with the slide controlled bubble chart. I wondered if it was possible to automate the slider movement programmatically and hence have the bubble chart update as a response to that change, resulting in an animated chart like those I like of d3.js.

Long story short, I hate javascript! I managed to get the slider to change its value (via its style attribute of all places) and managed to get the slider handle to move to the new value position after firing the change event. All this was done through jQuery, and only on the rendered HTML file to make things simple with a few parts to go wrong. Having done that, I was disappointed to see that neither the text nor the bubbles-- which are normally drawn on the canvas as a response to a user initiated change of the slider-- changed or moved.

I suppose I need to read the new value of the slider (in the year format as opposed to a percentage value as is specified in the style), then assign data of that year to the renderer_source, and text_source via the set method. And then finally fire their change events, or something.

Can this be done? With/without jQuery? Any pointers that can help would be appreciated.

Thanks

···

On Tuesday, December 1, 2015 at 11:16:45 PM UTC, Sarah Bird wrote:

It may be possible to update slider values using bokeh server. bokeh server just went through a major overhaul and is in the process of being
re-documented…

On 12/1/15 1:35 PM, hkbokeh wrote:

    I have a Bokeh plot with 3 sliders.  I am able to
change the sliders value and modify my plot. The problem is
with the “value” of sliders. Two of the slider’s values are
dependent on each other and by changing one the other one does
not change or update. And there is no way to pass the source to
slider to update its value. To clarify better, assume we have a
line going from (x = 0, y = 10) to (x = 10, y = 10) and the
second line going from (x = 10, y = 10) to (x = 20, y = 5), and
the third line goes from (x = 20, y = 5) to (x = 30, y = 5). My
second slider change the length of second piece, and the third
slider change the length of third piece. changing slider values
will change the lines in such away I would like but does not
change the value of the other slider correctly. Find below a
section of my code for sliders. Thanks a lot for your valuable
product.

            p.line('x', 'y', source = sourceupper, line_color =

“navy”, line_width = 4)

sourceupper = ColumnDataSource(data=dict(x= xsource,
y=ysourceupper))

callback1 = CustomJS(args=dict(source= sourceupper),
code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

y[0] = f *10;

y[1] = f *10;

source.trigger(‘change’);

“”")

        callback2 =
CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[1] = f

source.trigger(‘change’);

“”")

        callback3 =
CustomJS(args=dict(source=sourceupper), code=“”"

var data = source.get(‘data’);

var f = cb_obj.get(‘value’);

x = data[‘x’];

y = data[‘y’];

x[2] = parseInt(f) + 10

console.log(x[2])

source.trigger(‘change’);

“”")

p.background_fill= “#cccccc”

p.grid.grid_line_color=“white”

        slider1 = Slider(start=0, end = 100, value =
ysourceupper[1] / bthrs, step = 0.5, title = “Magnitude”,
callback = callback1)

        slider2 = Slider(start=0, end = tend * 60, value
= xsource[1] , step = 0.5, title = “Hold Time (secs)”,
callback = callback2)

        slider3 = Slider(start=0, end = tend * 60, value
= xsource[2] - sol[0], step = 1, title = “Decay Time
(secs)”, callback = callback3)

–

  You received this message because you are subscribed to the Google

Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this group and stop receiving emails from it,

send an email to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io?utm_medium=email&utm_source=footer)[https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/fb35ac29-38af-409f-a743-a6fb194fc255%40continuum.io).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).