Archived discussions · Captured October 28, 2026

Embedding my bokeh graphs without always generating them dynamically?

pisymbolDec 27, 2018 #1

So I understand how to display bokeh graphs that are generated on the fly using Flask and getting their div, script components into my template file.

But the problem is I don’t want to generate a figure object on the fly since the graphs are generated from a very large dataset.

Instead, what I want to do is generate the bokeh graphs, save them in some format (static part), and then embed them in an HTML report page (that uses Bootstrap). Is this possible?

I originally tried to save the bokeh graphs as HTML documents using the low-level API which works - works in that I can save them and display them as standalone HTML pages. But when I try to use these html files using an or tag it doesn’t display them or displays parts of them (again, I’m trying to add them to a Bootstrap themed page). I guess I can embed them as a separate iframe? (I haven’t tried that though).

I mean I could pickle the component pieces of each graph and then load them into Python to render the objects out via a Flask template. But that seems really overkill to me and the wrong approach.

What am I missing here?

-aps

⌁ Link to post

BryanDec 27, 2018 #2

Hi,

You should look at the new "json_item" function added in Bokeh 1.0, which allows for saving a document as a pure JSON structure that can be reconstituted with a single BokehJS call:

bokeh

The example there demonstrates loading and using the JSON from a JS "fetch" call, but you could certainly just template the JSON directly into a call to "Bokeh.embed.embed_item" instead.

Thanks,

Bryan

···

On Dec 27, 2018, at 12:03, pisymbol <pisymbol@gmail.com> wrote:

So I understand how to display bokeh graphs that are generated on the fly using Flask and getting their div, script components into my template file.

But the problem is I don't want to generate a figure object on the fly since the graphs are generated from a very large dataset.

Instead, what I want to do is generate the bokeh graphs, save them in some format (static part), and then embed them in an HTML report page (that uses Bootstrap). Is this possible?

I originally tried to save the bokeh graphs as HTML documents using the low-level API which works - works in that I can save them and display them as standalone HTML pages. But when I try to use these html files using an <embed> or <object> tag it doesn't display them or displays parts of them (again, I'm trying to add them to a Bootstrap themed page). I guess I can embed them as a separate iframe? (I haven't tried that though).

I mean I could pickle the component pieces of each graph and then load them into Python to render the objects out via a Flask template. But that seems really overkill to me and the wrong approach.

What am I missing here?

-aps

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b47f167d-5484-4067-87d6-9641670d6844%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

pisymbolDec 27, 2018 #3

Alright, after working with Flask’s Jinja template engine apparently one can treat the Bokeh generated HTML files as templates and do something like this:

Put this in your section:

And now somewhere in your HTML add this Jinja directive:

{% include heatmap ignore missing %}

And then do something like this in your Flask app which will at least display it (not sure if this is really the right way to do this):

15 from bokeh.resources import INLINE
16 from bokeh.util.string import encode_utf8
…
21 @app.route(‘/’, methods=[‘GET’, ‘POST’])
22 def index():
23 # Static resources
24 js_resources = INLINE.render_js()
25 css_resources = INLINE.render_css()
26
27 # Render our results (if any)
28 html = render_template(‘index.html’,
29 heatmap=‘heatmap-plot.html’,
30 js_resources=js_resources,
31 css_resources=css_resources)
32 return encode_utf8(html)

···

On Thursday, December 27, 2018 at 3:03:40 PM UTC-5, pisymbol wrote:

So I understand how to display bokeh graphs that are generated on the fly using Flask and getting their div, script components into my template file.

But the problem is I don’t want to generate a figure object on the fly since the graphs are generated from a very large dataset.

Instead, what I want to do is generate the bokeh graphs, save them in some format (static part), and then embed them in an HTML report page (that uses Bootstrap). Is this possible?

I originally tried to save the bokeh graphs as HTML documents using the low-level API which works - works in that I can save them and display them as standalone HTML pages. But when I try to use these html files using an or tag it doesn’t display them or displays parts of them (again, I’m trying to add them to a Bootstrap themed page). I guess I can embed them as a separate iframe? (I haven’t tried that though).

I mean I could pickle the component pieces of each graph and then load them into Python to render the objects out via a Flask template. But that seems really overkill to me and the wrong approach.

What am I missing here?

⌁ Link to post

pisymbolDec 27, 2018 #4

Bryan, thanks for the link! I saw the JSON doc on the bokeh main site but it wasn’t clear to me I really needed to embed it in a script tag. Your blog post was illuminating.

What’s the difference between that and what I did - have the Jinja2 engine render the bokeh HTML as just another template? (it seems to work fine for my set of graphs so far).

Happy Holidays!

-aps

···

On Thursday, December 27, 2018 at 4:00:56 PM UTC-5, Bryan Van de ven wrote:

Hi,

You should look at the new “json_item” function added in Bokeh 1.0, which allows for saving a document as a pure JSON structure that can be reconstituted with a single BokehJS call:
    [https://blog.bokeh.org/posts/release-1-0-0#json-export-and-embed](https://blog.bokeh.org/posts/release-1-0-0#json-export-and-embed)
The example there demonstrates loading and using the JSON from a JS “fetch” call, but you could certainly just template the JSON directly into a call to “Bokeh.embed.embed_item” instead.

Thanks,

Bryan

⌁ Link to post

BryanDec 27, 2018 #5

Hi,

I'm not sure why you should need to include the resources yourself with your approach, the HTML output generated by "save" or "show" either has resources inline, or loads them from CDN. In any case, I'd regard the technique I described to be "tidier" since it does not necessitate generating actual filesystem objects that would need to be managed, but that's somewhat a matter of preference.

Also, for reference, here is a complete example using json_item:

https://github.com/bokeh/bokeh/blob/master/examples/embed/json_item.py

Thanks,

Bryan

···

On Dec 27, 2018, at 13:06, pisymbol <pisymbol@gmail.com> wrote:

On Thursday, December 27, 2018 at 4:00:56 PM UTC-5, Bryan Van de ven wrote:
Hi,

You should look at the new "json_item" function added in Bokeh 1.0, which allows for saving a document as a pure JSON structure that can be reconstituted with a single BokehJS call:

bokeh

The example there demonstrates loading and using the JSON from a JS "fetch" call, but you could certainly just template the JSON directly into a call to "Bokeh.embed.embed_item" instead.

Thanks,

Bryan

Bryan, thanks for the link! I saw the JSON doc on the bokeh main site but it wasn't clear to me I really needed to embed it in a script tag. Your blog post was illuminating.

What's the difference between that and what I did - have the Jinja2 engine render the bokeh HTML as just another template? (it seems to work fine for my set of graphs so far).

Happy Holidays!

-aps

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0d66ce63-e650-4c58-8f7a-63068ea030da%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

pisymbolDec 27, 2018 #6

Perhaps I don’t really need to include those resources. Let me try that. Outside of filesystem management, I would assume the output would be equivalent using either method?

-aps

···

On Thursday, December 27, 2018 at 4:10:04 PM UTC-5, Bryan Van de ven wrote:

Hi,

I’m not sure why you should need to include the resources yourself with your approach, the HTML output generated by “save” or “show” either has resources inline, or loads them from CDN. In any case, I’d regard the technique I described to be “tidier” since it does not necessitate generating actual filesystem objects that would need to be managed, but that’s somewhat a matter of preference.

Also, for reference, here is a complete example using json_item:
    [https://github.com/bokeh/bokeh/blob/master/examples/embed/json_item.py](https://github.com/bokeh/bokeh/blob/master/examples/embed/json_item.py)

⌁ Link to post

BryanDec 27, 2018 #7

Hi,

Well that depends on what you mean by "equivalent". If you mean "rendered visually approximately the same" then sure, I believe it is possible to use your approach to create output that looks more or less like the "json_item" approach (but can't say anything for certain in your specific case as it is right now, since I haven't seen your template). If you mean "has identical DOM structure" then the answer is "definitely not", since in one method you are inlining an entire other HTML file, and the other method you are not.

Thanks,

Bryan

···

On Dec 27, 2018, at 13:15, pisymbol <pisymbol@gmail.com> wrote:

On Thursday, December 27, 2018 at 4:10:04 PM UTC-5, Bryan Van de ven wrote:
Hi,

I'm not sure why you should need to include the resources yourself with your approach, the HTML output generated by "save" or "show" either has resources inline, or loads them from CDN. In any case, I'd regard the technique I described to be "tidier" since it does not necessitate generating actual filesystem objects that would need to be managed, but that's somewhat a matter of preference.

Also, for reference, here is a complete example using json_item:

https://github.com/bokeh/bokeh/blob/master/examples/embed/json_item.py

Perhaps I don't really need to include those resources. Let me try that. Outside of filesystem management, I would assume the output would be equivalent using either method?

-aps

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9f47ef5c-af73-490d-a4e6-f1613e513c78%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

⌁ Link to post

systemJul 21, 2021 #8

⌁ Link to post

End of archived discussion · Replies are disabled