Related: Embedding Bokeh plot in Django website results in blank page with no error message
Except this time I'm using the correct version.
I have code where all I want to see is a website with an upload button where after a csv is uploaded, a bokeh plot appears on the same page. Uploading of the csv works. With the debugger I can see I have lists x_of_pixels and y_of_pixels and now I should simply be able to generate a Bokeh plot of the one against the other.
However, after upload, no error occurs but no Bokeh plot appears either.
This function is in views.py and is called when the page loads
def list(request):
# ---------- from minimal-django-file-upload-example
newdoc = None
# 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 to the document list after POST
# return HttpResponseRedirect(reverse('myproject.myapp.views.list'))
else:
form = DocumentForm() # A empty, unbound form
documents = Document.objects.all()
csvfile = None
if len(documents) > 0:
if newdoc is None:
plot = figure()
script, div = components(plot, CDN)
else:
csvfile = newdoc.docfile.path
# read from csv
lines = []
with open(csvfile,"r") as f:
reader = csv.reader(f, delimiter = ",")
for row in reader:
lines.append(row)
x_of_pixels = []
y_of_pixels = []
x_value = 0
step = 1 #1.0/len(lines)
for row in lines:
y_value = float(row[0])
x_of_pixels.append(x_value)
y_of_pixels.append(y_value)
x_value += step
plot = figure()
plot.line(x_of_pixels, y_of_pixels, line_width=2)
script, div = components(plot, CDN)
else:
plot = figure()
script, div = components(plot, CDN)
# Render list page with the documents and the form
return render_to_response(
'list.html',
{'documents': documents, 'form': form, 'the_script': script, 'the_div': div},
context_instance=RequestContext(request)
)
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minimal Django File Upload Example</title>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.0.min.css">
{{the_script|safe}}
</head>
<body>
<!-- List of uploaded documents -->
{% if documents %}
<ul>
{% for document in documents %}
<li><a href="{{ document.docfile.url }}">{{ document.docfile.name }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No documents.</p>
{% endif %}
<!-- Upload form. Note enctype attribute! -->
<form action="{% url "list" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
<p>
{{ form.docfile.errors }}
{{ form.docfile }}
</p>
<p><input type="submit" value="Upload"/></p>
</form>
{{the_div|safe}}
</body>
</html>
The uploaded files display as you would expect as per the following example where I modified the code above from
I debugged and at the return render_to_response after uploading a csv I have the following values for form and script
script:
<script type="text/javascript">
Bokeh.$(function() {
var all_models = [{"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "57db162e-5877-4909-9014-3c699165bccb"}, "type": "PanTool", "id": "57db162e-5877-4909-9014-3c699165bccb"}, {"attributes": {"geometries": [], "tags": [], "doc": null, "id": "f85f7355-c842-4a9a-b8d0-1679ca49b96a"}, "type": "ToolEvents", "id": "f85f7355-c842-4a9a-b8d0-1679ca49b96a"}, {"attributes": {"tags": [], "doc": null, "renderers": [], "callback": null, "names": [], "id": "7357fef1-126a-446b-bc9c-4e19f8b7110f"}, "type": "DataRange1d", "id": "7357fef1-126a-446b-bc9c-4e19f8b7110f"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "id": "91f37553-38cb-4682-9b57-e3853ccbedde"}, "type": "PreviewSaveTool", "id": "91f37553-38cb-4682-9b57-e3853ccbedde"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "id": "68ca74ff-2109-492a-a3d1-49985275f75e"}, "type": "HelpTool", "id": "68ca74ff-2109-492a-a3d1-49985275f75e"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_width": {"value": 2}, "line_alpha": {"value": 1.0}, "doc": null, "tags": [], "y": {"field": "y"}, "x": {"field": "x"}, "id": "ba0507fa-cfc9-4e0e-a6c9-71911f0c628f"}, "type": "Line", "id": "ba0507fa-cfc9-4e0e-a6c9-71911f0c628f"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "55361a47-0c00-4708-ad60-f30eb5face60"}, "type": "WheelZoomTool", "id": "55361a47-0c00-4708-ad60-f30eb5face60"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "id": "eb16229f-1179-49f7-811e-ec219fe37d99"}, "type": "ResizeTool", "id": "eb16229f-1179-49f7-811e-ec219fe37d99"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "e9899588-262e-4531-9a54-cca8e870f01f"}, "ticker": {"type": "BasicTicker", "id": "4b89319f-32b5-4230-a29e-1955e2487584"}, "id": "8f40d18b-ed3d-4904-9bb3-50492eaf2312"}, "type": "LinearAxis", "id": "8f40d18b-ed3d-4904-9bb3-50492eaf2312"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "line_width": {"value": 2}, "line_alpha": {"value": 0.1}, "doc": null, "tags": [], "y": {"field": "y"}, "x": {"field": "x"}, "id": "6cdffdad-b986-4471-9e39-786a0e663a03"}, "type": "Line", "id": "6cdffdad-b986-4471-9e39-786a0e663a03"}, {"attributes": {"doc": null, "id": "381a8e2d-8d9d-47b6-a950-615b10b0e65d", "tags": []}, "type": "BasicTickFormatter", "id": "381a8e2d-8d9d-47b6-a950-615b10b0e65d"}, {"attributes": {"column_names": ["y", "x"], "tags": [], "doc": null, "selected": {"2d": {"indices": []}, "1d": {"indices": []}, "0d": {"indices": [], "flag": false}}, "callback": null, "data": {"y": [346.01800537109375, 301.10101318359375, 290.2510070800781, 273.43902587890625, 263.635009765625, 219.71701049804688, 208.6840057373047, 194.84201049804688, 174.60800170898438, 172.82101440429688, 171.29000854492188, 161.91400146484375, 155.13400268554688, 154.51600646972656, 152.45101928710938, 130.87899780273438, 127.01300811767578, 124.02900695800781, 123.44900512695312, 121.52900695800781, 117.64100646972656, 111.00700378417969, 107.00601196289062, 102.16200256347656, 97.97200775146484, 96.56700134277344, 93.14000701904297, 90.73800659179688, 86.91800689697266, 86.13200378417969, 85.54700469970703, 83.2800064086914, 81.91100311279297, 78.37200164794922, 76.67300415039062, 72.34800720214844, 69.76700592041016, 68.82600402832031, 65.63700103759766, 62.92400360107422, 61.75100326538086, 58.49800491333008, 58.27900695800781, 57.90500259399414, 56.74200439453125, 56.49900436401367, 56.487003326416016, 56.46900177001953, 55.802001953125, 55.41100311279297, 55.13800048828125, 54.75199890136719, 54.52700424194336, 53.53400421142578, 52.51499938964844, 52.084999084472656, 51.038002014160156, 50.5670051574707, 48.31000518798828, 45.557003021240234, 45.397003173828125, 45.11300277709961, 45.09300231933594, 44.41800308227539, 44.406002044677734, 43.371002197265625, 41.519004821777344, 41.18600082397461, 40.906002044677734, 40.87300109863281, 40.17100143432617, 39.49400329589844, 39.45500183105469, 39.37000274658203, 39.263999938964844, 38.625999450683594, 38.454002380371094, 37.56800079345703, 37.207000732421875, 36.342002868652344, 35.209999084472656, 34.98400115966797, 34.34700012207031, 34.138999938964844, 32.698001861572266, 32.51300048828125, 31.816001892089844, 31.48200035095215, 31.41666603088379, 31.170001983642578], "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89]}, "id": "a125efaa-8772-4fd7-a422-b51aadb38528"}, "type": "ColumnDataSource", "id": "a125efaa-8772-4fd7-a422-b51aadb38528"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "id": "3e895892-20e5-4e91-962f-82e646c47052"}, "type": "ResetTool", "id": "3e895892-20e5-4e91-962f-82e646c47052"}, {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e", "attributes": {"x_range": {"type": "DataRange1d", "id": "e44661a3-e575-4b91-98f6-875b599c5bae"}, "right": [], "tags": [], "y_range": {"type": "DataRange1d", "id": "7357fef1-126a-446b-bc9c-4e19f8b7110f"}, "renderers": [{"type": "LinearAxis", "id": "8f40d18b-ed3d-4904-9bb3-50492eaf2312"}, {"type": "Grid", "id": "5947fdee-31b2-4869-a64f-0c1bfd2def6e"}, {"type": "LinearAxis", "id": "2a419e65-8287-43a8-8c5d-0c95b91571be"}, {"type": "Grid", "id": "2b132b96-66c3-4f2d-b48d-828e9aaf2142"}, {"type": "GlyphRenderer", "id": "d2f6a1e1-acc3-42e0-acef-a89d57e03c5e"}], "extra_y_ranges": {}, "extra_x_ranges": {}, "tool_events": {"type": "ToolEvents", "id": "f85f7355-c842-4a9a-b8d0-1679ca49b96a"}, "above": [], "doc": null, "id": "58794904-3226-4a3d-be06-0d2fefdd309e", "tools": [{"type": "PanTool", "id": "57db162e-5877-4909-9014-3c699165bccb"}, {"type": "WheelZoomTool", "id": "55361a47-0c00-4708-ad60-f30eb5face60"}, {"type": "BoxZoomTool", "id": "df53972f-ab85-4031-84f2-ebb1b6f219c4"}, {"type": "PreviewSaveTool", "id": "91f37553-38cb-4682-9b57-e3853ccbedde"}, {"type": "ResizeTool", "id": "eb16229f-1179-49f7-811e-ec219fe37d99"}, {"type": "ResetTool", "id": "3e895892-20e5-4e91-962f-82e646c47052"}, {"type": "HelpTool", "id": "68ca74ff-2109-492a-a3d1-49985275f75e"}], "below": [{"type": "LinearAxis", "id": "8f40d18b-ed3d-4904-9bb3-50492eaf2312"}], "left": [{"type": "LinearAxis", "id": "2a419e65-8287-43a8-8c5d-0c95b91571be"}]}}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "formatter": {"type": "BasicTickFormatter", "id": "381a8e2d-8d9d-47b6-a950-615b10b0e65d"}, "ticker": {"type": "BasicTicker", "id": "7aee15cb-0bec-4465-bb50-dcd562e92cb6"}, "id": "2a419e65-8287-43a8-8c5d-0c95b91571be"}, "type": "LinearAxis", "id": "2a419e65-8287-43a8-8c5d-0c95b91571be"}, {"attributes": {"tags": [], "doc": null, "renderers": [], "callback": null, "names": [], "id": "e44661a3-e575-4b91-98f6-875b599c5bae"}, "type": "DataRange1d", "id": "e44661a3-e575-4b91-98f6-875b599c5bae"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "dimensions": ["width", "height"], "tags": [], "doc": null, "id": "df53972f-ab85-4031-84f2-ebb1b6f219c4"}, "type": "BoxZoomTool", "id": "df53972f-ab85-4031-84f2-ebb1b6f219c4"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "dimension": 0, "ticker": {"type": "BasicTicker", "id": "4b89319f-32b5-4230-a29e-1955e2487584"}, "id": "5947fdee-31b2-4869-a64f-0c1bfd2def6e"}, "type": "Grid", "id": "5947fdee-31b2-4869-a64f-0c1bfd2def6e"}, {"attributes": {"nonselection_glyph": {"type": "Line", "id": "6cdffdad-b986-4471-9e39-786a0e663a03"}, "data_source": {"type": "ColumnDataSource", "id": "a125efaa-8772-4fd7-a422-b51aadb38528"}, "tags": [], "doc": null, "selection_glyph": null, "id": "d2f6a1e1-acc3-42e0-acef-a89d57e03c5e", "glyph": {"type": "Line", "id": "ba0507fa-cfc9-4e0e-a6c9-71911f0c628f"}}, "type": "GlyphRenderer", "id": "d2f6a1e1-acc3-42e0-acef-a89d57e03c5e"}, {"attributes": {"plot": {"subtype": "Figure", "type": "Plot", "id": "58794904-3226-4a3d-be06-0d2fefdd309e"}, "tags": [], "doc": null, "dimension": 1, "ticker": {"type": "BasicTicker", "id": "7aee15cb-0bec-4465-bb50-dcd562e92cb6"}, "id": "2b132b96-66c3-4f2d-b48d-828e9aaf2142"}, "type": "Grid", "id": "2b132b96-66c3-4f2d-b48d-828e9aaf2142"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "4b89319f-32b5-4230-a29e-1955e2487584", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "4b89319f-32b5-4230-a29e-1955e2487584"}, {"attributes": {"tags": [], "doc": null, "mantissas": [2, 5, 10], "id": "7aee15cb-0bec-4465-bb50-dcd562e92cb6", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "7aee15cb-0bec-4465-bb50-dcd562e92cb6"}, {"attributes": {"doc": null, "id": "e9899588-262e-4531-9a54-cca8e870f01f", "tags": []}, "type": "BasicTickFormatter", "id": "e9899588-262e-4531-9a54-cca8e870f01f"}];
Bokeh.load_models(all_models);
var plots = [{'modeltype': 'Plot', 'elementid': '0e3c4757-9abe-4c0b-b9f4-09682fcb4ded', 'modelid': '58794904-3226-4a3d-be06-0d2fefdd309e'}];
for (idx in plots) {
var plot = plots[idx];
var model = Bokeh.Collections(plot.modeltype).get(plot.modelid);
Bokeh.logger.info('Realizing plot:')
Bokeh.logger.info(' - modeltype: ' + plot.modeltype);
Bokeh.logger.info(' - modelid: ' + plot.modelid);
Bokeh.logger.info(' - elementid: ' + plot.elementid);
var view = new model.default_view({
model: model,
el: '#' + plot.elementid
});
Bokeh.index[plot.modelid] = view;
}
});
</script>
And if you look at the script you can see that "data" does have the correct x and y values:
"data": {"y": [346.01800537109375, 301.10101318359375, 290.2510070800781, 273.43902587890625, 263.635009765625, 219.71701049804688, 208.6840057373047, 194.84201049804688, 174.60800170898438, 172.82101440429688, 171.29000854492188, 161.91400146484375, 155.13400268554688, 154.51600646972656, 152.45101928710938, 130.87899780273438, 127.01300811767578, 124.02900695800781, 123.44900512695312, 121.52900695800781, 117.64100646972656, 111.00700378417969, 107.00601196289062, 102.16200256347656, 97.97200775146484, 96.56700134277344, 93.14000701904297, 90.73800659179688, 86.91800689697266, 86.13200378417969, 85.54700469970703, 83.2800064086914, 81.91100311279297, 78.37200164794922, 76.67300415039062, 72.34800720214844, 69.76700592041016, 68.82600402832031, 65.63700103759766, 62.92400360107422, 61.75100326538086, 58.49800491333008, 58.27900695800781, 57.90500259399414, 56.74200439453125, 56.49900436401367, 56.487003326416016, 56.46900177001953, 55.802001953125, 55.41100311279297, 55.13800048828125, 54.75199890136719, 54.52700424194336, 53.53400421142578, 52.51499938964844, 52.084999084472656, 51.038002014160156, 50.5670051574707, 48.31000518798828, 45.557003021240234, 45.397003173828125, 45.11300277709961, 45.09300231933594, 44.41800308227539, 44.406002044677734, 43.371002197265625, 41.519004821777344, 41.18600082397461, 40.906002044677734, 40.87300109863281, 40.17100143432617, 39.49400329589844, 39.45500183105469, 39.37000274658203, 39.263999938964844, 38.625999450683594, 38.454002380371094, 37.56800079345703, 37.207000732421875, 36.342002868652344, 35.209999084472656, 34.98400115966797, 34.34700012207031, 34.138999938964844, 32.698001861572266, 32.51300048828125, 31.816001892089844, 31.48200035095215, 31.41666603088379, 31.170001983642578], "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89]}
form:
<tr><th><label for="id_docfile">Select a file:</label></th><td><input id="id_docfile" name="docfile" type="file" /></td></tr>
Why don't I see a Bokeh plot appear after upload even though I specified the_div and the_script variables in the header and body of list.html?
