I modeified the example flask_embed. My folder structure is as follows,
flask_embed
|
|--flask_embed.py
templates
|--index.html
|--embed.html
The modified code runs just fine.
If the port 5006 was changed to 5007, then the plot can not be shown and the plot link(http://localhost:5007/bkapp) can not be connected. However, the port 5007 runs fine in my another app.
My problem is why can’t I choose another port other than 5006?
flask_embed.py
from threading import Thread
from flask import Flask, render_template, request
from tornado.ioloop import IOLoop
from bokeh.embed import server_document
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure
from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature
from bokeh.server.server import Server
from bokeh.themes import Theme
app = Flask(__name__)
def bkapp(doc):
df = sea_surface_temperature.copy()
source = ColumnDataSource(data=df)
plot = figure(x_axis_type='datetime', y_range=(0, 25), y_axis_label='Temperature (Celsius)',
title="Sea Surface Temperature at 43.18, -70.43")
plot.line('time', 'temperature', source=source)
def callback(attr, old, new):
if new == 0:
data = df
else:
data = df.rolling(f"{new}D").mean()
source.data = ColumnDataSource.from_df(data)
slider = Slider(start=0, end=30, value=0, step=1, title="Smoothing by N Days")
slider.on_change('value', callback)
doc.add_root(column(slider, plot))
doc.theme = Theme(filename="theme.yaml")
@app.route('/',methods=['GET'])
def index():
return render_template('index.html')
@app.route('/home',methods=['POST'])
def home():
width = request.values['innerWidth']
height = request.values['innerHeight']
Thread(target=bk_worker).start()
script = server_document('http://localhost:5006/bkapp')
return render_template("embed.html", script=script, template="Flask")
def bk_worker():
server = Server({'/bkapp': bkapp}, io_loop=IOLoop(), allow_websocket_origin=["localhost:8000", "localhost:5006"])
server.start()
server.io_loop.start()
if __name__ == '__main__':
app.run(port=8000)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
</head>
<body>
<form id="ABCD" name="ABCD" action="home" method="POST">
<input type="hidden" id="ABCD_1" name="innerWidth" value='111'>
<input type="hidden" id="ABCD_2" name="innerHeight" value='222'>
</form>
<script>
window.onload = function(){
if(window.innerWidth) {
document.getElementById('ABCD_1').value = window.innerWidth;
document.getElementById('ABCD_2').value = window.innerHeight;
}
else if(document.documentElement.clientWidth) {
document.getElementById('ABCD_1').value = document.documentElement.clientWidth;
document.getElementById('ABCD_2').value = document.documentElement.clientHeight;
}
else if(document.body.clientWidth) {
document.getElementById('ABCD_1').value = document.body.clientWidth;
document.getElementById('ABCD_2').value = document.body.clientHeight;
}
document.forms['ABCD'].submit();
}
</script>
</body>
</html>
embed.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding a Bokeh Server With {{ framework }}</title>
</head>
<body>
<div>
This Bokeh app below served by a Bokeh server that has been embedded
in another web app framework. For more information see the section
<a target="_blank" href="https://docs.bokeh.org/en/latest/docs/user_guide/server.html#embedding-bokeh-server-as-a-library">Embedding Bokeh Server as a Library</a>
in the User's Guide.
</div>
{{ script|safe }}
</body>
</html>