Embedding a bokeh app in flask

Question

I am trying desperately to embed a working bokeh applet into flask, and can\'t find a proper way to do this. I looked through all the examples, but I can\'t find one which i

Answer 1

The other answer does not describe how to embed a Bokeh server app (it uses components to embed a standalone Bokeh document).

First, you can see lots of live examples hosted at: https://demo.bokeh.org/

For embedding apps there are two usual options:

• iframes (works fine), or
• server_document

The latter is usually used like this:

from bokeh.embed import server_document
script = server_document("https://demo.bokeh.org/sliders")

This will return a <script> tag similar to the one below, that you can put in your flask HTML response, wherever you'd like the app to appear:

<script
    src="https://demo.bokeh.org/sliders/autoload.js?bokeh-autoload-element=1000&bokeh-app-path=/sliders&bokeh-absolute-url=https://demo.bokeh.org/sliders"
    id="1000">
</script>

Lastly, it's important to note that by default the Bokeh server opts for a fairly conservative network configuration. You'll need to start the Bokeh server with --allow-websocket-origin command line option set to be whatever host you are embedding the bokeh app into.

Answer 2

EDIT by one one of the core developers of the Bokeh project The information below does not answer the question above. It is categorically impossibly to embed a Bokeh Application by using bokeh.embed.components as described below. components is only capable of embedding standalone documenents (i.e. that do NOT run on a Bokeh server)

---

An example of embedding bokeh with flask is present on the bokeh github repo.

import flask

from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.templates import RESOURCES
from bokeh.util.string import encode_utf8

app = flask.Flask(__name__)

colors = {
    'Black': '#000000',
    'Red':   '#FF0000',
    'Green': '#00FF00',
    'Blue':  '#0000FF',
}


def getitem(obj, item, default):
    if item not in obj:
        return default
    else:
        return obj[item]


@app.route("/")
def polynomial():
    """ Very simple embedding of a polynomial chart"""
    # Grab the inputs arguments from the URL
    # This is automated by the button
    args = flask.request.args

    # Get all the form arguments in the url with defaults
    color = colors[getitem(args, 'color', 'Black')]
    _from = int(getitem(args, '_from', 0))
    to = int(getitem(args, 'to', 10))

    # Create a polynomial line graph
    x = list(range(_from, to + 1))
    fig = figure(title="Polynomial")
    fig.line(x, [i ** 2 for i in x], color=color, line_width=2)

    # Configure resources to include BokehJS inline in the document.
    # For more details see:
    #   http://docs.bokeh.org/en/latest/docs/reference/resources_embedding.html#module-bokeh.resources
    plot_resources = RESOURCES.render(
        js_raw=INLINE.js_raw,
        css_raw=INLINE.css_raw,
        js_files=INLINE.js_files,
        css_files=INLINE.css_files,
    )

    # For more details see:
    #   http://docs.bokeh.org/en/latest/docs/user_guide/embedding.html#components
    script, div = components(fig, INLINE)
    html = flask.render_template(
        'embed.html',
        plot_script=script, plot_div=div, plot_resources=plot_resources,
        color=color, _from=_from, to=to
    )
    return encode_utf8(html)


def main():
    app.debug = True
    app.run()

if __name__ == "__main__":
    main()

---

Another idea would be to run bokeh-server and your flask web app side-by-side, and load the bokeh-code that way (server-side or via JS or an iframe), but that could be troublesome.