waylon/flask-chartist-example
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(bokeh) Added /bokeh tab

Browse source
This commit is contained in:
walkews 2017-05-23 10:25:24 -05:00
parent 890df24abd
commit 703d40c46c
6 changed files with 687 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/app.py
View file

@ -14,6 +14,8 @@ from matplotlib.pyplot import rcParams
from flask_wtf import FlaskForm
from wtforms import StringField, SelectField
from bokeh.plotting import figure
from bokeh.embed import components
df = pd.read_csv(os.path.join(settings.data_dir, 'pop_by_country_long_form.csv'))
df['Year'] = df['Year'].str[4:].astype(int)
@ -85,6 +87,14 @@ def matplotlib_plot():
scripts = render_template('matplotlib.js')
return render_template('home.html',head_scripts=head_scripts, body=body, scripts=scripts)
@app.route('/bokeh', methods=['GET', 'POST'])
def bokeh_plot():
form = MyForm()
head_scripts = render_template('bokeh_head_scripts.html')
body = render_template('bokeh.html', form=form)
scripts = render_template('bokeh.js')
return render_template('home.html',head_scripts=head_scripts, body=body, scripts=scripts)
@app.route('/chartist', methods=['GET', 'POST'])
def chartist():
form = MyForm()
@ -111,6 +121,14 @@ def mpl(nation):
hide_spines(ax)
return jsonify({'src': fig_to_html(ax.figure)})
@app.route('/pybokeh/<string:nation>')
def pybokeh(nation):
p = figure(title=nation, logo=None, tools="box_zoom,pan,wheel_zoom,reset",)
p.line(x=df2[nation].index, y=df2[nation].values)
script, div = components(p)
return jsonify({'script': script,
'div': div})
if __name__ == '__main__':
port = int(os.environ.get("PORT", 5000))
app.run(host='0.0.0.0', port=port)
app.run(debug=True, host='0.0.0.0', port=port)

22
app/templates/bokeh.html Normal file
View file

@ -0,0 +1,22 @@
{% from "_render_field.html" import render_field %}
<h1>Population by Nation</h1><br>
data from
<a href="https://data.world/nrippner/population-by-country1980-2010">data.world</a>
<br><br>
Created with Flask and python bokeh.
Using the pure python causes the whole chart to be refreshed.
It would be possible to update the data only to avoid the chart completely redrawing on update.
<span class='nation' value='nation'></span>
<fieldset>
<legend>World Population</legend>
{{ render_field(form.nation) }}
<div id="bokeh-pop-plot"></div>
<div id="bokeh-pop-script"></div>
</div>

19
app/templates/bokeh.js Normal file
View file

@ -0,0 +1,19 @@
function updateChart(){
console.log('updated div/scripts')
var nation = $("#nation option:selected").text()
var updatedData = $.get('/pybokeh/'.concat(nation));
updatedData.done(function(results){
$("#bokeh-pop-plot").html(results.div);
$("#bokeh-pop-script").html(results.script);
});
console.log('updated div/scripts')
}
$('#update').on('click', updateChart)
$('#nation').on('change', updateChart)

10
app/templates/bokeh_head_scripts.html Normal file
View file

@ -0,0 +1,10 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link
href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.css"
rel="stylesheet" type="text/css">
<link
href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.5.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.5.min.js"></script>

3
app/templates/home.html
View file

@ -34,10 +34,11 @@ body {margin:0;}
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#home">Home</a>
<a href="/home">Home</a>
<a href="/chartist">Chartist</a>
<a href="/matplotlib">Matplotlib</a>
<a href="/bokeh">bokeh</a>
</div>
{{ body | safe}}

633
notebooks/data exploration.ipynb
View file

File diff suppressed because one or more lines are too long