Search code examples
pythongoogle-chromeflaskbokeh

Embedding Bokeh server into Flask app while retaining plot size

I found an example in the Bokeh github of a Flask app that embeds a Bokeh server here. When I run it and open the Flask URL in Google Chrome, I see the embedded plot. When I directly open the Bokeh URL in my Google Chrome, I also see the plot. However, the two plots are of different size. Below are two screenshots of the same size that illustrate this.

The first one is the direct Bokeh plot, and represents the correct size. The second one is the embedded plot and is too small. How do I fix the example so that the embedded plot size matches the standalone plot size?

I should note that in Firefox, the plots appear to be the same size.

Standalone Bokeh Embedded Bokeh

Solution

  • It looks like the bokeh plot is embedded in a template and they also use a theme.yaml file to control the plot size.

    In the example, the template is loaded here:

    @app.route('/', methods=['GET'])
def bkapp_page():
    script = server_document('http://localhost:5006/bkapp')
    return render_template("embed.html", script=script, template="Flask")

    and you can see the template here.

    The theme.yaml file appears to provide width/height control for the plot, referenced here in the Flask server code:

        doc.theme = Theme(filename="theme.yaml")

    see here for the contents of theme.yaml.

    Are you using the same theme.yaml and embed.html template? If you change the width and height in the theme.yaml does your plot change size in the Flask app?