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.
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:
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.
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.
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:
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.
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:
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.
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:
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:
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).
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:
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.
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:
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?