Flask Charts via amCharts, G.Charts, and ApexCharts (with sample)

Sample project crafted with Flask, Flask-RestX and multiple Charts Libraries to showcase how to plot different charts Pie, Line and Bar Charts.

Open-Source Sample crafted with Flask, Flask-RestX and multiple JS Libraries
Open-Source Sample crafted with Flask, Flask-RestX and multiple JS Libraries

Hello! This article presents an open-source sample crafted with Flask, Flask-RestX, and a few popular JS libraries used to showcase analytics using different charts: Pie, Line and Bar Chart. This sample aims to help beginners to understand all layers involved in this simple data analytics use case - Source Code published on Github. Thanks for reading!

Flask Charts via Flask-RestX and multiple JS libraries - Animated Presentation
Flask Charts via Flask-RestX and multiple JS libraries - Animated Presentation

✨ How to use it

The product can be used by following a few build instructions provided in the README file, shipped with the sources. Curious minds can use this simple starter in a local environment by typing a few commands in the terminal, without leaving this page.

👉 Step #1 - Clone sources
$ git clone https://github.com/app-generator/sample-flask-charts-multiple.git
$ cd sample-flask-charts-multiple
👉 Step #2 - Install Modules using a virtual environment
$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt
👉 Step #3 - Set up the environment
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
👉 Step #4 - Load Sample Data from data directory
$ flask load-data 
👉 Step 5 - Start the APP
$ flask run

Once all the above commands are executed, we should see this Flask sample running in the browser. Each JS library is linked from the project HOMEpage as we can see below:


✨ Chart.js

Chart.js is a Simple yet flexible JavaScript charting for designers & developers.

Flask Charts via Flask-RestX - Chart.js
Flask Charts via Flask-RestX - Chart.js

✨ amCharts

Programming library for all your data visualization needs.

Flask Charts via Flask-RestX - amCharts
Flask Charts via Flask-RestX - amCharts

✨ Chartist

Open-Source Library for coding simple & responsive charts.

Flask Charts via Flask-RestX - Chartist
Flask Charts via Flask-RestX - Chartist

✨ Google Charts

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

Flask Charts via Flask-RestX - Google Charts
Flask Charts via Flask-RestX - Google Charts

✨ ApexCharts

Modern, Interactive Open-Source charts

Flask Charts via Flask-RestX - Apex Charts
Flask Charts via Flask-RestX - Apex Charts

Thanks for reading! For more resources, feel free to access: