Embed existing plots in Flask

[gjertro]

Hi
First of all, my compliments to the Bokeh team for a creating such an excellent library.

We are currently using bokeh to visualize results from an internal simulation model. We use tabs, rows, columns, line-plots and tables and create approximately 200 figures. To distribute this internally, want to include this in a Flask application we have running. Using components and CDN this works great out of the box.

The problem is, however, that we do not want to create new plots each time someone trigger the view-function. As there are many other models/data streams we wish to separate the creation of bokeh plots from the Flask application.

To tackle this, we have tried to include the html file created by bokeh directly in a Jinja2 template that is rendered with Flask:

{% extends “base.html” %}

{% block content %}
{% include ‘bokeh_figure_with_model_results.html’ %}
{% endblock %}

When doing this, jinja2 throw an exception:
jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag ‘Y’.

Another approach we tried was to utilize the file_html() function, save the html to file and read/embed this in a template.

{% extends “base.html” %}

{% block content %}
{{ html_from_file }}
{% endblock %}

This, however, fails to display the bokeh figure. Pretty sure the html is correctly saved to file. When opening the file in a web-browser, the bokeh plots and figures work just fine.

My question is therefore what is the best/simplest/best practice when separating creation of plots and embedding them in a separate application?

What we are trying to do:

• We have a base.html temoplate that handle the sidebar, header ect
• For the different view functions/templates, add a tag, or specified “box” where the bokeh plot is embedded.

Cheers,
Gjert

[Bryan]

If you aren’t doing anything fancy with custom extensions, the json_items would let you store off a JSON blob for each plot. Tho do note, the “rehydration” typically will require making sure the version of BokehJS matches the version of Bokeh used to create the blob.

Alternatively, autoload_static will generate a .js script file that you can save and load in page, that will also load the necessary version of BokehJS from CDN automatically. All of the examples in the Bokeh documentation use this method.

Of course, there is no reason you could not just save the output of components either, and people certainly do that.

Where you seem to be running in to trouble is trying to save off HTML files and then shoehorn those entire HTML files into another page, that’s just generally not going to work well, Bokeh aside.