Unable to embed JSON Bokeh Plot in Django template

manpreet Best Answer 3 years ago

I have a script which takes uploaded data, munges it together, turns it into a plot (using Bokeh) and then href="https://forum.tuteehub.com/tag/exports">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/href="https://forum.tuteehub.com/tag/result">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, "href="https://forum.tuteehub.com/tag/result">result")
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('href="https://forum.tuteehub.com/tag/result">result/', views.href="https://forum.tuteehub.com/tag/result">resultdetailview, name='href="https://forum.tuteehub.com/tag/result">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 href="https://forum.tuteehub.com/tag/result">resultdetailview(request, pk):
    href="https://forum.tuteehub.com/tag/result">results=str(pk)
    with open(os.path.join(settings.RESULTS_DIR, href="https://forum.tuteehub.com/tag/result">results, "test.json"), 'r') as fp:
        data=json.load(fp)
    context={'href="https://forum.tuteehub.com/tag/result">result':data}
    return render(request, 'app/sandbox_detail.html', context)

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.pydata.org./bokeh/release/bokeh-0.11.1.min.css" type="text/css" >
<script type