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

Hello! Having an API helps your data be available to multiple sources. This means that many requests from different sources or exploited by many scripts on the same server. In this article, we’ll be building a web page to display data using many JS chart libraries such as Chart.js, Chartist, AmCharts, Google Charts, ApexCharts Β using Django as the backend framework. Thanks for reading!

Django charts via DRF and different JS libraries - animated presentation.Β 

✨ Setup the project

The base of the project has already been set up and you just need to clone a repo to get started.

It’s a Django project coming with an API, data that can be loaded in the database, and the Chartjs already configured and loaded. You can check the article about it here:

Django Charts via DRF and Chart.js (codebase explained)

πŸ‘‰ Clone the project with the following command:

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

πŸ‘‰ Install Modules using a Virtual Environment

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

πŸ‘‰ Migrate/Set Up Database

$ python manage.py migrate
$ python manage.py runserver

πŸ‘‰ Create Superuser

$ python manage.py createsuperuser

πŸ‘‰ Start the App

$ python manage.py runserver

✨ The bootstrap flow

  • Access the admin section
  • Load data/users.csv in users table (using import/export feature)
  • Load data/products.csv in users table (using import/export feature)
  • Access the HOMEpage
  • Charts should be displayed with data

✨ Chart.js

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

Django Charts via DRF - Chart.JS

✨ amCharts

Programming library for all your data visualization needs.

Django Charts via DRF - AmCharts

✨ Chartist

Open-Source Library for coding simple & responsive charts.

Django Charts via DRF - Chartist

✨ Google Charts

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

Django Charts via DRF - Google Charts

✨ ApexCharts

Modern, Interactive Open-Source charts.

Django Charts via DRF - Apex Charts

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