CODEWITHSUNDEEP
htmlpython-3.xflask
alofgran
alofgran

Reputation: 477

Bokeh plot not showing in Flask

Problem: My Bokeh plot, implemented with Flask, is not showing in my browser. When I run the app, the Bokeh frame (with the tools), as well as the x-axis label show up, but no data is plotted inside.

Already tried: I've made sure that the Bokeh version mentioned in the HTML files is as others have suggested. I'm pretty sure I've exhausted the SO solutions presented already. I've used print statements throughout the program and determined that the data is actually collected, cleaned, and processed with the components module and passed to 'script'. So therefore, as far as I can tell, the code seems to be stuck at the 'last render_template line?

    from flask import Flask, render_template, request, redirect, session
    import pandas as pd
    import quandl
    from bokeh.plotting import figure, output_file, save
    from bokeh.embed import components
    from bokeh.io import show

    app = Flask(__name__) #create an instance of the flask class (named 'app') in the current file

    app.vars={} 

    @app.route('/')
    def main():
        return redirect('/index')

    @app.route('/index', methods=['GET'])
    def index():
        return render_template('index.html')

    @app.route('/plot', methods=['POST']) 
    def plot():
        app.vars['current_symbol'] = request.form['current_symbol'] 
        quandl.ApiConfig.api_key = 'CD38JS9JqAdmdeio9JPW'
        req_data = quandl.get_table('WIKI/PRICES',  ticker=app.vars['current_symbol'], qopts = {'columns':['ticker', 'date', 'adj_close']}, date = {'gte': '2017-11-01', 'lte': '2017-12-01'}, paginate = True)
        req_data.adj_close = round(req_data.adj_close, 2)  
        req_data = req_data.set_index('date')              
        cleaned_data = req_data.pivot(columns = 'ticker')  

        # Plot the data
        p = figure(x_axis_type='datetime', x_axis_label='Date', y_minor_ticks=2, plot_width = 800, plot_height = 600)
        p.line(x = cleaned_data.index, y = cleaned_data.adj_close, line_width = 2)
        script, div = components(p)                                  
        return render_template('plot.html', script=script, div=div)  

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

Here are the accompanying HTML files.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Stock Plotter</title>
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.js"></script>
        <!-- <link rel="icon" href="favicon.ico"> -->
        <title>Stock Plotter</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>
    <body>
        <div class=metanav>
        <h1>Stock Plotter</h1>
        <div>
            <form id="tickerform" action="/plot" method="POST">
                Ticker Symbol: <input type="text" name="current_symbol" placeholder="ticker symbol"></input> <!--Create a dropdown list with the following options=-->
                <div>
                    <input type="submit" value="Submit"></input> <!--Create the submit button-->
                </div>
            </form>
        </div>
    {{ script|safe }} <!--Marks the js scrips as safe for the web-->
    {{ div|safe }}

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

plot.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh**strong text**.org/bokeh/release/bokeh-1.2.0.min.js"></script>
        <title>Stock Plotter</title>
    </head>
    <body>
        <div class=page>
            <h1>Stock Plotter</h1>
            {{ script|safe }}
            {{ div|safe }}
        </div>
    </body>
</html>

I expect the plot to be visible, but it's not. No error messages are shown in the console.

Upvotes: 2

Views: 1434

Answers (2)

Jorge
Jorge

Reputation: 2239

Check this post:

Embedding multiple bokeh HTML plots into flask

It has a great example as to how to display bokeh figures in flask apps.

Upvotes: 1

alofgran
alofgran

Reputation: 477

For anyone looking for an answer, the problem with this code is that the plot definition (p.line...) has some problem with my defining the x and y values explicitly. Once I used the source argument, the plot appears as desired.

Upvotes: 0

Related Questions