jnettels/index.html

## 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>

## 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"