Embedding a bokeh plot in Flask
components() returns (script, div) tuple with <script> that contains the data for your plot and an accompanying <div> tag that the plot view is loaded into:
http://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components
script, div = components(fig)return render_template('simpleline.html',div=div, script=script)template
<!doctype html><html> <head> <title>Figure examples</title> <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.css" type="text/css" /> <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.js"></script> {{ script|safe }} </head> <body> <div class='bokeh'> {{ div|safe }} </div> </body></html>
Alternatively, you can also use autoload_static instead of components if you want the bokeh js and css to load automatically. Also you can save the js into a filepath and use only the div in the html to access it.
Here is a sample code that I worked with:
from bokeh.embed import autoload_staticfrom bokeh.resources import CDN..........................js, div = autoload_static(bar, CDN, '/static/bokeh/plot.js')with open('static/bokeh/plot.js', 'w') as f: f.write(js)And then in the html file include only the div tag (includes the path of the js script).
<!doctype html> <html> <head> <title>Figure examples</title> </head> <body> <div class='bokeh'> {{ div|safe }} </div> </body> </html>