Flask Charts: amCharts, G.Charts, Apex

Sample project crafted with Flask, Flask-RestX and multiple Charts Libraries to showcase how to plot different charts Pie, Line and Bar Charts. Frontend uses Bootstrap5 for styling and the sample dataset is loaded via a custom Flask CLI and the project homepage showcases three charts type: line, bar and pie.

• 👉 Multiple 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
• ✅ Chart Libraries:
  • 👉 Demo Charts.js
  • 👉 Demo Chartist
  • 👉 Demo amCharts
  • 👉 Demo Google Charts
  • 👉 Demo Apex Charts

✨ How to use it

👉 Clone Sources (this repo)

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

👉 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=run.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 = ".\run.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/
   |    |
   |    |-- __init__.py                 # Initialization of app
   |    |-- routes.py                   # Handlers for the front end routes
   |    |-- api.py                      # REST API hanlder
   |    |-- data_loader.py              # Load data from data/ folder to sqlite database
   |    |-- models.py                   # Database models for storing data
   |    |-- models.py                   # Database models for storing data
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>       # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- index.html              # Index page
   |    |    |-- chartjs.html            # Charts with Chart.js
   |    |    |-- chartist.html           # Charts with chartist
   |    |    |-- amcharts.html           # Charts with amCharts
   |    |    |-- googlecharts.html       # Charts with Google Charts
   |    |    |-- apexcharts.html         # Charts with Apex Charts
   |    |    
   |    |
   |   data/
   |    |-- monthly_customers.csv
   |    |-- monthly_sales.csv
   |    |-- product_sales.csv
   |
   |-- requirements.txt
   |-- run.py
   |
   |-- ************************************************************************

The bootstrap flow

• run.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: amCharts, Google Charts, Apex - Free Sample provided by AppSeed