python - Embedding Bokeh plot in Django website results in blank page with no error message -
i'm trying embed bokeh plot django site has upload button. i'm using example given here starting point , adding on instructions on embedding here. follow-up on question here have new problem. plot wont display when go url associated it, there no error message , page loads.
i used need-a-minimal-django-file-upload-example/for_django_1.8 , works intended when navigate url http://<port>/myapp/list/
myapp/url.py looks this
# -*- coding: utf-8 -*- django.conf.urls import patterns, url . import views urlpatterns = patterns('myproject.myapp.views', url(r'^list/$', 'list', name='list'), url(r'^simple_chart/$', views.simple_chart, name="simple_chart"), ) here views.py , simple_chart.html. when navigate http://<port>/myapp/simple_chart/ simple_chart function should generate plot.
views.py
import pdb # -*- coding: utf-8 -*- django.shortcuts import render_to_response django.template import requestcontext django.http import httpresponseredirect django.core.urlresolvers import reverse myproject.myapp.models import document myproject.myapp.forms import documentform django.shortcuts import render bokeh.plotting import figure bokeh.resources import cdn bokeh.embed import components def list(request): # handle file upload if request.method == 'post': form = documentform(request.post, request.files) if form.is_valid(): newdoc = document(docfile=request.files['docfile']) newdoc.save() # redirect document list after post return httpresponseredirect(reverse('myproject.myapp.views.list')) else: form = documentform() # empty, unbound form # load documents list page documents = document.objects.all() # render list page documents , form return render_to_response( 'list.html', {'documents': documents, 'form': form}, context_instance=requestcontext(request) ) def simple_chart(request): plot = figure() plot.circle([1,2], [3,4]) script, div = components(plot, cdn) #pdb.set_trace() return render(request, "simple_chart.html", {"the_script":script, "the_div":div}) simple_chart.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>experiment bokeh</title> <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script> <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css"> {{the_script|safe}} </head> <body> {{the_div|safe}} </body> </html> but see, empty.
i tried substituting breakpoint pdb.set_trace() can see commented in views.py above. both script , div have values when navigate url:
script
(pdb) script '\n<script type="text/javascript">\n bokeh.$(function() {\n var docs_json = {"16f6d3df-63fd-495d-9eec-ea3aab28b407": {"roots": {"references": [{"id": "4dc7cc72-cd52-4613-aaa2-ec93471f694b", "type": "datarange1d", "attributes": {"callback": null}}, {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot", "attributes": {"tools": [{"id": "4d60f7b2-0da1-48d0-9c2c-659df516c0b9", "type": "pantool"}, {"id": "dbbfac54-7529-4686-b18b-288f0ece3d19", "type": "wheelzoomtool"}, {"id": "2083997a-0bd7-46bc-b46c-fd537f7bc5b0", "type": "boxzoomtool"}, {"id": "065744d9-e11f-4f4f-81de-1fcff22fba0f", "type": "previewsavetool"}, {"id": "60c5f5c0-699a-4457-8ee4-4ab4ae59fea5", "type": "resizetool"}, {"id": "3875ebde-81d3-4d2b-8c0a-fdb3c62befb1", "type": "resettool"}, {"id": "5265f945-25ed-438a-8dbb-8ed4ffd8cc88", "type": "helptool"}], "x_range": {"id": "f7502b7f-436b-4346-b6d8-1b38ec8b952f", "type": "datarange1d"}, "renderers": [{"id": "a89b6514-5796-4174-a875-a48cb57a4fe1", "type": "linearaxis"}, {"id": "5e16dd18-2495-4802-b747-c2d5d40ff627", "type": "grid"}, {"id": "1f9e2ca7-88c0-4394-ab65-f4c96f73ad26", "type": "linearaxis"}, {"id": "47341cd5-9be7-47b9-9576-e09abc2e2488", "type": "grid"}, {"id": "d1ea5c26-8c19-42fe-9c2e-7071fd921adf", "type": "boxannotation"}, {"id": "08786c7e-0575-40f3-8cfa-030adb650929", "type": "glyphrenderer"}], "below": [{"id": "a89b6514-5796-4174-a875-a48cb57a4fe1", "type": "linearaxis"}], "left": [{"id": "1f9e2ca7-88c0-4394-ab65-f4c96f73ad26", "type": "linearaxis"}], "y_range": {"id": "4dc7cc72-cd52-4613-aaa2-ec93471f694b", "type": "datarange1d"}, "tool_events": {"id": "a7e57d1e-52a2-408d-9c53-1e2eadc7b1f1", "type": "toolevents"}}}, {"id": "1f9e2ca7-88c0-4394-ab65-f4c96f73ad26", "type": "linearaxis", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}, "ticker": {"id": "27375dd5-6ffd-418e-a2bb-7dfcee967f0e", "type": "basicticker"}, "formatter": {"id": "5b7afacf-63d7-4ccc-8752-47687f2cc6a1", "type": "basictickformatter"}}}, {"id": "dbbfac54-7529-4686-b18b-288f0ece3d19", "type": "wheelzoomtool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "2083997a-0bd7-46bc-b46c-fd537f7bc5b0", "type": "boxzoomtool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}, "overlay": {"id": "d1ea5c26-8c19-42fe-9c2e-7071fd921adf", "type": "boxannotation"}}}, {"id": "60c5f5c0-699a-4457-8ee4-4ab4ae59fea5", "type": "resizetool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "5e16dd18-2495-4802-b747-c2d5d40ff627", "type": "grid", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}, "ticker": {"id": "6e344350-1f50-4314-aaba-922a4f9d0f5c", "type": "basicticker"}}}, {"id": "b83aaff2-f295-4e62-a7c5-a56f848dbbd0", "type": "columndatasource", "attributes": {"data": {"x": [1, 2], "y": [3, 4]}, "callback": null, "column_names": ["x", "y"]}}, {"id": "a7e57d1e-52a2-408d-9c53-1e2eadc7b1f1", "type": "toolevents", "attributes": {}}, {"id": "27375dd5-6ffd-418e-a2bb-7dfcee967f0e", "type": "basicticker", "attributes": {}}, {"id": "ca5882e6-81a2-4ceb-a9d3-d459e1597306", "type": "circle", "attributes": {"x": {"field": "x"}, "line_color": {"value": "#1f77b4"}, "fill_color": {"value": "#1f77b4"}, "y": {"field": "y"}}}, {"id": "f7502b7f-436b-4346-b6d8-1b38ec8b952f", "type": "datarange1d", "attributes": {"callback": null}}, {"id": "6e344350-1f50-4314-aaba-922a4f9d0f5c", "type": "basicticker", "attributes": {}}, {"id": "a89b6514-5796-4174-a875-a48cb57a4fe1", "type": "linearaxis", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}, "ticker": {"id": "6e344350-1f50-4314-aaba-922a4f9d0f5c", "type": "basicticker"}, "formatter": {"id": "08eea83f-0d3a-40b8-94b8-39c254ab4256", "type": "basictickformatter"}}}, {"id": "5265f945-25ed-438a-8dbb-8ed4ffd8cc88", "type": "helptool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "3875ebde-81d3-4d2b-8c0a-fdb3c62befb1", "type": "resettool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "8172ee67-a90f-4452-8bf2-06a9bb36989f", "type": "circle", "attributes": {"x": {"field": "x"}, "line_color": {"value": "#1f77b4"}, "fill_color": {"value": "#1f77b4"}, "fill_alpha": {"value": 0.1}, "line_alpha": {"value": 0.1}, "y": {"field": "y"}}}, {"id": "08eea83f-0d3a-40b8-94b8-39c254ab4256", "type": "basictickformatter", "attributes": {}}, {"id": "47341cd5-9be7-47b9-9576-e09abc2e2488", "type": "grid", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}, "ticker": {"id": "27375dd5-6ffd-418e-a2bb-7dfcee967f0e", "type": "basicticker"}, "dimension": 1}}, {"id": "5b7afacf-63d7-4ccc-8752-47687f2cc6a1", "type": "basictickformatter", "attributes": {}}, {"id": "065744d9-e11f-4f4f-81de-1fcff22fba0f", "type": "previewsavetool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "4d60f7b2-0da1-48d0-9c2c-659df516c0b9", "type": "pantool", "attributes": {"plot": {"id": "187abafd-5966-4ab2-b20f-946153f75b53", "subtype": "figure", "type": "plot"}}}, {"id": "08786c7e-0575-40f3-8cfa-030adb650929", "type": "glyphrenderer", "attributes": {"nonselection_glyph": {"id": "8172ee67-a90f-4452-8bf2-06a9bb36989f", "type": "circle"}, "selection_glyph": null, "hover_glyph": null, "glyph": {"id": "ca5882e6-81a2-4ceb-a9d3-d459e1597306", "type": "circle"}, "data_source": {"id": "b83aaff2-f295-4e62-a7c5-a56f848dbbd0", "type": "columndatasource"}}}, {"id": "d1ea5c26-8c19-42fe-9c2e-7071fd921adf", "type": "boxannotation", "attributes": {"line_color": {"value": "black"}, "top_units": "screen", "fill_alpha": {"value": 0.5}, "bottom_units": "screen", "left_units": "screen", "line_width": {"value": 2}, "plot": null, "fill_color": {"value": "lightgrey"}, "level": "overlay", "render_mode": "css", "line_alpha": {"value": 1.0}, "line_dash": [4, 4], "right_units": "screen"}}], "root_ids": ["187abafd-5966-4ab2-b20f-946153f75b53"]}, "title": "bokeh application", "version": "0.11.0"}};\n var render_items = [{"elementid": "edd70933-dd28-4546-b254-838bc492cb35", "modelid": "187abafd-5966-4ab2-b20f-946153f75b53", "docid": "16f6d3df-63fd-495d-9eec-ea3aab28b407"}];\n \n bokeh.embed.embed_items(docs_json, render_items);\n});\n</script>' div
(pdb) div '\n<div class="plotdiv" id="edd70933-dd28-4546-b254-838bc492cb35"></div>' and don't why don't image because far can tell followed embedding plots , apps boilerplate , copy-pasted code creating plot there:
both below taken directly bokeh website:
from bokeh.plotting import figure bokeh.embed import components plot = figure() plot.circle([1,2], [3,4]) script, div = components(plot) boilerplate:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>bokeh scatter plots</title> <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" /> <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script> <!-- copy/paste script here --> </head> <body> <!-- insert divs here --> </body> </html> so gives? why don't see bokeh plot? using pycharm , have read answer here might broken debugging though didn't use "little green button" don't think pycharm issue
my issue explained @bigreddot in comments.
changing simple_chart.html below solved issue.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>experiment bokeh</title> <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.js"></script> <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.min.css"> {{the_script|safe}} </head> <body> {{the_div|safe}} </body> </html> please note if still have issues (i.e. blank bokeh plots) , pycharm user, may due potential bug in recent update: pycharm 5.0.4 #143.1919.1. try running via terminal, if works there wrong pycharm, not code.
http://blog.jetbrains.com/pycharm/#post-3302
also, scroll down see how issue may have been resolved @ following links:
Comments
Post a Comment