Embed multiple bohek plots onto flask (flask_bootstrap specifically)

Community Support
1

Hi,

I was just wondering if the community has experience embedding multiple bohek onto a flask app that’s using flask_bootstrap.

so I tried the following:


# p1 is a single plot, and this renders fine

plot_script, plot_div = components(p1)

# but when I tried to add multiple plots it just gives me a blank screen

# 1. gridplot doesn't work

# https://bokeh.pydata.org/en/latest/docs/user_guide/layout.html#grids-layout-for-plots

grid = gridplot([[p1, p2], [p3, p4]])

plot_script, plot_div = components(grid)

# 2. passing multiple plots to components also didn't work

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

plot_script, plot_div = components((p1, p2, p3, p4))

# 3. looping through components and then embedding all individual script and div also did not work

plot_divs = []

plot_scripts = []

for p in (p1, p2, p3, p4):

plot_script, plot_div = components(p)

plot_divs.append(plot_div)

plot_scripts.append(plot_script)

The problem is there’s no error message, so I am not entirely sure how to troubleshoot this, I can upload other parts of the script such as the flask template if that’s required. Thanks!

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.pydata.org/bokeh/release/bokeh-1.3.4.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.css" rel="stylesheet" type="text/css">

<script src="http://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="http://cdn.pydata.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

{{ div1 | safe }}
{{ div2 | safe }}
{{ div3 | safe }}