CODEWITHSUNDEEP
djangobokeh
Taposh DuttaRoy
Taposh DuttaRoy

Reputation: 411

Bokeh - multiple figures on same page

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.

Upvotes: 9

Views: 12949

Answers (3)

Winner Emeto
Winner Emeto

Reputation: 31

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>

Upvotes: 3

nettrino
nettrino

Reputation: 598

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

Upvotes: 9

Wojciech
Wojciech

Reputation: 34

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

Upvotes: -1

Related Questions