How to embed row component on flask app?

Hi Guys,

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 ?

You need to use one of the APIs for embedding, i.e. json_items or components.

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 complete Minimal Reproducible Example in order to help others help you.

Hi Bryan,

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/bootstrap@5.2.2/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)

I did it, I returning the complete HTML from jinja2 template.

Hi Bryan,

You did it here: Layout with Drop Down Select Option without Bokeh Server - #11 by Bryan. But how can move from the show() function to the component() function in order to have the same behavior on the Flask app?

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:

Is it better now ?

         <script src="http://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>

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.

Hi Bryan,

Yep I’m running bokeh 2.4.3, see:

(base) fsantos@fsantos-mbp log % bokeh info
Python version : 3.9.13 (main, Aug 25 2022, 18:29:29)
IPython version : 7.31.1
Tornado version : 6.1
Bokeh version : 2.4.3
BokehJS static path : /Users/fsantos/opt/anaconda3/lib/python3.9/site-packages/bokeh/server/static
node.js version : (not installed)
npm version : (not installed)
Operating system : macOS-10.16-x86_64-i386-64bit
(base) fsantos@fsantos-mbp log %

Actually, my bokeh plots without a drop-down menu are working.

@fsantos_25 You need to include the separate optional bokeh-widgets JS bundle if you want to use widgets. See the docs at the bottom of this section:

https://docs.bokeh.org/en/latest/docs/user_guide/output/embed.html#components

The widgets bundle is separate so that users who are not using widgets do not have to pay the cost of loading it.

Hi Bryan,

Which widget file are you talking about? Because I already have the line below.

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>

My answer was based off this:

Screenshot 2023-06-06 at 09.23.451848×292 55.5 KB

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:

<script src="http://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.js"></script>

This is certainly not intended or supported usage. Removing one of the duplicate loads resolved the issue for me.

Hi Bryan,

Thank you too much. I removed the duplication and was able to reproduce your previous example. I’ll start from there. Thank you.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.