feat(bokeh) Added /bokeh tab
This commit is contained in:
walkews
parent
890df24abd
commit
703d40c46c
6 changed files with 687 additions and 20 deletions
20
app/app.py
20
app/app.py
|
|
@ -14,6 +14,8 @@ from matplotlib.pyplot import rcParams
|
||||||
from flask_wtf import FlaskForm
|
from flask_wtf import FlaskForm
|
||||||
from wtforms import StringField, SelectField
|
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 = pd.read_csv(os.path.join(settings.data_dir, 'pop_by_country_long_form.csv'))
|
||||||
df['Year'] = df['Year'].str[4:].astype(int)
|
df['Year'] = df['Year'].str[4:].astype(int)
|
||||||
|
|
@ -85,6 +87,14 @@ def matplotlib_plot():
|
||||||
scripts = render_template('matplotlib.js')
|
scripts = render_template('matplotlib.js')
|
||||||
return render_template('home.html',head_scripts=head_scripts, body=body, scripts=scripts)
|
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'])
|
@app.route('/chartist', methods=['GET', 'POST'])
|
||||||
def chartist():
|
def chartist():
|
||||||
form = MyForm()
|
form = MyForm()
|
||||||
|
|
@ -111,6 +121,14 @@ def mpl(nation):
|
||||||
hide_spines(ax)
|
hide_spines(ax)
|
||||||
return jsonify({'src': fig_to_html(ax.figure)})
|
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__':
|
if __name__ == '__main__':
|
||||||
port = int(os.environ.get("PORT", 5000))
|
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
22
app/templates/bokeh.html
Normal 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
19
app/templates/bokeh.js
Normal 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
10
app/templates/bokeh_head_scripts.html
Normal 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>
|
||||||
|
|
@ -34,10 +34,11 @@ body {margin:0;}
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="topnav">
|
<div class="topnav">
|
||||||
<a class="active" href="#home">Home</a>
|
<a href="#home">Home</a>
|
||||||
<a href="/home">Home</a>
|
<a href="/home">Home</a>
|
||||||
<a href="/chartist">Chartist</a>
|
<a href="/chartist">Chartist</a>
|
||||||
<a href="/matplotlib">Matplotlib</a>
|
<a href="/matplotlib">Matplotlib</a>
|
||||||
|
<a href="/bokeh">bokeh</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ body | safe}}
|
{{ body | safe}}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue