Flask Charts via Flask-RestX

Sample project crafted with Flask, Charts.JS, and Flask-RestX to showcase how to plot different charts Pie, Line and Bar Charts. 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.

Features:

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

Flask Charts via Flask-RestX and Charts.js - provided by AppSeed.us

✨ 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


– provided by AppSeed

GitHub

View Github