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

initial commit

Browse source
This commit is contained in:
walkews 2017-05-19 16:02:30 -05:00
parent 95d161f57b
commit dd9a32ca88
12 changed files with 7620 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/templates/_render_field.html Normal file
View file

@ -0,0 +1,15 @@
{% macro render_field(field) %}
<div class="form-group">
<label for="{{ field.name }}" class="col-lg-2-control-label"> {{ field.label.text }}</label>
<div class="col-lg-10">
{{ field(class_='form.control;, **kwargs')|safe }}
<ul>
{% for error in field.errors %}
<li style='color:red;' > {{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endmacro %}

72
app/templates/chart.html Normal file
View file

@ -0,0 +1,72 @@
{% from "_render_field.html" import render_field %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<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 chartist.js
<span class='nation' value='nation'></span>
<fieldset>
<legend>FORM</legend>
{{ render_field(form.nation) }}
<div class="ct-chart ct-perfect-fourth">
</div>
<script>
var mychart;
var nation = $("#nation option:selected").text()
var getData = $.get('/data/'.concat(nation));
getData.done(function(results){
var data = {
labels: results.labels,
series: [
results.results
]
};
mychart = new Chartist.Line('.ct-chart', data);
})
function updateChart(){
var nation = $("#nation option:selected").text()
var updatedData = $.get('/data/'.concat(nation));
updatedData.done(function(results){
var data = {
labels: results.labels,
series: [
results.results
]
};
mychart.update(data)
});
}
$('#update').on('click', updateChart)
$('#nation').on('change', updateChart)
</script>
</body>
</html>