CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

21 September, 2023

How to rebuild a graph on an html page based on the result of selecting data in the wtform form in a flash application?

 Programing Coderfunda     September 21, 2023     No comments   

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 %}
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Vue.js Tutorial
      Vue.js Installation Compatibility Check Before going to install and use Vue.js in your project, you should check the compatibility issues....
  • JqueryUI Tutorial
    JqueryUI Tutorial    JqueryUI is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first fr...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda