Embedding Bokeh Figures

Community Support
1

Hello.

I am interested in embedding a bokeh figure into a webpage.

The code I used to create the figure is as follows:

fig = figure(x_axis_type=“datetime”)
fig.line(x=data[‘dt_tm’], y=data[‘points’])
curdoc().add_root(column(fig))

You can see the end result here:

http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200/bokeh_1

I tried embedding it using the autoload_server approach as follows:

from bokeh.embed import autoload_server
script = autoload_server(model=None, app_path="/bokeh_1", url=‘http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200’)
print script

which returns:

    <script
src="http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200/bokeh_1/autoload.js?bokeh-autoload-element=507eee5c-f2a4-4604-a81d-00ebfdacf2c7"
id="507eee5c-f2a4-4604-a81d-00ebfdacf2c7"
data-bokeh-model-id=""
data-bokeh-doc-id=""
></script>



When I embed this into another html doc, the figure loads but with two issues:



1) the widgets (box zoom, save etc) that are present in standalone site don't load properly

2) the figure insists on loading in the top left corner



See end result here:



http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com/index.html



When inspecting the source code, I saw the following associated with the figure:



element {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 600px;
}



I'm wondering if there's something I've done wrong/can change to improve the way it loads inline in the document.



Thanks for your help!
2

Hi,

First, autoload_server has been deprecated and replaced with two individually simpler functions: server_session and server_document. You probably want server_document.

Regarding the positioning, the autoload script tag essentially replaces itself with a div that contains the app. I believe the issue here is that none of your other content is in divs, so the bokeh div simply floats to the top. As an example that functions in the desired way, see e.g

  https://github.com/bokeh/bokeh/blob/master/examples/howto/server_embed/templates/embed.html

There, the <body> looks like:

  <body>
    <div>
      This Bokeh app below served by a Bokeh server that has been embedded
      in another web app framework. For more information see the section
      <a target="_blank" href="...">Embedding Bokeh Server as a Library</a>
      in the User's Guide.
    </div>
    {{ script|safe }}
  </body>
  </html>

With the first text content in a div, the result is layed out as you'd expect, with the first div above the app div.

This is perhaps something that could be better mentioned in the documentation. I am definitely not a CSS expert so I can say it mostly just never occurred to me. Please feel free to open a GH issue to improve the docs around best practices for using these functions.

Thanks,

Bryan

···

On Dec 31, 2017, at 17:48, [email protected] wrote:

Hello.

I am interested in embedding a bokeh figure into a webpage.

The code I used to create the figure is as follows:

fig = figure(x_axis_type="datetime")
fig.line(x=data['dt_tm'], y=data['points'])
curdoc().add_root(column(fig))

You can see the end result here:

http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200/bokeh_1

I tried embedding it using the autoload_server approach as follows:

from bokeh.embed import autoload_server
script = autoload_server(model=None, app_path="/bokeh_1", url='http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200')
print script

which returns:

<script
    src="http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com:5200/bokeh_1/autoload.js?bokeh-autoload-element=507eee5c-f2a4-4604-a81d-00ebfdacf2c7&quot;
    id="507eee5c-f2a4-4604-a81d-00ebfdacf2c7"
    data-bokeh-model-id=""
    data-bokeh-doc-id=""
></script>

When I embed this into another html doc, the figure loads but with two issues:

1) the widgets (box zoom, save etc) that are present in standalone site don't load properly
2) the figure insists on loading in the top left corner

See end result here:

http://ec2-35-182-226-31.ca-central-1.compute.amazonaws.com/index.html

When inspecting the source code, I saw the following associated with the figure:

element {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 600px;
}

I'm wondering if there's something I've done wrong/can change to improve the way it loads inline in the document.

Thanks for your help!

--
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 [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/55563fa6-f83e-438c-bcef-4dcc4461d644%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.