Embedding Bokeh Server in Flask

Community Support
1

I’m trying to embed an interactive plot (active) in a flask app. However, I can’t get the plot to display in the web browser.

I’m running:

  • Windows 7
  • Internet Explorer (11.0.9600); I’ve tried testing on latest Firefox and Chrome versions as well – no luck
  • Python 3.6
  • Bokeh 0.12.11
    (Folder/directory format)

—app2

------app.py

------test_for_animation.py

------templates

---------index.html

#test_for_animation.py
from bokeh.models import HoverTool, CrosshairTool, ColumnDataSource
from bokeh.layouts import widgetbox, row
from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import TextInput, Button
from random import randrange
f=figure(x_range=(0,11), y_range=(0,11))
source = ColumnDataSource(data=dict(x=, y=))
f.circle(x=“x”, y=“y”, size=8, color=“olive”, source=source)
def update():
new_data = dict(x=[randrange(1,10)], y=[randrange(1,10)])
source.stream(new_data, rollover=15)
#print(source.data)
curdoc().add_root(f)
curdoc().add_periodic_callback(update, 1000)

``

#app.py
from flask import Flask, render_template
from bokeh.client import pull_session
from bokeh.embed import server_session
app = Flask(name)
@app.route(’/’, methods=[‘GET’])
def bkapp_page():
session = pull_session(url=“http://localhost:5006/test_for_animation”)
script = server_session(None, session.id, url=‘http://localhost:5006/test_for_animation’)
return render_template(“index.html”, script=script, template=“Flask”)
if name == ‘main’:
app.run(port=8080, debug=True)

``

#index.html

Document

I am a heading

{{script|indent(4)|safe}}

I am a footer

``

I open two prompts and run:

in prompt 1) bokeh serve path/to/file/app2/test_for_animation.py --allow websocket-origin=localhost:8080

in prompt 2) python path/to/file/app2/app.py

I then navigate to http://127.0.0.1:8080/ but all I see is the “I am a heading” and “I am a footer” text, but with no plot. Trying to navigate to localhost:8080/ yields the same.

Sorry for the extensive question and if I missed anything. I can usually get by from Bokeh docs, Git, Stack, etc. but this one is really proving bothersome. Thanks in advance.

-Austin

2

Got it. I wasn’t listening on all of the necessary ports. An additional ‘–allow websocket-origin=localhost:5006’ was needed in the prompt using the ‘bokeh serve’ command.