bokeh.embed#

Provide functions for embedding Bokeh standalone and server content in web pages.

class RenderRoot(elementid: ~bokeh.core.types.ID, id: ~bokeh.core.types.ID, name: str | None = '', tags: list[~typing.Any] = <factory>)[source]#

Encapsulate data needed for embedding a Bokeh document root.

Values for name or tags are optional. They may be useful for querying a collection of roots to find a specific one to embed.

elementid: ID#

A unique ID to use for the DOM element

id: ID#

The Bokeh model ID for this root

name: str | None = ''#

An optional user-supplied name for this root

tags: list[Any]#

A list of any user-supplied tag values for this root

autoload_static(model: Model | Document, resources: Resources, script_path: str) → tuple[str, str][source]#

Return JavaScript code and a script tag that can be used to embed Bokeh Plots.

The data for the plot is stored directly in the returned JavaScript code.

Parameters:
Returns:

JavaScript code to be saved at script_path and a <script> tag to load it

Return type:

(js, tag)

Raises:

ValueError –

components(models: Model | Sequence[Model] | dict[str, Model], wrap_script: bool = True, wrap_plot_info: bool = True, theme: None | Theme | type[FromCurdoc] = None) → tuple[str, Any][source]#

Return HTML components to embed a Bokeh plot. The data for the plot is stored directly in the returned HTML.

An example can be found in examples/embed/embed_multiple.py

The returned components assume that BokehJS resources are already loaded. The HTML document or template in which they will be embedded needs to include scripts tags, either from a local URL or Bokeh’s CDN (replacing x.y.z with the version of Bokeh you are using):

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-x.y.z.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-x.y.z.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-x.y.z.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-x.y.z.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-x.y.z.min.js"></script>

Only the Bokeh core library bokeh-x.y.z.min.js is always required. The other scripts are optional and only need to be included if you want to use corresponding features:

  • The "bokeh-widgets" files are only necessary if you are using any of the Bokeh widgets.

  • The "bokeh-tables" files are only necessary if you are using Bokeh’s data tables.

  • The "bokeh-api" files are required to use the BokehJS API and must be loaded after the core BokehJS library.

  • The "bokeh-gl" files are required to enable WebGL support.

  • the "bokeh-mathjax" files are required to enable MathJax support.

Parameters:

  • models (Model|list|dict|tuple) – A single Model, a list/tuple of Models, or a dictionary of keys and Models.

  • wrap_script (boolean, optional) – If True, the returned javascript is wrapped in a script tag. (default: True)

  • wrap_plot_info (boolean, optional) – If True, returns <div> strings. Otherwise, return RenderRoot objects that can be used to build your own divs. (default: True)

  • theme (Theme, optional) – Applies the specified theme when creating the components. If None, or not specified, and the supplied models constitute the full set of roots of a document, applies the theme of that document to the components. Otherwise applies the default theme.

Returns:

UTF-8 encoded (script, div[s]) or (raw_script, plot_info[s])

Examples

With default wrapping parameter values:

components(plot)
# => (script, plot_div)

components((plot1, plot2))
# => (script, (plot1_div, plot2_div))

components({"Plot 1": plot1, "Plot 2": plot2})
# => (script, {"Plot 1": plot1_div, "Plot 2": plot2_div})

Examples

With wrapping parameters set to False:

components(plot, wrap_script=False, wrap_plot_info=False)
# => (javascript, plot_root)

components((plot1, plot2), wrap_script=False, wrap_plot_info=False)
# => (javascript, (plot1_root, plot2_root))

components({"Plot 1": plot1, "Plot 2": plot2}, wrap_script=False, wrap_plot_info=False)
# => (javascript, {"Plot 1": plot1_root, "Plot 2": plot2_root})
file_html(models: Model | Document | Sequence[Model], resources: ResourcesLike | None = None, title: str | None = None, *, template: Template | str = <Template 'file.html'>, template_variables: dict[str, Any] = {}, theme: ThemeLike = None, suppress_callback_warning: bool = False, _always_new: bool = False) → str[source]#

Return an HTML document that embeds Bokeh Model or Document objects.

The data for the plot is stored directly in the returned HTML, with support for customizing the JS/CSS resources independently and customizing the jinja2 template.

Parameters:

  • models (Model or Document or seq[Model]) – Bokeh object or objects to render typically a Model or Document

  • resources (ResourcesLike) – A resources configuration for Bokeh JS & CSS assets.

  • title (str, optional) –

    A title for the HTML document <title> tags or None. (default: None)

    If None, attempt to automatically find the Document title from the given plot objects.

  • template (Template, optional) – HTML document template (default: FILE) A Jinja2 Template, see bokeh.core.templates.FILE for the required template parameters

  • template_variables (dict, optional) – variables to be used in the Jinja2 template. If used, the following variable names will be overwritten: title, bokeh_js, bokeh_css, plot_script, plot_div

  • theme (Theme, optional) – Applies the specified theme to the created html. If None, or not specified, and the function is passed a document or the full set of roots of a document, applies the theme of that document. Otherwise applies the default theme.

  • suppress_callback_warning (bool, optional) – Normally generating standalone HTML from a Bokeh Document that has Python callbacks will result in a warning stating that the callbacks cannot function. However, this warning can be suppressed by setting this value to True (default: False)

Returns:

UTF-8 encoded HTML

json_item(model: Model, target: ID | None = None, theme: ThemeLike = None) → StandaloneEmbedJson[source]#

Return a JSON block that can be used to embed standalone Bokeh content.

Parameters:

  • model (Model) – The Bokeh object to embed

  • target (string, optional) – A div id to embed the model into. If None, the target id must be supplied in the JavaScript call.

  • theme (Theme, optional) – Applies the specified theme to the created html. If None, or not specified, and the function is passed a document or the full set of roots of a document, applies the theme of that document. Otherwise applies the default theme.

Returns:

JSON-like

This function returns a JSON block that can be consumed by the BokehJS function Bokeh.embed.embed_item. As an example, a Flask endpoint for /plot might return the following content to embed a Bokeh plot into a div with id “myplot”:

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

Then a web page can retrieve this JSON and embed the plot by calling Bokeh.embed.embed_item:

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

Alternatively, if is more convenient to supply the target div id directly in the page source, that is also possible. If target_id is omitted in the call to this function:

return json.dumps(json_item(p))

Then the value passed to embed_item is used:

Bokeh.embed.embed_item(item, "myplot");
server_document(url: str = 'default', relative_urls: bool = False, resources: Literal['default'] | None = 'default', arguments: dict[str, str] | None = None, headers: dict[str, str] | None = None, with_credentials: bool = False) → str[source]#

Return a script tag that embeds content from a Bokeh server.

Bokeh apps embedded using these methods will NOT set the browser window title.

Parameters:

  • url (str, optional) –

    A URL to a Bokeh application on a Bokeh server (default: “default”)

    If "default" the default URL http://localhost:5006/ will be used.

  • relative_urls (bool, optional) –

    Whether to use relative URLs for resources.

    If True the links generated for resources such a BokehJS JavaScript and CSS will be relative links.

    This should normally be set to False, but must be set to True in situations where only relative URLs will work. E.g. when running the Bokeh behind reverse-proxies under certain configurations

  • resources –

    A string specifying what resources need to be loaded along with the document.

    If default then the default JS/CSS bokeh files will be loaded.

    If None then none of the resource files will be loaded. This is useful if you prefer to serve those resource files via other means (e.g. from a caching server). Be careful, however, that the resource files you’ll load separately are of the same version as that of the server’s, otherwise the rendering may not work correctly.

Returns:

A <script> tag that will embed content from a Bokeh Server.

server_session(model: Model | None = None, session_id: ID | None = None, url: str = 'default', relative_urls: bool = False, resources: Literal['default'] | None = 'default', headers: dict[str, str] = {}, with_credentials: bool = False) → str[source]#

Return a script tag that embeds content from a specific existing session on a Bokeh server.

This function is typically only useful for serving from a a specific session that was previously created using the bokeh.client API.

Bokeh apps embedded using these methods will NOT set the browser window title.

Note

Typically you will not want to save or re-use the output of this function for different or multiple page loads.

Parameters:

  • model (Model or None, optional) –

    The object to render from the session, or None. (default: None)

    If None, the entire document will be rendered.

  • session_id (str) – A server session ID

  • url (str, optional) –

    A URL to a Bokeh application on a Bokeh server (default: “default”)

    If "default" the default URL http://localhost:5006/ will be used.

  • relative_urls (bool, optional) –

    Whether to use relative URLs for resources.

    If True the links generated for resources such a BokehJS JavaScript and CSS will be relative links.

    This should normally be set to False, but must be set to True in situations where only relative URLs will work. E.g. when running the Bokeh behind reverse-proxies under certain configurations

  • resources –

    A string specifying what resources need to be loaded along with the document.

    If default then the default JS/CSS bokeh files will be loaded.

    If None then none of the resource files will be loaded. This is useful if you prefer to serve those resource files via other means (e.g. from a caching server). Be careful, however, that the resource files you’ll load separately are of the same version as that of the server’s, otherwise the rendering may not work correctly.

Returns:

A <script> tag that will embed content from a Bokeh Server.

Warning

It is typically a bad idea to re-use the same session_id for every page load. This is likely to create scalability and security problems, and will cause “shared Google doc” behavior, which is probably not desired.

On this page