feat(c3) Added C3 Example
Added c3 example using c3.load(JSON) to reload the data\
This commit is contained in:
Walker Waylon Scott
parent
2132e463c1
commit
a84fb3a90d
5 changed files with 198 additions and 2 deletions
19
app/app.py
19
app/app.py
|
|
@ -103,6 +103,14 @@ def chartist():
|
|||
scripts = render_template('chartist.js')
|
||||
return render_template('home.html', head_scripts=head_scripts, body=body, scripts=scripts)
|
||||
|
||||
@app.route('/c3', methods=['GET', 'POST'])
|
||||
def c3_route():
|
||||
form = MyForm()
|
||||
head_scripts = render_template('c3_head_scripts.html')
|
||||
body = render_template('c3.html', form=form)
|
||||
scripts = render_template('c3_update.js')
|
||||
return render_template('home.html', head_scripts=head_scripts, body=body, scripts=scripts)
|
||||
|
||||
@app.route('/chartist1', methods=['GET', 'POST'])
|
||||
def chartist1():
|
||||
form = MyForm()
|
||||
|
|
@ -129,6 +137,15 @@ def pybokeh(nation):
|
|||
return jsonify({'script': script,
|
||||
'div': div})
|
||||
|
||||
@app.route('/c3data/<string:nation>')
|
||||
def c3_daata_route(nation):
|
||||
|
||||
data = {'columns':[[nation] + df2[nation].astype(float).tolist(), ['x'] + df2.index.astype(float).tolist()],
|
||||
'colors': {nation: '#4286f4'},
|
||||
'unload': "",}
|
||||
return jsonify(data)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
port = int(os.environ.get("PORT", 5000))
|
||||
app.run(host='0.0.0.0', port=port)
|
||||
app.run(host='0.0.0.0', port=port, debug=True)
|
||||
18
app/templates/c3.html
Normal file
18
app/templates/c3.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{% 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 c3
|
||||
|
||||
<span class='nation' value='nation'></span>
|
||||
|
||||
|
||||
<fieldset>
|
||||
<legend>World Population</legend>
|
||||
{{ render_field(form.nation) }}
|
||||
|
||||
|
||||
<div id='chart' style='width: 100%; height: 100%'></div>
|
||||
6
app/templates/c3_head_scripts.html
Normal file
6
app/templates/c3_head_scripts.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css' rel='stylesheet' type='text/css'/>
|
||||
|
||||
<!-- Load d3.js and c3.js -->
|
||||
<script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js'></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
154
app/templates/c3_update.js
Normal file
154
app/templates/c3_update.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
var data = {
|
||||
'size': {
|
||||
'height': 300
|
||||
},
|
||||
'data': {
|
||||
'x': 'x',
|
||||
'type': 'line',
|
||||
'axes': {
|
||||
'Australia': 'y',
|
||||
'x': 'y'
|
||||
},
|
||||
'columns': [
|
||||
[
|
||||
'Australia',
|
||||
'14.6159',
|
||||
'14.92326',
|
||||
'15.16178',
|
||||
'15.34807',
|
||||
'15.51048',
|
||||
'15.69524',
|
||||
'15.90042',
|
||||
'16.13672',
|
||||
'16.40073',
|
||||
'16.6806',
|
||||
'16.95624',
|
||||
'17.20212',
|
||||
'17.41893',
|
||||
'17.6078',
|
||||
'17.78109',
|
||||
'17.97563',
|
||||
'18.19585',
|
||||
'18.41526',
|
||||
'18.62084',
|
||||
'18.83025',
|
||||
'19.05319',
|
||||
'19.29426',
|
||||
'19.53494',
|
||||
'19.76654',
|
||||
'19.99508',
|
||||
'20.23235',
|
||||
'20.48947',
|
||||
'20.74963',
|
||||
'21.00731',
|
||||
'21.26264',
|
||||
'21.51575'
|
||||
],
|
||||
[
|
||||
'x',
|
||||
'1980',
|
||||
'1981',
|
||||
'1982',
|
||||
'1983',
|
||||
'1984',
|
||||
'1985',
|
||||
'1986',
|
||||
'1987',
|
||||
'1988',
|
||||
'1989',
|
||||
'1990',
|
||||
'1991',
|
||||
'1992',
|
||||
'1993',
|
||||
'1994',
|
||||
'1995',
|
||||
'1996',
|
||||
'1997',
|
||||
'1998',
|
||||
'1999',
|
||||
'2000',
|
||||
'2001',
|
||||
'2002',
|
||||
'2003',
|
||||
'2004',
|
||||
'2005',
|
||||
'2006',
|
||||
'2007',
|
||||
'2008',
|
||||
'2009',
|
||||
'2010'
|
||||
]
|
||||
]
|
||||
},
|
||||
'subchart': {
|
||||
'show': false
|
||||
},
|
||||
'point': {
|
||||
'show': false
|
||||
},
|
||||
'grid': {
|
||||
'x': {
|
||||
'show': false
|
||||
},
|
||||
'y': {
|
||||
'show': false
|
||||
}
|
||||
},
|
||||
'axis': {
|
||||
'x': {
|
||||
'tick': {
|
||||
'count': 10
|
||||
}
|
||||
},
|
||||
'y': {
|
||||
'tick': {
|
||||
'format': ''
|
||||
}
|
||||
},
|
||||
'y2': {
|
||||
'tick': {}
|
||||
}
|
||||
},
|
||||
'zoom': {}
|
||||
};
|
||||
data['axis']['y']['tick']['format'] = d3.format('')
|
||||
data['axis']['y2']['tick']['format'] = d3.format('')
|
||||
data['bindto']='#chart'
|
||||
var chart = c3.generate(data);
|
||||
|
||||
function load_data(country) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open('GET', 'http://127.0.0.1:5000/' + country);
|
||||
xhr.send(null);
|
||||
results = JSON.parse(xhr.responseText.result)
|
||||
document.getElement
|
||||
return data
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function updateChart(){
|
||||
var nation = $("#nation option:selected").text()
|
||||
|
||||
var updatedData = $.get('/c3data/'.concat(nation));
|
||||
updatedData.done(function(results){
|
||||
|
||||
var data = {
|
||||
labels: results.labels,
|
||||
series: [
|
||||
results.results
|
||||
]
|
||||
};
|
||||
|
||||
chart.load(updatedData.responseJSON)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
$( document ).ready(updateChart)
|
||||
// $('#update').on('click', updateChart)
|
||||
$('#nation').on('change', updateChart)
|
||||
|
|
@ -39,9 +39,10 @@ body {margin:0;}
|
|||
<a href="/chartist">Chartist</a>
|
||||
<a href="/matplotlib">Matplotlib</a>
|
||||
<a href="/bokeh">bokeh</a>
|
||||
<a href="/c3">c3</a>
|
||||
</div>
|
||||
|
||||
{{ body | safe}}
|
||||
{{ body | safe }}
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue