Embedding a plot in a website with Python/bokeh

Edit: the information in this answer pertains to extremely old versions of Bokeh and is no longer relevant to any usage

embed_base_url controls the url path (it can be absolute or relative) that the javascript will search for the embed file in.

embed_save_loc controls the directory that python will write out the embed file in. embed_save_loc isn't necessary when server=True

static_path controls the url path (it can absolute or relative) that the javascript will use to construct URLS for bokeh.js and bokeh.css. It defaults to http://localhost:5006/static/, but could just as easily point to a CDN

When running the bokeh server, navigate to http://localhost:5006/bokeh/generate_embed/static . I think this requires you to be running on master because of a bug.

EDIT: a CDN is a "Content Delivery Network" it's just a fancy term for file server. For instance, we host bokeh.js at http://cdn.bokeh.org/bokeh-0.4.2.js (or http://cdn.bokeh.org/bokeh-0.4.2.min.js) for anyone to use.


UPDATE: the create_html_snippet function mentioned in the original question was deprecated and removed years ago. There are now various newer ways to embed Bokeh content available in the bokeh.embed module. This answer will summarize some of them.

Standalone Content

Standalone Bokeh content is pure HTML/JS/CSS that is not backed by a running Bokeh server. However, standalone Bokeh content can still be highly interactive, with plot tools (e.g. pan, zoom, selection), linked brushing, and widgets that trigger CustomJS actions. There are several ways to embed standalone content:

json_item

If you would like to create a pure JSON representation of the content that can be loaded by JS functions, you can use the json_item function. As an example, you might server the JSON from a Flask endpoint:

@app.route('/plot')
def plot():
    p = make_plot('petal_width', 'petal_length')
    return json.dumps(json_item(p, "myplot"))

Then the page can load and render the content with JavaScript code like this:

<div id="myplot"></div>

<script>
fetch('/plot')
    .then(function(response) { return response.json(); })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>

This assumes you have loaded the BokehJS library on the page, e.g. by templating CDN.render() in the <head> of the page. See a complete minimal example here.

components

If you would like to generate a simple <script> tag and <div> that can be templated into a page to, you can use the components function:

from bokeh.plotting import figure
from bokeh.embed import components

plot = figure()
plot.circle([1,2], [3,4])

script, div = components(plot)

The returned script and div (or divs it you pass multiple items) can be inserted in to page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bokeh Scatter Plots</title>

        <!-- COPY/PASTE BOKEHJS RESOURCES HERE -->

        <!-- COPY/PASTE SCRIPT HERE -->

    </head>
    <body>
        <!-- INSERT DIVS HERE -->
    </body>
</html>

As above, you will need to hardcode or template the BokehJS JS and CSS resources in the page head, e.g. with CDN.render()

file_html

If you want to generate entire complete HTML pages (i.e. including <head></head><body></body>), you can use the file_html function:

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.circle([1,2], [3,4])

html = file_html(plot, CDN, "my plot")

This generates a basic page that can be saved or served, etc. If desired you can also supply your own Jinja template (see docs for details).

Bokeh Server Applications

Bokeh server applications can connect Bokeh plots and widgets to a live running Python process, so that events like UI interactions, making selections, or widget manipulations can trigger real Python code (e.g. Pandas or scikit-learn).

To embed a basic Bokeh application in a page template, the most common method is to use server_document:

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

The returned script can be templated anywhere in an HTML page, and the Bokeh application will appear there. There are many other possibilities, e.g. embedding app components individually, customizing sessions for users, or running behind proxies/load balancers. The Bokeh server may also need to be configured to allow access to the embedding page. For full details see the Running a Bokeh Server chapter of the Users Guide.

Another, possibly simpler way to "embed" a Bokeh server application, is to use IFrames pointing at the public URL of a running Bokeh app.

Tags:

Python

Bokeh

Recent Posts