jnettels · July 20, 2018 19:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <style>
            div.scrollable {
                overflow: auto;
            }
        </style>
        <meta charset="utf-8">
        {{ bokeh_css }}
        {{ bokeh_js }}
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
 </html>
diff --git a/main.py b/main.py
 '''
 Modified slider widget example to demonstrate scrollable columns.

 We have a widgetbox with some widgets and a grid with two plots. Both elements
 will be placed in their own scrollable columns. The plots are arranged in a
 grid with a merged toolbar, and we want the toolbar to always stay visible.

 To use this example, create a folder 'scroll_test' with the following structure
 and paste the two files 'main.py' and 'index.html':

 scroll_test
   |
   +---main.py
   +---templates
        +---index.html

 Use the ``bokeh serve`` command for the directory application by executing:
    bokeh serve scroll_test
 at your command prompt. Then navigate to the URL
    http://localhost:5006/scroll_test
 in your browser.

 '''
 import numpy as np
 from bokeh.io import curdoc
 from bokeh.layouts import row, widgetbox, column, gridplot, Spacer
 from bokeh.models import ColumnDataSource
 from bokeh.models.widgets import Slider
 from bokeh.plotting import figure


 def update_data(attrname, old, new):
    '''Update the data source of the plots'''
    # 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
    z = a*np.cos(k*x + w) + b
    source.data = dict(x=x, y=y, z=z)


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

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

 plot2 = figure(plot_height=400, plot_width=400, title="my cosine wave",
               tools="crosshair,pan,reset,save,wheel_zoom",
               x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
 plot2.line('x', 'z', source=source, line_width=3, line_alpha=0.6)

 # Set up the widgets and connect them to the function 'update_data()'
 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)
 inputs = widgetbox(offset, amplitude, phase, freq)

 for w in inputs.children:
    w.on_change('value', update_data)

 '''
 This is the important part of the example!
 We can make the widgetbox scrollable by putting it in a column with an assigned
 css_class. That css class name is used again in the index.html file, where an
 extra style (overflow: auto) is defined.
 We also need to fix the boundaries of this html DIV. The scrollbar appears
 when the contents are too large (i.e. an overflow occurs).
 '''
 col_inputs = column(inputs, sizing_mode='fixed', height=130, width=350,
                    css_classes=['scrollable'])


 # Group the plots in a gridplot with a merged toolbar
 grid = gridplot([[plot1], [plot2]], toolbar_location='left')
 '''
 The plots shall become scrollable as well, but we want the ToolbarBox to stay
 in place.
 The children of 'grid' are the ToolbarBox [0] and a column containing
 all the plots [1]. Columns can become scrollable, so we assign this column
 the same CSS class 'scrollable' we used before.
 '''
 grid.children[1].css_classes = ['scrollable']
 grid.children[1].sizing_mode = 'fixed'
 grid.children[1].height = 400
 grid.children[1].width = 500

 # Set up layouts and add to document
 curdoc().add_root(row(col_inputs, Spacer(width=50), grid))
 curdoc().title = "Scrollable Columns"
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	div.scrollable {
	overflow: auto;
	}
	</style>
	<meta charset="utf-8">
	{{ bokeh_css }}
	{{ bokeh_js }}
	</head>
	<body>
	{{ plot_div\|indent(8) }}
	{{ plot_script\|indent(8) }}
	</body>
	</html>
	'''
	Modified slider widget example to demonstrate scrollable columns.

	We have a widgetbox with some widgets and a grid with two plots. Both elements
	will be placed in their own scrollable columns. The plots are arranged in a
	grid with a merged toolbar, and we want the toolbar to always stay visible.

	To use this example, create a folder 'scroll_test' with the following structure
	and paste the two files 'main.py' and 'index.html':

	scroll_test
	\|
	+---main.py
	+---templates
	+---index.html

	Use the ``bokeh serve`` command for the directory application by executing:
	bokeh serve scroll_test
	at your command prompt. Then navigate to the URL
	http://localhost:5006/scroll_test
	in your browser.

	'''
	import numpy as np
	from bokeh.io import curdoc
	from bokeh.layouts import row, widgetbox, column, gridplot, Spacer
	from bokeh.models import ColumnDataSource
	from bokeh.models.widgets import Slider
	from bokeh.plotting import figure


	def update_data(attrname, old, new):
	'''Update the data source of the plots'''
	# 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 = anp.sin(kx + w) + b
	z = anp.cos(kx + w) + b
	source.data = dict(x=x, y=y, z=z)


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

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

	plot2 = figure(plot_height=400, plot_width=400, title="my cosine wave",
	tools="crosshair,pan,reset,save,wheel_zoom",
	x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])
	plot2.line('x', 'z', source=source, line_width=3, line_alpha=0.6)

	# Set up the widgets and connect them to the function 'update_data()'
	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)
	inputs = widgetbox(offset, amplitude, phase, freq)

	for w in inputs.children:
	w.on_change('value', update_data)

	'''
	This is the important part of the example!
	We can make the widgetbox scrollable by putting it in a column with an assigned
	css_class. That css class name is used again in the index.html file, where an
	extra style (overflow: auto) is defined.
	We also need to fix the boundaries of this html DIV. The scrollbar appears
	when the contents are too large (i.e. an overflow occurs).
	'''
	col_inputs = column(inputs, sizing_mode='fixed', height=130, width=350,
	css_classes=['scrollable'])


	# Group the plots in a gridplot with a merged toolbar
	grid = gridplot([[plot1], [plot2]], toolbar_location='left')
	'''
	The plots shall become scrollable as well, but we want the ToolbarBox to stay
	in place.
	The children of 'grid' are the ToolbarBox [0] and a column containing
	all the plots [1]. Columns can become scrollable, so we assign this column
	the same CSS class 'scrollable' we used before.
	'''
	grid.children[1].css_classes = ['scrollable']
	grid.children[1].sizing_mode = 'fixed'
	grid.children[1].height = 400
	grid.children[1].width = 500

	# Set up layouts and add to document
	curdoc().add_root(row(col_inputs, Spacer(width=50), grid))
	curdoc().title = "Scrollable Columns"