CODEWITHSUNDEEP
django-templatesbokeh
renzop
renzop

Reputation: 1316

How embed bokeh server plots from one document in several places in at html file

I have an application that creates several "bokeh" plots. Those plots all belong to the same document, so that i can use linked panning / zooming. The plots are served by a "bokeh" server. All plots appear in one website but there is some html content between the plots. All of that is part of a django app. Using bokeh-0.12.1

#view.py
plots = []
plot1 = figure()
plot1.line([1,2,3],[5,4,2])
plot2 = figure()
plot3.line([1,2,3],[5,4,2])

script_tags = []
bokeh_document = curdoc()
session = push_session(bokeh_document)
script.tags.append(autoload_server(model=plot1, session_id=session.id))
script.tags.append(autoload_server(model=plot2, session_id=session.id))

Then in the template would look as follows:

template.html
<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text

<div>
{{script | safe }}
</div>
{% endfor %}

But then the page gets rendered imporperly... The plots appear over each other and over the page content. The documentation does not mention how to embedd it in html. So how does it have to be done so that the css works correctly?

Upvotes: 0

Views: 482

Answers (2)

bigreddot
bigreddot

Reputation: 34568

autoload_server had an issue in 0.12.1 that prevented the correct enclosing <div class="bk-root"> from appearing. This issue was fixed in 0.12.2, you can either upgrade, or put them in by hand as the other issue demonstrates.

Upvotes: 1

chrigu
chrigu

Reputation: 826

It looks like there are missing some CSS classes, namely bk-root and plotdiv. Try the following:

<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text
<div class=“bk-root">
<div class=“plotdiv">
{{script | safe }}
</div>
</div>
{% endfor %}

Also refer to the CSS file to see the correct order/nesting of classes.

Upvotes: 1

Related Questions