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

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}}