Unable to embed JSON Bokeh Plot in Django template

I have a script which takes uploaded data, munges it together, turns it into a plot (using Bokeh) and then exports it to a directory as JSON.

At some point in the future, a user can hit the right URL and the appropriate plot should be displayed to the user as part of the HTML template.

I can generate the plot. I can save it as JSON. I can get the URL to retrieve it as JSON, but I cannot get the JSON plot to render within the template.

I've had a dig around the Bokeh documentation and examples, but they all seem to use a flask app to serve the pages.

I think I'm on the right track, using views.py to find and return JSON as part of a render() response, and then have Bokeh.embed.embed_items() do the work in the template to make it look right, but it's not working out - everything but the plot is displayed.

1) Create the plot and puts it in the directory for later use (app/results/1)

create plot.py

import os
import json
from django.conf import settings
from bokeh.embed import json_item
from bokeh.plotting import figure

x=[1,2,3,4,5]
y=[0,-1,-2,3,4]

p=figure(title="test_example")
p.line(x, y)
#json_export = json_item(p, "result")
json_export = json_item(p)
with open(os.path.join(settings.RESULTS_DIR,"1", "test.json"), 'w') as fp:
    fp.write(json.dumps(json_export))

2) Set up the url

urls.py

urlpatterns=[
    path('result/<int:pk>', views.resultdetailview, name='result-detail'),
]

3) Take the request, use the pk to find the plot json and render it all in the appropriate template.

views.py

def resultdetailview(request, pk):
    results=str(pk)
    with open(os.path.join(settings.RESULTS_DIR, results, "test.json"), 'r') as fp:
        #data=json.load(fp)
        data=json.loads(fp.read())

    #context={'result':data}
    #return render(request, 'app/sandbox_detail.html', context)
    return render(request=request,
                    context={'json_object':data, 'resources':CDN.render()})

NB: If I instead use return JsonResponse(data, safe=False) then the url returns the json successfully ...

I think therefore that the issue is in the template.

4) Show the wonderous plot to the user

sandbox_detail.html

<header>
<link rel="stylesheet" href="http://cdn.bokeh.org./bokeh/release/bokeh-0.11.1.min.css" type="text/css" >
<script type="text/javascript" src="http://cdn.bokeh.org./bokeh/release/bokeh-0.11.1.min.js"> </script>
</header>

<h1> Title: Test </h1>
<div>Test</div>

<body>
    <div id="result"></div>
    <script>
        Bokeh.embed.embed_item({{json_object}}, "result");
    </script>
</body>

This template renders everything but the 'result' div.

What have I missed?

Solution

This is what I see so far:

FIRST: You are mixing 2 methods for injecting plot json data into the page. According to documentation you can do it using either of these two methods:

1) specify the div directly:

Python: json_data = json.dumps(json_item(p, "myplot"))
JavaScript: Bokeh.embed.embed_item(item);

2) specify the div in embed_item function:

Python: json_data = json.dumps(json_item(p))
JavaScript: Bokeh.embed.embed_item(item, "myplot");

But not both of them at the same time. Could this be the problem?

SECOND: Preferably don't insert Bokeh resources by hand: rather use CDN.render() or INLINE.render() to automatically include all that your script needs:

import json
from bokeh.resources import CDN

return render(request  = request, 
              template_name = 'app/sandbox_detail.html', 
              context = { json_object = json.loads(json_string), 
                          resources = CDN.render() } )

sandbox_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="result"></div>
<script>
    Bokeh.embed.embed_item({{ json_object }}, "result");
</script>
</body>
</html>

THIRD: Make sure what you embed in the page is json object not a string (see variable naming above)