Multiple different bokeh documents in a webpage

Adam_Hubbell · July 2, 2016, 12:08am

I’d like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

Bryan · July 2, 2016, 5:23pm

Standalone (non-server) documents? I don't see why calling bokeh.embed.components separately on all the things you want to embed would not work.

http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components

Thanks,

Bryan

···

On Jul 1, 2016, at 7:08 PM, [email protected] wrote:

I'd like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

--
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/ecc9afde-f12f-4806-827c-d4cc85715bea%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Adam_Hubbell · July 3, 2016, 6:15pm

sorry for the lack of specificity, these would be server documents

···

On Saturday, July 2, 2016 at 12:23:07 PM UTC-5, Bryan Van de ven wrote:

Standalone (non-server) documents? I don’t see why calling bokeh.embed.components separately on all the things you want to embed would not work.
    [http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components)
Thanks,

Bryan

On Jul 1, 2016, at 7:08 PM, [email protected] wrote:

I’d like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

–
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/ecc9afde-f12f-4806-827c-d4cc85715bea%40continuum.io.

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

Noah_Daniel_Stein · August 1, 2017, 3:22pm

Hi all,

I’m also wondering if there is a way to do this. Or perhaps there’s another way to accomplish my end goal. I have a widgetbox on the left hand side of the screen to control a bunch of plots on the right, and I would like to increase the number of plots on the right beyond the amount you can see on the screen at one time. This adds a scrollbar, which is what I’m looking for, but if you scroll down to see more plots, the widgets scroll away. So you can’t look at the lower plots and control them at the same time. Is there a good way to do this? I was thinking of something with HTML frames or a DIV block with style=“overflow:auto” or something like that, but I would need to be able to get different bokeh layout objects into different parts of the HTML document. I can’t seem to find a way to do this with Jinja2 templates, etc.

-Noah

···

On Sunday, July 3, 2016 at 2:15:09 PM UTC-4, Adam Hubbell wrote:

sorry for the lack of specificity, these would be server documents

On Saturday, July 2, 2016 at 12:23:07 PM UTC-5, Bryan Van de ven wrote:
Standalone (non-server) documents? I don’t see why calling bokeh.embed.components separately on all the things you want to embed would not work.
    [http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components)
Thanks,

Bryan

On Jul 1, 2016, at 7:08 PM, [email protected] wrote:

I’d like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

–
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/ecc9afde-f12f-4806-827c-d4cc85715bea%40continuum.io.

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

p-himik · August 1, 2017, 6:04pm

Hi Noah,

As far as I can see, Bokeh already makes it possible to embed different elements from the same Bokeh document anywhere on the page you want. But it requires a significant amount of user code, and I am yet to experiment with it.

Two documents - one for widgets, one for plots, - is a sensible approach, but it requires you to sync data between the two documents manually.

I have already used it (I have a bunch of plots on the main web page and a separate plot in a modal dialog) - you have to create two applications with different URI and load Bokeh’s autoload.js two times with this URIs. You can use the same session ID - it doesn’t matter.

After that, you’ll have your two separate documents and two tags that you can embed wherever you want.

But in your particular case, especially if you use fixed sized plots, there may be a more sensible approach that doesn’t require manual document synchronization and multiple Bokeh apps.

You can create a single document with a single row, widgets on the left and a single column with the plots on the right - you need the column to create a

wrapper around all plots.

In the CSS of your website, you can limit the height of this column (you definitely can assign CSS classes from Bokeh. Maybe element names are also propagated - I’m not sure) and add an overflow to it.

Hope it helps,

Eugene

···

On Tuesday, August 1, 2017 at 10:24:35 PM UTC+7, nst…@mit.edu wrote:

Hi all,

I’m also wondering if there is a way to do this. Or perhaps there’s another way to accomplish my end goal. I have a widgetbox on the left hand side of the screen to control a bunch of plots on the right, and I would like to increase the number of plots on the right beyond the amount you can see on the screen at one time. This adds a scrollbar, which is what I’m looking for, but if you scroll down to see more plots, the widgets scroll away. So you can’t look at the lower plots and control them at the same time. Is there a good way to do this? I was thinking of something with HTML frames or a DIV block with style=“overflow:auto” or something like that, but I would need to be able to get different bokeh layout objects into different parts of the HTML document. I can’t seem to find a way to do this with Jinja2 templates, etc.

-Noah

On Sunday, July 3, 2016 at 2:15:09 PM UTC-4, Adam Hubbell wrote:
sorry for the lack of specificity, these would be server documents

On Saturday, July 2, 2016 at 12:23:07 PM UTC-5, Bryan Van de ven wrote:
Standalone (non-server) documents? I don’t see why calling bokeh.embed.components separately on all the things you want to embed would not work.
    [http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components)
Thanks,

Bryan

On Jul 1, 2016, at 7:08 PM, [email protected] wrote:

I’d like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

–
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/ecc9afde-f12f-4806-827c-d4cc85715bea%40continuum.io.

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

Noah_Daniel_Stein · August 2, 2017, 4:12pm

Hi Eugene,

Thanks! I got this working with the CSS approach you suggested. In case anyone stumbles on this in the future, here are the details. I enclosed the contents that I wanted to be able to scroll as follows, where 600 was the height that I wanted and 1050 was wide enough to contain everything including the scrollbar, which bokeh didn’t know to add space for automatically.

column(YOUR_CONTENTS_HERE, sizing_mode=‘fixed’, height=600, width=1050, css_classes=[‘scrollable’])

``

Then I changed my templates/index.html to add a block at the top and a style line to the content div farther down.

div.scrollable { overflow: auto; }

``

There may be a cleaner way to do these things, but all of these changes seemed to be necessary to get it to look right.

-Noah

···

On Tuesday, August 1, 2017 at 2:04:55 PM UTC-4, Eugene Pakhomov wrote:

Hi Noah,

As far as I can see, Bokeh already makes it possible to embed different elements from the same Bokeh document anywhere on the page you want. But it requires a significant amount of user code, and I am yet to experiment with it.

Two documents - one for widgets, one for plots, - is a sensible approach, but it requires you to sync data between the two documents manually.

I have already used it (I have a bunch of plots on the main web page and a separate plot in a modal dialog) - you have to create two applications with different URI and load Bokeh’s autoload.js two times with this URIs. You can use the same session ID - it doesn’t matter.

After that, you’ll have your two separate documents and two tags that you can embed wherever you want.

But in your particular case, especially if you use fixed sized plots, there may be a more sensible approach that doesn’t require manual document synchronization and multiple Bokeh apps.

You can create a single document with a single row, widgets on the left and a single column with the plots on the right - you need the column to create a
wrapper around all plots.

In the CSS of your website, you can limit the height of this column (you definitely can assign CSS classes from Bokeh. Maybe element names are also propagated - I’m not sure) and add an overflow to it.

Hope it helps,

Eugene

On Tuesday, August 1, 2017 at 10:24:35 PM UTC+7, nst…@mit.edu wrote:

Hi all,

I’m also wondering if there is a way to do this. Or perhaps there’s another way to accomplish my end goal. I have a widgetbox on the left hand side of the screen to control a bunch of plots on the right, and I would like to increase the number of plots on the right beyond the amount you can see on the screen at one time. This adds a scrollbar, which is what I’m looking for, but if you scroll down to see more plots, the widgets scroll away. So you can’t look at the lower plots and control them at the same time. Is there a good way to do this? I was thinking of something with HTML frames or a DIV block with style=“overflow:auto” or something like that, but I would need to be able to get different bokeh layout objects into different parts of the HTML document. I can’t seem to find a way to do this with Jinja2 templates, etc.

-Noah

On Sunday, July 3, 2016 at 2:15:09 PM UTC-4, Adam Hubbell wrote:
sorry for the lack of specificity, these would be server documents

On Saturday, July 2, 2016 at 12:23:07 PM UTC-5, Bryan Van de ven wrote:
Standalone (non-server) documents? I don’t see why calling bokeh.embed.components separately on all the things you want to embed would not work.
    [http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components)
Thanks,

Bryan

On Jul 1, 2016, at 7:08 PM, [email protected] wrote:

I’d like to be able to insert multiple different bokeh documents into my jinja2 template, is there a way to do this?

–
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/ecc9afde-f12f-4806-827c-d4cc85715bea%40continuum.io.

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

Joris_Nettelstroth · November 21, 2017, 9:51am

(Eugene, thanks for redirecting me here)

Hi Noah,

I am interested in your solution, but can’t quite make it work in my case (widgets in a top row, a grid of lots of figures below - the grid is supposed to become scrollable. Plus this is only one of several tabs).

I tried to create a minimal working example from the official “sliders” example, since it seems very similar to your original problem.

I used your templates/index.html and the following version of “sliders.py”, with only a few changes:

Make the single plot figure 800x800, so that it can be cut off
put that plot in a column like you described
Add that column to the root, instead of the plot itself

The resulting figure is cut off properly, but no scroll bar appears. I am on Bokeh 0.12.10.

Do you (or anyone else) have an idea what I’m missing?

Regards

‘’’ Present an interactive function explorer with slider widgets.

Scrub the sliders to change the properties of the sin curve, or
type into the title text box to update the title of the plot.

Use the bokeh serve command to run the example by executing:

bokeh serve sliders.py

at your command prompt. Then navigate to the URL

http://localhost:5006/sliders

in your browser.

‘’’
import numpy as np

from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox, column
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import figure

Set up data

N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

Set up plot

plot = figure(plot_height=800, plot_width=800, title=“my sine wave”,
tools=“crosshair,pan,reset,save,wheel_zoom”,
x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line(‘x’, ‘y’, source=source, line_width=3, line_alpha=0.6)

Set up widgets

text = TextInput(title=“title”, value=‘my sine wave’)
offset = Slider(title=“offset”, value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title=“amplitude”, value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title=“phase”, value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title=“frequency”, value=1.0, start=0.1, end=5.1, step=0.1)

Set up callbacks

def update_title(attrname, old, new):
plot.title.text = text.value

text.on_change(‘value’, update_title)

def update_data(attrname, old, new):

# Get the current slider values
a = amplitude.value
b = offset.value
w = phase.value
k = freq.value

# Generate the new curve
x = np.linspace(0, 4*np.pi, N)
y = a*np.sin(k*x + w) + b

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

for w in [offset, amplitude, phase, freq]:
w.on_change(‘value’, update_data)

(Try to) make the column scrollable

plot_col = column(plot, sizing_mode=‘fixed’, height=600, width=1050, css_classes=[‘scrollable’])

Set up layouts and add to document

inputs = widgetbox(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot_col))
curdoc().title = “Sliders”

``

Noah_Daniel_Stein · November 22, 2017, 2:11am

Hi Joris,

I’ve changed jobs since I was working on this codebase, so I no longer have access to it to refer to. I tried so many things at that point that I can’t remember anything more than what I wrote in this post. Sorry and good luck!

-Noah

···

On Nov 21, 2017, at 4:51 AM, Joris Nettelstroth [email protected] wrote:

(Eugene, thanks for redirecting me here)

Hi Noah,

I am interested in your solution, but can’t quite make it work in my case (widgets in a top row, a grid of lots of figures below - the grid is supposed to become scrollable. Plus this is only one of several tabs).

I tried to create a minimal working example from the official “sliders” example, since it seems very similar to your original problem.

I used your templates/index.html and the following version of “sliders.py”, with only a few changes:

Make the single plot figure 800x800, so that it can be cut off

put that plot in a column like you described

Add that column to the root, instead of the plot itself

The resulting figure is cut off properly, but no scroll bar appears. I am on Bokeh 0.12.10.

Do you (or anyone else) have an idea what I’m missing?

Regards

‘’’ Present an interactive function explorer with slider widgets.

Scrub the sliders to change the properties of the sin curve, or

type into the title text box to update the title of the plot.

Use the bokeh serve command to run the example by executing:

bokeh serve sliders.py

at your command prompt. Then navigate to the URL

http://localhost:5006/sliders

in your browser.

‘’’

import numpy as np

from
bokeh.io import curdoc

from bokeh.layouts import row, widgetbox, column

from bokeh.models import ColumnDataSource

from bokeh.models.widgets import Slider, TextInput

from bokeh.plotting import figure

Set up data

N = 200

x = np.linspace(0, 4*np.pi, N)

y = np.sin(x)

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

Set up plot

plot = figure(plot_height=800, plot_width=800, title=“my sine wave”,
          tools="crosshair,pan,reset,save,wheel_zoom",

          x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line(‘x’, ‘y’, source=source, line_width=3, line_alpha=0.6)

Set up widgets

text = TextInput(title=“title”, value=‘my sine wave’)

offset = Slider(title=“offset”, value=0.0, start=-5.0, end=5.0, step=0.1)

amplitude = Slider(title=“amplitude”, value=1.0, start=-5.0, end=5.0, step=0.1)

phase = Slider(title=“phase”, value=0.0, start=0.0, end=2*np.pi)

freq = Slider(title=“frequency”, value=1.0, start=0.1, end=5.1, step=0.1)

Set up callbacks

def update_title(attrname, old, new):
plot.title.text = text.value

text.on_change(‘value’, update_title)

def update_data(attrname, old, new):

# Get the current slider values

a = amplitude.value

b = offset.value

w = phase.value

k = freq.value

# Generate the new curve

x = np.linspace(0, 4*np.pi, N)

y = a*np.sin(k*x + w) + b

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

for w in [offset, amplitude, phase, freq]:
w.on_change('value', update_data)

(Try to) make the column scrollable

plot_col = column(plot, sizing_mode=‘fixed’, height=600, width=1050, css_classes=[‘scrollable’])

Set up layouts and add to document

inputs = widgetbox(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot_col))

curdoc().title = “Sliders”

``

–

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

To unsubscribe from this topic, visit
https://groups.google.com/a/continuum.io/d/topic/bokeh/4IfHxkYweV4/unsubscribe.

To unsubscribe from this group and all its topics, 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/8e18f34e-3322-46d2-ba15-f0b35dd6b5fa%40continuum.io.

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

Joris_Nettelstroth · December 13, 2017, 1:05pm

As a follow-up, I just wanted to leave a note that I finally got the scrollable columns working.

The example I posted before did actually work at some point (just like Noah described it). I don’t know what the difference was… maybe it was because I tried to make a gridplot scrollable. This does not work - it has to be a column.

I created a complete working example for everyone who is interested:

https://gist.github.com/AzraelDD/7a02d739d95b043c34bc43912d9b9c3f

Is it worth adding this to the official examples?

Regards

···

Am Mittwoch, 22. November 2017 03:12:04 UTC+1 schrieb Noah Daniel Stein:

Hi Joris,

I’ve changed jobs since I was working on this codebase, so I no longer have access to it to refer to. I tried so many things at that point that I can’t remember anything more than what I wrote in this post. Sorry and good luck!

-Noah

On Nov 21, 2017, at 4:51 AM, Joris Nettelstroth [email protected] wrote:

(Eugene, thanks for redirecting me here)

Hi Noah,

I am interested in your solution, but can’t quite make it work in my case (widgets in a top row, a grid of lots of figures below - the grid is supposed to become scrollable. Plus this is only one of several tabs).

I tried to create a minimal working example from the official “sliders” example, since it seems very similar to your original problem.

I used your templates/index.html and the following version of “sliders.py”, with only a few changes:

Make the single plot figure 800x800, so that it can be cut off

put that plot in a column like you described

Add that column to the root, instead of the plot itself

The resulting figure is cut off properly, but no scroll bar appears. I am on Bokeh 0.12.10.

Do you (or anyone else) have an idea what I’m missing?

Regards

‘’’ Present an interactive function explorer with slider widgets.

Scrub the sliders to change the properties of the sin curve, or

type into the title text box to update the title of the plot.

Use the bokeh serve command to run the example by executing:

bokeh serve sliders.py

at your command prompt. Then navigate to the URL

http://localhost:5006/sliders

in your browser.

‘’’

import numpy as np

from
bokeh.io import curdoc

from bokeh.layouts import row, widgetbox, column

from bokeh.models import ColumnDataSource

from bokeh.models.widgets import Slider, TextInput

from bokeh.plotting import figure

Set up data

N = 200

x = np.linspace(0, 4*np.pi, N)

y = np.sin(x)

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

Set up plot

plot = figure(plot_height=800, plot_width=800, title=“my sine wave”,
          tools="crosshair,pan,reset,save,wheel_zoom",

          x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line(‘x’, ‘y’, source=source, line_width=3, line_alpha=0.6)

Set up widgets

text = TextInput(title=“title”, value=‘my sine wave’)

offset = Slider(title=“offset”, value=0.0, start=-5.0, end=5.0, step=0.1)

amplitude = Slider(title=“amplitude”, value=1.0, start=-5.0, end=5.0, step=0.1)

phase = Slider(title=“phase”, value=0.0, start=0.0, end=2*np.pi)

freq = Slider(title=“frequency”, value=1.0, start=0.1, end=5.1, step=0.1)

Set up callbacks

def update_title(attrname, old, new):
plot.title.text = text.value

text.on_change(‘value’, update_title)

def update_data(attrname, old, new):

# Get the current slider values

a = amplitude.value

b = offset.value

w = phase.value

k = freq.value

# Generate the new curve

x = np.linspace(0, 4*np.pi, N)

y = a*np.sin(k*x + w) + b

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

for w in [offset, amplitude, phase, freq]:
w.on_change('value', update_data)

(Try to) make the column scrollable

plot_col = column(plot, sizing_mode=‘fixed’, height=600, width=1050, css_classes=[‘scrollable’])

Set up layouts and add to document

inputs = widgetbox(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot_col))

curdoc().title = “Sliders”

``

–

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

To unsubscribe from this topic, visit
https://groups.google.com/a/continuum.io/d/topic/bokeh/4IfHxkYweV4/unsubscribe.

To unsubscribe from this group and all its topics, 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/8e18f34e-3322-46d2-ba15-f0b35dd6b5fa%40continuum.io.

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

Bryan · December 14, 2017, 6:09pm

Hi,

I'm not sure about adding it to examples/app, but this seems like it might be useful information to put into the User's guide section on layouts, and also linked from the reference guide entry for css_classes. Especially if a standalone (non-server) version can be made? Then we could include the example directly in the User's Guide itself. I'd suggest a GH issue to discuss further if you are interested in pursing this.

Thanks,

Bryan

···

On Dec 13, 2017, at 07:05, Joris Nettelstroth <[email protected]> wrote:

As a follow-up, I just wanted to leave a note that I finally got the scrollable columns working.
The example I posted before did actually work at some point (just like Noah described it). I don't know what the difference was... maybe it was because I tried to make a gridplot scrollable. This does not work - it has to be a column.

I created a complete working example for everyone who is interested:
https://gist.github.com/AzraelDD/7a02d739d95b043c34bc43912d9b9c3f

Is it worth adding this to the official examples?

Regards

Am Mittwoch, 22. November 2017 03:12:04 UTC+1 schrieb Noah Daniel Stein:
Hi Joris,

I’ve changed jobs since I was working on this codebase, so I no longer have access to it to refer to. I tried so many things at that point that I can’t remember anything more than what I wrote in this post. Sorry and good luck!

-Noah

On Nov 21, 2017, at 4:51 AM, Joris Nettelstroth <[email protected]> wrote:

(Eugene, thanks for redirecting me here)

Hi Noah,

I am interested in your solution, but can't quite make it work in my case (widgets in a top row, a grid of lots of figures below - the grid is supposed to become scrollable. Plus this is only one of several tabs).
I tried to create a minimal working example from the official "sliders" example, since it seems very similar to your original problem.

I used your templates/index.html and the following version of "sliders.py", with only a few changes:
- Make the single plot figure 800x800, so that it can be cut off
- put that plot in a column like you described
- Add that column to the root, instead of the plot itself

The resulting figure is cut off properly, but no scroll bar appears. I am on Bokeh 0.12.10.
Do you (or anyone else) have an idea what I'm missing?

Regards

''' Present an interactive function explorer with slider widgets.
Scrub the sliders to change the properties of the ``sin`` curve, or
type into the title text box to update the title of the plot.
Use the ``bokeh serve`` command to run the example by executing:
    bokeh serve sliders.py
at your command prompt. Then navigate to the URL
    http://localhost:5006/sliders
in your browser.
'''
import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox, column
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import figure
# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

# Set up plot
plot = figure(plot_height=800, plot_width=800, title="my sine wave",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

# Set up widgets
text = TextInput(title="title", value='my sine wave')
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1, step=0.1)

# Set up callbacks
def update_title(attrname, old, new):
    plot.title.text = text.value

text.on_change('value', update_title)

def update_data(attrname, old, new):
    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value
    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b
    source.data = dict(x=x, y=y)

for w in [offset, amplitude, phase, freq]:
    w.on_change('value', update_data)
# (Try to) make the column scrollable
plot_col = column(plot, sizing_mode='fixed', height=600, width=1050, css_classes=['scrollable'])
# Set up layouts and add to document
inputs = widgetbox(text, offset, amplitude, phase, freq)
curdoc().add_root(row(inputs, plot_col))
curdoc().title = "Sliders"

--
You received this message because you are subscribed to a topic in the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/4IfHxkYweV4/unsubscribe\.
To unsubscribe from this group and all its topics, send an email to bokeh+un...@continuum.io.
To post to this group, send email to bo...@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8e18f34e-3322-46d2-ba15-f0b35dd6b5fa%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/96f187db-892a-42c3-b3d9-6e338eb59985%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Joris_Nettelstroth · December 14, 2017, 8:04pm

I’ve created the issue #7321.

···

Am Donnerstag, 14. Dezember 2017 19:09:12 UTC+1 schrieb Bryan Van de ven:

Hi,

I’m not sure about adding it to examples/app, but this seems like it might be useful information to put into the User’s guide section on layouts, and also linked from the reference guide entry for css_classes. Especially if a standalone (non-server) version can be made? Then we could include the example directly in the User’s Guide itself. I’d suggest a GH issue to discuss further if you are interested in pursing this.

Thanks,

Bryan

On Dec 13, 2017, at 07:05, Joris Nettelstroth [email protected] wrote:

As a follow-up, I just wanted to leave a note that I finally got the scrollable columns working.

The example I posted before did actually work at some point (just like Noah described it). I don’t know what the difference was… maybe it was because I tried to make a gridplot scrollable. This does not work - it has to be a column.

I created a complete working example for everyone who is interested:

https://gist.github.com/AzraelDD/7a02d739d95b043c34bc43912d9b9c3f

Is it worth adding this to the official examples?

Regards

Am Mittwoch, 22. November 2017 03:12:04 UTC+1 schrieb Noah Daniel Stein:

Hi Joris,

I’ve changed jobs since I was working on this codebase, so I no longer have access to it to refer to. I tried so many things at that point that I can’t remember anything more than what I wrote in this post. Sorry and good luck!

-Noah

On Nov 21, 2017, at 4:51 AM, Joris Nettelstroth [email protected] wrote:

(Eugene, thanks for redirecting me here)

Hi Noah,

I am interested in your solution, but can’t quite make it work in my case (widgets in a top row, a grid of lots of figures below - the grid is supposed to become scrollable. Plus this is only one of several tabs).

I tried to create a minimal working example from the official “sliders” example, since it seems very similar to your original problem.

I used your templates/index.html and the following version of “sliders.py”, with only a few changes:

Make the single plot figure 800x800, so that it can be cut off

put that plot in a column like you described

Add that column to the root, instead of the plot itself

The resulting figure is cut off properly, but no scroll bar appears. I am on Bokeh 0.12.10.

Do you (or anyone else) have an idea what I’m missing?

Regards

‘’’ Present an interactive function explorer with slider widgets.

Scrub the sliders to change the properties of the sin curve, or

type into the title text box to update the title of the plot.

Use the bokeh serve command to run the example by executing:
bokeh serve sliders.py
at your command prompt. Then navigate to the URL
[http://localhost:5006/sliders](http://localhost:5006/sliders)
in your browser.

‘’’

import numpy as np

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox, column

from bokeh.models import ColumnDataSource

from bokeh.models.widgets import Slider, TextInput

from bokeh.plotting import figure

Set up data

N = 200

x = np.linspace(0, 4*np.pi, N)

y = np.sin(x)

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

Set up plot

plot = figure(plot_height=800, plot_width=800, title=“my sine wave”,
          tools="crosshair,pan,reset,save,wheel_zoom",
          x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
plot.line(‘x’, ‘y’, source=source, line_width=3, line_alpha=0.6)

Set up widgets

text = TextInput(title=“title”, value=‘my sine wave’)

offset = Slider(title=“offset”, value=0.0, start=-5.0, end=5.0, step=0.1)

amplitude = Slider(title=“amplitude”, value=1.0, start=-5.0, end=5.0, step=0.1)

phase = Slider(title=“phase”, value=0.0, start=0.0, end=2*np.pi)

freq = Slider(title=“frequency”, value=1.0, start=0.1, end=5.1, step=0.1)

Set up callbacks

def update_title(attrname, old, new):
plot.title.text = text.value
text.on_change(‘value’, update_title)

def update_data(attrname, old, new):
# Get the current slider values
a = amplitude.value
b = offset.value
w = phase.value
k = freq.value
# Generate the new curve
x = np.linspace(0, 4*np.pi, N)
y = a*np.sin(k*x + w) + b
source.data = dict(x=x, y=y)
for w in [offset, amplitude, phase, freq]:
w.on_change('value', update_data)
(Try to) make the column scrollable

plot_col = column(plot, sizing_mode=‘fixed’, height=600, width=1050, css_classes=[‘scrollable’])

Set up layouts and add to document

inputs = widgetbox(text, offset, amplitude, phase, freq)

curdoc().add_root(row(inputs, plot_col))

curdoc().title = “Sliders”

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/4IfHxkYweV4/unsubscribe.

To unsubscribe from this group and all its topics, 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/8e18f34e-3322-46d2-ba15-f0b35dd6b5fa%40continuum.io.

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

–
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/96f187db-892a-42c3-b3d9-6e338eb59985%40continuum.io.

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