I’m new with bokeh, actually, a have a working plot, where the date came from df, and using script,div = component(plot) I can see this plot on flask app. But some plots have a lot of info, So I’m trying to use the drop down row to select what will be displayed, like here (Layout with Drop Down Select Option without Bokeh Server - #10 by Vishal_Agarwal), if I add this example on juniper notebook I have no problems, but If I change “show(row(s, col))” to “script,div = row(s,col))” I have nothing. what a good way to have drop down working with flask app ?
Hi Bryan, I changed from “show(row(s, col))” to “script,div = component(row(s,col)))”, but the page is still blank. Other plots(without drop-down) are working…
@fsantos_25 There is not nearly enough information to speculate. It always advised to provide a completeMinimal Reproducible Example in order to help others help you.
This is my test script. If I change “script,div = components” to show(row(s, col)) and remove the flask part, I’m able to see the plot and use the drop down menu. But the flask part is ok, as I can just remove the drop down menu and change to the component command to have it working without dropdown menu on flask.
{has too much import because I was testing other possible ways.
from bokeh.layouts import row, column
from bokeh.models import CustomJS, Select
from bokeh.plotting import figure, show
from bokeh.embed import components
from bokeh.plotting import figure
import jinja2
from flask import Flask
from bokeh.models import ColumnDataSource, NumeralTickFormatter
from bokeh.palettes import Category20
from bokeh.layouts import gridplot
import pandas as pd
from bokeh.models import ColumnDataSource, HoverTool, Legend
from bokeh.plotting import figure, show
from bokeh.palettes import Category10
import random
import string
from bokeh.resources import CDN
p1 = figure()
p1.circle([1,2,3], [1,3,2], size=20)
p2 = figure(visible=False)
p2.line([1,2,3], [1,3,2], line_width=3)
col = column(p1, p2)
s = Select(value="circle", options=["circle", "line"])
s.js_on_change('value', CustomJS(args=dict(s=s, col=col), code="""
for (const plot of col.children) {
plot.visible = false
}
if (s.value == "circle") {
col.children[0].visible = true
}
else if (s.value == "line") {
col.children[1].visible = true
}
"""))
script,div = components(row(s, col))
resources=CDN.render()
template = jinja2.Template("""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
{{resources|safe}}
{{script|safe}}
<title>Bokeh Charts</title>
</head>
<body>
<div class="container">
<h1 class="text-center py-4">Responsive Chart with Bokeh, Flask and Python</h1>
<div class="row mb-5">
<div>
{{ div | safe }}
</div>
</div>
</body>
</html>""")
app = Flask(__name__)
@app.route('/')
def hello_bokeh():
return template.render(script=script, div=div)
if __name__ == '__main__':
app.run(debug=True)
Hi @fsantos_25 please edit your post to use code formatting so that the code is intelligible (either with the </> icon on the editing toolbar, or triple backtick ``` fences around the code blocks)
No, you haven’t. I am talking formatting the code in your post above so that your code can actually be understood. Python code is not intelligible unless indentation level is preserved correctly, which will only happen if you edit your post to use the code formatting options I described just above.
Edit: perhaps the Discourse docs on code formatting will be helpful:
Do you actually have python Bokeh version 2.4.3 installed? he JS versions and Python version must match exactly. So if you actually have a recent Bokeh 3.x installed, then loading a mismatched version of BokehJS is definitely a reason things would not work.
Which shows only the main bundle being loaded, and an error indicative of a failure to load the widgets bundle. However, it looks like you are loading the main bundle twice, once in minified form and another time in un-minified form: