davidalphafox / blog-sample-flask-charts

Flask Charts - Flask-RestX and Charts.JS | AppSeed

Flask Charts via Flask-RestX

Sample project crafted with Flask, Flask-RestX and Charts.JS - provided by AppSeed

This is a sample code to showcase how to plot charts using Flask as the backend framework. Frontend uses Bootstrap5 for styling and Chart.js for dynamic charts. The dataset is loaded via a custom Flask CLI and the project homepage showcases three charts type: line, bar and pie.

• 👉 Charts via Flask-RestX - LIVE Demo
• 👉 Free support via email and Discord.

Features:

• Up-to-date dependencies
• Stack: Flask
• API: Flask-RestX
• DB Tools: Flask-SqlAlchemy, SQLite
• Charts: Charts.js

✨ How to use it

👉 Clone Sources (this repo)

$ git clone https://github.com/app-generator/blog-sample-flask-charts.git
$ cd blog-sample-flask-charts

👉 Install Modules using a Virtual Environment

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt

Or for Windows-based Systems

$ virtualenv env
$ .\env\Scripts\activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt

👉 Set up the environment

$ export FLASK_APP=app.py
$ export FLASK_ENV=development

Or for Windows-based Systems

$ # CMD terminal
$ set FLASK_APP=app.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\app.py"
$ $env:FLASK_ENV = "development"

👉 Load Sample Data from data directory

• monthly_customers.csv
• monthly_sales.csv
• product_sales.csv

$ flask load-data 

👉 Start the APP

$ flask run 

✨ Code-base structure

< PROJECT ROOT >
   |
   |-- app.py            # Create and start the APP object
   |-- api.py            # Simple API node 
   |-- models.py         # app models
   |
   |-- data_loader.py    # Save the data in DB
   |
   |-- templates
   |    |-- index.html   # Simple page styled with BS5 
   |
   |-- static
   |    |-- js/custom.js # Code the Charts
   |
   |-- *******************

The bootstrap flow

• app.py
  • bundles all resources
  • serve the index.html
• api.py exposes a simple API using the DB data
• templates/index.html
  • HOMEpage of the project
• js/custom.js
  • fetch data exposed by the API

---

Flask Charts via Flask-RestX - provided by AppSeed