Bokeh - multiple figures on same page - django

Question

I have a need to have 2 bokeh figures on a page. I need them to separate from each other. Currently I can have only one figure (with multiple plots using grid/rows/columns) but not with multiple figures.

Answer 1

See the documentation on how to append figures in rows or columns.
For an example on how to plot figures in the same row see
from bokeh.io import output_file, show
from bokeh.layouts import row
from bokeh.plotting import figure
output_file("layout.html")
x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]
# create a new plot
s1 = figure(plot_width=250, plot_height=250, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)
# create another one
s2 = figure(plot_width=250, plot_height=250, title=None)
s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)
# create and another
s3 = figure(plot_width=250, plot_height=250, title=None)
s3.square(x, y2, size=10, color="olive", alpha=0.5)
# put the results in a row
show(row(s1, s2, s3))
Likewise, you could put the results in a column using
show(column(s1, s2, s3))
Of course, you can combine the two to create a grid, so if you have a list of figures, say graphs, you could do something like
cols = []
row_num = 3
for i in range(0, len(graphs), row_num):
r = row(graphs[i: i + row_num])
cols.append(r)
show(column(cols))

Answer 2

Try having different script and div tag for the plots.
Example using Django:
from django.shortcuts import render_to_response
from bokeh.plotting import figure,output_file,show
from bokeh.embed import components
import random
**Define your View function this way**
def plot(request,*args,**kwargs):
PLOT_OPTIONS = dict(plot_width=800, plot_height=300)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
red = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
red.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
blue = figure(sizing_mode='fixed', tools='pan', **PLOT_OPTIONS)
blue.scatter(data(), data(), color="blue", **SCATTER_OPTIONS)
green = figure(sizing_mode='scale_width', tools='pan', **PLOT_OPTIONS)
green.scatter(data(), data(), color="green", **SCATTER_OPTIONS)
script1, div1 = components(red)
script2, div2 = components(blue)
script3, div3 = components(green)
context = {'script1':script1,'div1':div1,'script2':script2,'div2':div2,'script3':script3,'div3':div3}
return render_to_response('graph.html',context=context)
**Then your Template should look like this:**
first load the dependencies inside the HEAD tag
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
{{ script1 | safe }}
{{ script2 | safe }}
{{ script3 | safe }}
Inside the body or wherever you want to display the plots
<div> {{ div1 | safe }} </div>
<div> {{ div2 | safe }} </div>
<div> {{ div3 | safe }} </div>

Answer 3

from bokeh.plotting import figure
from bokeh.embed import file_html
from bokeh.resources import CDN
x = [1,4,6]
y = [4,6,9]
plot = figure(width=300, height=300)
plot.line(x, y)
html1 = file_html(plot, CDN, 'my plot')
This way you can create multiple plots and insert them using standard jinja2 syntax
Like:
<h1> First plot </h1>
{{ html1 }}
<h1> Second plot </h1>
{{ html2 }}
More information you can find here
Also you can try using Tab Panels