I am trying to load a bokeh figure in my flask app and I can't get the plot to render in my template. I am using bokeh.embed components in exactly the same way that it's done in all the examples:
script1, div1 = components(p)
cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]
I then pass the components to render_template like this:
return render_template("plot.html", script1=script1, div1=div1, cdn_css=cdn_css, cdn_js=cdn_js )
When plot.html loads, it has all the components in it, but for some reason the plot simply isn't displaying. Here's what the scripts look like in the rendered template:
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cyborg/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js type="text/css" />
<script type="text/javascript" src=https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css></script>
The script and div are both in the body and look correct. However I'm getting an error in javascript:
Uncaught ReferenceError: Bokeh is not defined
at HTMLDocument.fn
Why am I getting this error if I'm loading the bokeh libraries in the head? Please help.
You appear to have your CSS and JS loads mixed up. You are loading bokeh.min.js in the <link rel="stylesheet"...> tag, and loading bokeh.min.css in the <script> tag.