Bokeh Problem Rendering Plot in Flask App

Question

My flask driven app works as expected with the high level Bar plot from Bokeh.

I now want to change the plot to a horizontal bar plot and found this SO answer.

My code minus the formatting for brevity:

from flask import Flask, render_template
from bokeh.embed import components
from bokeh.util.string import encode_utf8
from bokeh.plotting import figure
import pandas as pd

app = Flask(__name__)

@app.route('/')
def test():
    kws = ["one", "two", "cat", "dog"]
    count = [23, 45, 11, 87]
    df = pd.DataFrame({"kw": kws,
                       "count": count
                       })

    df.sort("count", inplace=True)
    df.set_index("kw", inplace=True)
    series = df['count']

    p = figure(width=1000, height=1000, y_range=series.index.tolist())

    j = 1
    for k, v in series.iteritems():
        w = v / 2 * 2
        p.rect(x=v/2,
                y=j,
                width=w,
                height=0.4,
                color=(76, 114, 176),
                width_units="screen",
                height_units="screen"
                )
        j += 1

    #### get components ####
    script, div = components(p)

    page = render_template('test.html', div=div, script=script)
    return encode_utf8(page)


if __name__ == "__main__":
    app.run(debug=True,
            threaded=False
            )

Located in templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.0.min.css" rel="stylesheet" type="text/css">
    <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.0.min.js"></script>
</head>

<body>

{{ div | safe }}
{{ script | safe }}

</body>
</html>

This answer works in testing with show(p). However the actual application takes the p object and gets the components div and script and embeds those in html.

When I run the app with debug=True I do not get an error just a hanging page.

EDIT: "Hang" is not accurate. I get a blank page.

You are loading a very old version of BokehJS from CDN in your template. Are you actually using Bokeh version 0.9 ? If not, the CDN versions should match the version that you have installed. — bigreddot
– bigreddot, Commented Jun 30, 2016 at 18:12
Good point...forgot about that. I'm using Bokeh 0.10.0 will change and try again. — wbg
– wbg, Commented Jun 30, 2016 at 18:19
@bigreddot that fixed it. Stoopid mistake...put that comment in an answer and I'll accept it. Thank you. — wbg
– wbg, Commented Jun 30, 2016 at 18:21

bigreddot · Accepted Answer · 2019-11-23 01:03:07Z

4

Following Bigreddot's advice, I checked my version of Bokeh and adjusted the BokehJS version to match.

conda list bokeh yielded:

bokeh                     0.10.0                   py27_0

I then changed my html and the minimal example works as expected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.css" rel="stylesheet" type="text/css">
    <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.10.0.min.js"></script>
</head>

<body>

{{ div | safe }}
{{ script | safe }}

</body>
</html>

edited Nov 23, 2019 at 1:03

bigreddot

34.8k5 gold badges73 silver badges128 bronze badges

answered Jun 30, 2016 at 19:43

wbg

9283 gold badges16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alcognito · Accepted Answer · 2020-05-10 06:50:13Z

2

In case anyone comes across this from now on please note that bokeh.util.string import encode_utf8 has been removed since bokeh==2.0.0

In my case, with a flask app (using flask==1.1.2 and bokeh==2.0.2), I was simply able to delete this line from the code and in the html render template, just return html rather than return encode_utf8(html).

answered May 10, 2020 at 6:50

Alcognito

417 bronze badges

Collectives™ on Stack Overflow

Bokeh Problem Rendering Plot in Flask App

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related