Trouble embedding Bokeh plot into Flask app
I'm new both to Bokeh and Flask. I browsed related questions, tutorials, and looked at Bokeh docs but could not figure out what I'm doing wrong.
That being said, I want to create a simple web-app in which I "group together" various data reports and plots.
According to what I read, I came up with the following:
app.py:
... # imports
app = Flask(__name__, static_url_path='/static')
@app.route("/")
def index():
return render_template("index.html")
@app.route("/bokeh_test")
def bokeh_test():
script, div = components(sample_plot())
return render_template("bokeh_test.html", script=script, div=div)
def sample_plot():
"""
A random plot just for testing purposes.
:return: plot
"""
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
plot = figure(sizing_mode='scale_both', tools='pan', **PLOT_OPTIONS)
plot.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
# show(plot)
return plot
bokeh_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bokeh includes-->
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css" type="text/css" />
{{ script|safe }}
</head>
<body>
<div>
<h1>Bokeh sample</h1>
<div class='bokeh'>
{{ div|safe }}
</div>
</div>
</body>
</html>
Imagine in my index.html file I have a side bar with a link to bokeh_test.html. When I click it, all I see is the header "bokeh sample" but no plot.
If I uncomment the show(plot), a new tab is opened and the plot correctly displayed, so the problem seems not to be in the plot itself but in the way I try to embed it in bokeh_test.
I'm new to all this so maybe I'm doing something stupid but I haven't been able to figure it out and I'd appreciate some help.
PS. Not sure if might be related, but for this I created a python 3.6 environment from Anaconda 2, and I use this environment as the project interpreter.
python bokeh
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
add a comment |
I'm new both to Bokeh and Flask. I browsed related questions, tutorials, and looked at Bokeh docs but could not figure out what I'm doing wrong.
That being said, I want to create a simple web-app in which I "group together" various data reports and plots.
According to what I read, I came up with the following:
app.py:
... # imports
app = Flask(__name__, static_url_path='/static')
@app.route("/")
def index():
return render_template("index.html")
@app.route("/bokeh_test")
def bokeh_test():
script, div = components(sample_plot())
return render_template("bokeh_test.html", script=script, div=div)
def sample_plot():
"""
A random plot just for testing purposes.
:return: plot
"""
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
plot = figure(sizing_mode='scale_both', tools='pan', **PLOT_OPTIONS)
plot.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
# show(plot)
return plot
bokeh_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bokeh includes-->
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css" type="text/css" />
{{ script|safe }}
</head>
<body>
<div>
<h1>Bokeh sample</h1>
<div class='bokeh'>
{{ div|safe }}
</div>
</div>
</body>
</html>
Imagine in my index.html file I have a side bar with a link to bokeh_test.html. When I click it, all I see is the header "bokeh sample" but no plot.
If I uncomment the show(plot), a new tab is opened and the plot correctly displayed, so the problem seems not to be in the plot itself but in the way I try to embed it in bokeh_test.
I'm new to all this so maybe I'm doing something stupid but I haven't been able to figure it out and I'd appreciate some help.
PS. Not sure if might be related, but for this I created a python 3.6 environment from Anaconda 2, and I use this environment as the project interpreter.
python bokeh
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
1
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33
add a comment |
I'm new both to Bokeh and Flask. I browsed related questions, tutorials, and looked at Bokeh docs but could not figure out what I'm doing wrong.
That being said, I want to create a simple web-app in which I "group together" various data reports and plots.
According to what I read, I came up with the following:
app.py:
... # imports
app = Flask(__name__, static_url_path='/static')
@app.route("/")
def index():
return render_template("index.html")
@app.route("/bokeh_test")
def bokeh_test():
script, div = components(sample_plot())
return render_template("bokeh_test.html", script=script, div=div)
def sample_plot():
"""
A random plot just for testing purposes.
:return: plot
"""
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
plot = figure(sizing_mode='scale_both', tools='pan', **PLOT_OPTIONS)
plot.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
# show(plot)
return plot
bokeh_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bokeh includes-->
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css" type="text/css" />
{{ script|safe }}
</head>
<body>
<div>
<h1>Bokeh sample</h1>
<div class='bokeh'>
{{ div|safe }}
</div>
</div>
</body>
</html>
Imagine in my index.html file I have a side bar with a link to bokeh_test.html. When I click it, all I see is the header "bokeh sample" but no plot.
If I uncomment the show(plot), a new tab is opened and the plot correctly displayed, so the problem seems not to be in the plot itself but in the way I try to embed it in bokeh_test.
I'm new to all this so maybe I'm doing something stupid but I haven't been able to figure it out and I'd appreciate some help.
PS. Not sure if might be related, but for this I created a python 3.6 environment from Anaconda 2, and I use this environment as the project interpreter.
python bokeh
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
I'm new both to Bokeh and Flask. I browsed related questions, tutorials, and looked at Bokeh docs but could not figure out what I'm doing wrong.
That being said, I want to create a simple web-app in which I "group together" various data reports and plots.
According to what I read, I came up with the following:
app.py:
... # imports
app = Flask(__name__, static_url_path='/static')
@app.route("/")
def index():
return render_template("index.html")
@app.route("/bokeh_test")
def bokeh_test():
script, div = components(sample_plot())
return render_template("bokeh_test.html", script=script, div=div)
def sample_plot():
"""
A random plot just for testing purposes.
:return: plot
"""
PLOT_OPTIONS = dict(plot_width=600, plot_height=400)
SCATTER_OPTIONS = dict(size=12, alpha=0.5)
data = lambda: [random.choice([i for i in range(100)]) for r in range(10)]
plot = figure(sizing_mode='scale_both', tools='pan', **PLOT_OPTIONS)
plot.scatter(data(), data(), color="red", **SCATTER_OPTIONS)
# show(plot)
return plot
bokeh_test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bokeh includes-->
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.css" type="text/css" />
{{ script|safe }}
</head>
<body>
<div>
<h1>Bokeh sample</h1>
<div class='bokeh'>
{{ div|safe }}
</div>
</div>
</body>
</html>
Imagine in my index.html file I have a side bar with a link to bokeh_test.html. When I click it, all I see is the header "bokeh sample" but no plot.
If I uncomment the show(plot), a new tab is opened and the plot correctly displayed, so the problem seems not to be in the plot itself but in the way I try to embed it in bokeh_test.
I'm new to all this so maybe I'm doing something stupid but I haven't been able to figure it out and I'd appreciate some help.
PS. Not sure if might be related, but for this I created a python 3.6 environment from Anaconda 2, and I use this environment as the project interpreter.
python bokeh
python bokeh
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
edited Nov 26 '18 at 14:50
davidism
65.7k12178191
65.7k12178191
asked Nov 26 '18 at 4:31
TommyTommy
260414
asked Nov 26 '18 at 4:31
TommyTommy
260414
asked Nov 26 '18 at 4:31
TommyTommy
260414
260414
1
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33
add a comment |
1
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33
1
1
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33
add a comment |
1 Answer
1
active
oldest
votes
You are loading BokehJS version 0.12.13 from CDN in your template. The version there needs to match the version of Bokeh installed in your system exactly.
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474808%2ftrouble-embedding-bokeh-plot-into-flask-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are loading BokehJS version 0.12.13 from CDN in your template. The version there needs to match the version of Bokeh installed in your system exactly.
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
add a comment |
You are loading BokehJS version 0.12.13 from CDN in your template. The version there needs to match the version of Bokeh installed in your system exactly.
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
add a comment |
You are loading BokehJS version 0.12.13 from CDN in your template. The version there needs to match the version of Bokeh installed in your system exactly.
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
You are loading BokehJS version 0.12.13 from CDN in your template. The version there needs to match the version of Bokeh installed in your system exactly.
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
answered Nov 26 '18 at 6:34
bigreddotbigreddot
18.8k23568
18.8k23568
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
add a comment |
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
Thanks for adding it as an answer, I was about to suggest that myself. And thanks again for the help, this was quite a headache.
– Tommy
Nov 26 '18 at 6:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474808%2ftrouble-embedding-bokeh-plot-into-flask-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You are loading BokehJS version 0.12.13 from CDN in your template. Is that actually the version of Bokeh installed in your system? They need to match.
– bigreddot
Nov 26 '18 at 5:24
@bigreddot spot on! It seems that was the issue indeed! It was silly but I wonder how long more it would have taken me to figure that out, thanks a lot! By the way, I was actually hoping to get an answer from you as I saw you basically successfully answered all the related questions I bumped into.
– Tommy
Nov 26 '18 at 5:28
Well, this is actually a duplicate. I know I have given the same answer elsewhere, but I am not able to locate the earlier question offhand. But I will add an answer here.
– bigreddot
Nov 26 '18 at 6:33