Skip to content

Commit

Permalink
Render plot on page, interactivity not working yet.
Browse files Browse the repository at this point in the history
  • Loading branch information
thewchan committed Jun 26, 2020
1 parent 88b0968 commit 4ba9ebd
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 18 deletions.
39 changes: 35 additions & 4 deletions app.py
Original file line number Diff line number Diff line change
@@ -1,28 +1,59 @@
"""Display a stock ticker visualization based on user input."""
import json
from flask import Flask, render_template, request, redirect
from bokeh.embed import json_item
from bokeh.resources import CDN
from ticker import ticker


app = Flask(__name__)
app.vars = {}


def create_ticker(symbol):
"""Render ticker json object from stock symbol."""
p = ticker(symbol)

return p


@app.route('/', methods=('GET', 'POST'))
def index():
"""Render the app's main page."""
if request.method == 'GET':
# Default gives IBM's ticker when first loaded.
symbol = 'IBM'
return render_template('index.html', symbol=symbol)
app.vars['symbol'] = 'IBM'
p = create_ticker(app.vars['symbol'])
p_json = json.dumps(json_item(p, 'myplot'))
return render_template('index.html',
symbol=app.vars['symbol'],
p=p,
p_json=p_json,
)

else:
# User submitted a ticker symbol aka method = 'POST'
symbol = request.form['symbol']
return render_template('index.html', symbol=symbol)
app.vars['symbol'] = request.form['symbol']
p = create_ticker(app.vars['symbol'])
json.dumps(json_item(p, 'myplot'))
return render_template('index.html',
symbol=app.vars['symbol'],
p=p,
p_json=p_json,
)


@app.route('/about')
def about():
return render_template('about.html')


@app.route('/plot')
def plot():
"""Render json item from bokeh plot."""
p = create_ticker(app.vars['symbol'])
return json.dumps(json_item(p, 'myplot'))


if __name__ == '__main__':
app.run(port=33507)
25 changes: 11 additions & 14 deletions templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,11 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Skeleton application demoing Heroku and Flask integration.">
<meta name="author" content="@gotoariel">
<!-- <link rel="icon" href="favicon.ico"> -->

<title>A simple stock price time series visualizer</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.0.min.js" integrity="sha384-YobFyzPeVUsFQydHkJGsJL1kyfHnWxOlPc3EwaV22TmBaeGoXHLWx5aRRVPS9xlE" crossorigin="anonymous">
</script><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.0.min.js" integrity="sha384-NuAg9+TcTQQqvQCTtkCneRrpkTiMhhfiq0KHiBzx8ECiKiLWXHN6i6ia3q7b3eHu" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.0.min.js" integrity="sha384-uMVqQc8JqHitD67bXTn9a06Mrk3EiHRaZ18EJENQenAKJ/KL71SakdXYomZQpGRr" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.0.min.js" integrity="sha384-u+eGuEXC8aw0VSCm2mH+b/tQEAitUOYiR1H6SuIVEdUmXsf4vN8m/SmXpmjb7U/X" crossorigin="anonymous"></script>
<script type="text/javascript">Bokeh.set_log_level("info");</script>
</head>
<body>
<div class="container">
Expand All @@ -25,10 +21,11 @@ <h2>A Simple Stock Price Visualizer</h2>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the A simple stock price time series visualizerend 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>
<div id="myplot"></div>
<script>
fetch('/plot')
.then(function(response) { return response.json(); })
.then(function(item) { return Bokeh.embed.embed_item(item); });
</script>
</body>
</html>

0 comments on commit 4ba9ebd

Please sign in to comment.