Embed "Bokeh created html file" into Flask "template.html" file

Question

I have a web application written in Python - Flask. When the user fill out some settings in one of the pages (POST Request), my controller calculates some functions and plot an output using Bokeh with following command and then I redirect to that HTML page created by Bokeh.

output_file("templates\\" + idx[j]['name'] + ".html", title = "line plots")
TOOLS="resize,crosshair,pan,wheel_zoom,box_zoom,reset,box_select,lasso_select"
p = figure(tools=TOOLS, x_axis_label = 'time', y_axis_label = 'L', plot_width = 1400, plot_height = 900)

All of my HTML pages extends my "Template.HTML" file except the Bokeh generated ones. My question is how can automatically modify Bokeh generated HTML files to also extends my template.html file? This way I have all my nav-bar & jumbotron on top of the Bokeh html files.

  {% extends "template.html" %}
  {% block content %}

  <Bokeh.html file>

  {% endblock %}

Created a test.html file with content of: {% extends "template.html" %}{% block content %}{{ script }}{{ div }} {% endblock %}. Also in my controller: added return render_template('test.html', script = script, div = div), where script and div = components(p). Also, added the proper <link stylesheet> and <script javascript> for Bokeh to my template.html file. Unfortunately, it does not work fine. Based on Guide, the <Script> should go to my <head> part of template. However, my setup force it to go to the <body> part between{% block content %}{% endblock %}. — Hamid K
– Hamid K, Commented Oct 28, 2015 at 20:50
Please don't put relevant information in a comment. You can use edit to add it to your question. — Jongware
– Jongware, Commented Oct 28, 2015 at 22:11

davidism · Accepted Answer · 2015-10-29 02:20:03Z

17

You don't want to use output_file in this situation. Bokeh has a function specifically for embedding into HTML templates in web apps, bokeh.embed.component, demonstrated in the quickstart and tutorial.

from bokeh.embed import components
script, div = components(plot)
return render_template('page.html', script=script, div=div)

<body>
{{ div|safe }}
{{ script|safe }}
</body>

Here is a complete, runnable example that that shows how to use this with Flask.

edited Oct 29, 2015 at 2:20

davidism

128k31 gold badges417 silver badges348 bronze badges

answered Oct 28, 2015 at 19:37

bigreddot

34.8k5 gold badges73 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ryanyuyu Over a year ago

This post spawned a discussion on meta

Collectives™ on Stack Overflow

Embed "Bokeh created html file" into Flask "template.html" file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related