CODEWITHSUNDEEP
pythonplotflaskbokeh
coey
coey

Reputation: 1

Trouble displaying Bokeh toolbar

I'm new to Bokeh and Flask python in general but i have managed to create a graph and then output it on my browser via flask. The only problem is that im not getting the "Bokeh tool bar" next to my graph.

My code looks like this

from flask import Flask, render_template, request
import pandas as pd
import csv
from bokeh.plotting import figure
from bokeh.io import show
from bokeh.embed import components
from bokeh.models import Range1d
from bokeh.resources import CDN

app = Flask(__name__)


# Create the main plot
    def create_figure():
    xvals = []
    yvals = []
    with open('test.csv') as csvfile:
        readCSV = csv.reader(csvfile, delimiter=',')

        for row in readCSV:
            xvalue = row[0]
            yvalue = row[1]
            xvals.append(xvalue)
            yvals.append(yvalue)

    p = figure(plot_width=400, plot_height=400, x_range=(0, 20))
    p.y_range = Range1d(0, 15)
    p.circle(xvals, yvals, size=10)
    return p
# Index page
@app.route('/')
def index():
    plot = create_figure()
    script, div = components(plot)
    cdn_js = CDN.js_files[0]
    cdn_css = CDN.css_files[0]
    return render_template("index.html", script=script, div=div, 
    cdn_js=cdn_js, 
    cdn_css=cdn_css)
    # With debug=True, Flask server will auto-reload
    # when there are code changes
    if __name__ == '__main__':
        app.run(port=5000, debug=True)

and my index.html code looks like this:

<html>
<head>
<link href={{ cdn_css|safe }} type="text/css" />
<script type="text/javascript" src={{ cdn_js|safe }}></script>
</head>
<body>
<H1>First</H1>

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

</body>
</html>

Am i missing something? When i output the graph to a output_file i get the toolbar. Any help would be appreciated.

Upvotes: 0

Views: 1728

Answers (2)

ersan
ersan

Reputation: 21

I had the same problem. I can't explain the reason, but this example works: realpython github

Upvotes: 2

Mateusz Paprocki
Mateusz Paprocki

Reputation: 156

Most likely this is this https://github.com/bokeh/bokeh/issues/7497 issue. The available workarounds, as I posted in the thread, are as follows:

There are two options. If you want to keep the toolbar as part of a plot, then you will have to create a ToolbarPanel manually and add it with add_layout() to a plot. Alternatively you can have a toolbar detached from a plot, as an element of a bigger layout, like it happens with grid plots. In both cases the key is to set plot.toolbar_location = None, to disable creation of the default ToolbarPanel.

Please follow this issue so that you can be aware of future developments.

Upvotes: 2

Related Questions