Rendering Bokeh widgets in django Templates

Question

I'm new to django and bokeh. I was trying to render a simple bokeh plot supported by a few select options that essentially allow me to tweak my plot's content in a django web application.

The plots are rendered when the script and div elements obtained from the bokeh.embed.components() are passed to the template as context variables. The same didn't work when i had a widget and a plot held in a bokeh.io.vform object.

I get the output right when i perform a bokeh.io.show(), by specifying the bokeh.plotting.output_file(), but I'm trying to get this running in my web application. Am I missing anything? Or is there any other approach that serves my intent?

my code to just render a bokeh widget is as follows:

views.py

#django imports 
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.io import vform
from bokeh.models.widgets import Select
def test(request):
    s = Select(title="test", value="a", options=['a','b','c'])
    script,div = components(s)
    return render(request,'test.html',RequestContext(request,{'script':script,'div':div}))

test.html

<html>
<head>
      <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.css" rel="stylesheet" type="text/css">
       <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.js"></script>
</head>
{% load staticfiles %}
<body>
      {{ div | safe }}
      {{ script | safe }}
</body>
</html>

I would expect a select form element to be rendered when test.html is launched from test() in django. but doesn't happen.

One side question, since I am trying to learn from your example. What would be the content of the urls.py file for this to work. I get the Page not found (404) error when I try to access the test.html file. My urls.py file has re_path(r'test/', views.test ), — ankit7540

bigreddot bigreddot · Accepted Answer · 2016-04-18T17:50:38

BokehJS was recently split up into separate pieces to provide more flexible options for usage depending on what parts of the library are actually being used. Because loading resources is normally automatically handled in many cases, it was unintentioinally neglected to mention this split prominently in the docs. However, it is important to know about for embedding. There is an issue to update the docs, but what you need to know is that if you are using widgets, you now also need to load additional scripts from CDN:

http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.11.1.min.js
http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.11.1.min.css

Rendering Bokeh widgets in django Templates

1 Answers