Embedding multiple bokeh HTML plots into flask
Why you dont try to make it with the horizontal layouthorizontal-layout
Whith your way ( {% include %} ), i don't find a solution so probably sou must use the standart flask way. Python file:
#Your importsfrom flask import Flask, render_templatefrom bokeh.embed import componentsfrom bokeh.plotting import figure@app.route('/')def homepage(): title = 'home' from bokeh.plotting import figure #First Plot p = figure(plot_width=400, plot_height=400, responsive = True) p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) #Second Plot p2 = figure(plot_width=400, plot_height=400,responsive = True) p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5) script, div = components(p) script2, div2 = components(p) return render_template('index.html', title = title, script = script, div = div, script2 = script2, div2 = div2)Your HTML file:
<!DOCTYPE html><html lang="en"><head> <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.css" rel="stylesheet" type="text/css"><script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.js"></script> <meta charset="UTF-8"> <title>{{title}}</title></head><body> <div style="width: 20%; display: inline-block;"> {{ div | safe }} {{ script | safe }} </div> <div style="width: 20%; display: inline-block;"> {{ div2 | safe }} {{ script2 | safe }} </div></body></html>And one other tip is to make a python file like my_plots.pyand add your plots there, and then import to you main.py it will make your code cleaner. (i dont know 100% if this will impact your speed, but i don't seen any isues until now ) For example.
my_plots.py:
from bokeh.plotting import figuredef first_plot(): p = figure(plot_width=400, plot_height=400, responsive = True) p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) return pdef second_plot(): p2 = figure(plot_width=400, plot_height=400, responsive = True) p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5) return p2main.py:
@app.route('/')def homepage(): title = 'home' #First Plot from my_plots import first_plot p = first_plot() #Second Plot from my_plots import second_plot p2 = second_plot() script, div = components(p) script2, div2 = components(p) return render_template('index.html', title = title, script = script, div = div, script2 = script2, div2 = div2)Hope i was helpful, Good Luck!