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

Related Posts:

  • Vue.js Form Input BindingsVue.js Form Input BindingsVue.js provides a v-model directive that can be used to create two-way data bindings on form inputs, text, textare… Read More
  • Vue.js Watch PropertyVue.js Watch PropertyThe Vue.js Watcher or watch property allows the developers to listen to the component data and run whenever they change a particu… Read More
  • Vue.js Data BindingVue.js Data BindingVue.js supports different types of data binding. Before going to learn data binding in Vue.js, let's see what data binding is and h… Read More
  • Vue.js Event HandlingVue.js Events In Vue.js, Events are used to respond to an action. Suppose, you have to build a dynamic website using Vue.js then you'll most like… Read More
  • Vue.js Computed PropertiesVue.js Computed Properties In Vue.js, computed properties are used when we have to handle complex logic and operations. Computed properties are j… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...

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 (68)
  • 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

  • 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)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Lightning Fast Schedule Management for Laravel - 6/20/2025
  • Reset Rate Limits Dynamically with Laravel's clear Method - 6/18/2025
  • Manipulate Image URLs in Laravel with the Image Transform Package - 6/19/2025
  • Handle Nested Arrays Elegantly with Laravel's fluent() Helper - 6/18/2025
  • Laravel 12.19 Adds a useEloquentBuilder Attribute, a FailOnException Queue Middleware, and More - 6/18/2025

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