I am developing a web application in flash. The application has a database. When the user visits the page, he should see a graph with default data for the first device. Then there are filters in which the user selects the desired device, data type and time period. After clicking on the "Apply" button, the graph should be rebuilt according to the user's choice. Filters are made in wtform. The graph builds a canvas script in html. Problem: The graph is not rebuilt, it remains the original default all the time
Flask code:
@app.route('/chart', methods=['GET', 'POST'])
def chart_view():
"""Chart Page"""
form = LogChartForm()
if form.validate_on_submit():
source_id = form.source_id.data
type_id = form.type_id.data
time_start = form.time_start.data
time_end = form.time_end.data
source_get = EvSource.query.filter_by(description=source_id).first()
source = source_get.id_ev_source
if type_id != 'All':
typ_get = EvType.query.filter_by(description=type_id).first()
typ = typ_get.id_ev_type
items = Log.query.filter_by(id_ev_source=source, id_ev_type=typ).order_by(Log.timestamp).all()
else:
items = Log.query.filter_by(id_ev_source=source).order_by(Log.timestamp).all()
# start = calendar.timegm(datetime.datetime(time_start.year, time_start.month, time_start.day, 0, 0, 0).timetuple())
# end = calendar.timegm(datetime.datetime(time_end.year, time_end.month, time_end.day, 0, 0, 0).timetuple())
labels = [strftime('%Y-%m-%d %H:%M:%S', localtime(item.timestamp)) for item in items]
datas = [item.value for item in items]
text = form.source_id.data
dict_data = {'labels': labels, 'datas': datas, 'texts': text}
return render_template('chart.html', form=form, **dict_data)
else:
source_id = form.source_id.data
type_id = form.type_id.data
source_get = EvSource.query.filter_by(description=source_id).first()
source = source_get.id_ev_source
items = Log.query.filter_by(id_ev_source=source).order_by(Log.timestamp).all()
labels = [strftime('%Y-%m-%d %H:%M:%S', localtime(item.timestamp)) for item in items]
datas = [item.value for item in items]
text = form.source_id.data
dict_data = {'labels': labels, 'datas': datas, 'texts': text}
return render_template('chart.html', form=form, **dict_data)
class LogChartForm(FlaskForm):
"""Graph Form: Filter"""
source_list = [source.description for source in EvSource.query.all()]
type_list = [typ.description for typ in EvType.query.all()]
type_list.append('All')
source_id = SelectField(
default=source_list[0],
choices=source_list
)
type_id = SelectField(
default=type_list[-1],
choices=type_list
)
time_start = DateField(default=None, format='%Y-%m-%d', validators=[Optional()])
time_end = DateField(default=None, format='%Y-%m-%d', validators=[Optional()])
submit = SubmitField('Apply')
Html code:
{% extends "base.html" %}
{% block content %}
Current system status: Graph
const labels = {{ labels | tojson }};
const texts = {{ texts | tojson }};
const data = {
labels: labels,
datasets: [{
label: texts,
backgroundColor: '#E22545',
borderColor: '#E22545',
data: {{ datas | tojson }},
}]
};
const config = {
type: 'line',
data: data,
options: { maintainAspectRatio: false }
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
{{ form.csrf_token }}
Filters
{{ form.submit(style="height: 30px; width: 140px; font-size: 16px; color: #fbfbfb; background-color: #272d3d; border: none; font-weight: 700;") }}
Signal source
{{ form.source_id(style="height: 25px; width: 100%; text-align: right; font-size: 16px; font-weight: bolder;") }}
Signal type
{{ form.type_id(style="height: 25px; width: 100%; text-align: right; font-size: 16px; font-weight: bolder;") }}
Period
{{ form.time_start(class= "datepicker", style="text-align: right; font-size: 16px; font-weight: bolder;") }}
{{ form.time_end(class= "datepicker", style="text-align: right; font-size: 16px; font-weight: bolder;") }}
{% endblock %}
0 comments:
Post a Comment
Thanks