Steps to Embed Charts in Django
Step 1: First make a project by using the command :
Django-admin startproject project_pygal
Step 2: Create a application named ‘testapp’ by using the command :
python3 manage.py startapp testapp
Creating Necessary Files
charts.py: This Python code defines three classes, EmployeePieChart, EmployeeGaugeChart, and EmployeeBarChart, which generate different types of charts (Pie, Line, and Bar charts) using the Pygal library. These classes fetch data from the Django Employee model, specifically department-wise employee strength, and create charts based on this data. Each class has an __init__ method to set up the chart type and title, a get_data method to retrieve data from the model, and a generate method to generate and render the chart. These classes provide a convenient way to visualize employee data in different chart formats within a Django application.
Python3
import pygal from .models import Employee class EmployeePieChart(): def __init__( self , * * kwargs): self .chart = pygal.Pie( * * kwargs) self .chart.title = 'Employees in different department' def get_data( self ): data = {} for emp in Employee.objects. all (): data[emp.department] = emp.strength return data def generate( self ): chart_data = self .get_data() for key,value in chart_data.items(): self .chart.add(key,value) return self .chart.render(is_unicode = True ) class EmployeeGaugeChart(): def __init__( self , * * kwargs): self .chart = pygal.Gauge( * * kwargs) self .chart.title = 'Employees in different department' def get_data( self ): data = {} for emp in Employee.objects. all (): data[emp.department] = emp.strength return data def generate( self ): chart_data = self .get_data() for key,value in chart_data.items(): self .chart.add(key,value) return self .chart.render(is_unicode = True ) class EmployeeBarChart(): def __init__( self , * * kwargs): self .chart = pygal.Bar( * * kwargs) self .chart.title = 'Employees in different department' def get_data( self ): data = {} for emp in Employee.objects. all (): data[emp.department] = emp.strength return data def generate( self ): chart_data = self .get_data() for key,value in chart_data.items(): self .chart.add(key,value) return self .chart.render(is_unicode = True ) |
views.py: This Django code defines views to manage and visualize employee data. The clear view deletes all employee records and redirects to the home page. The home view handles adding new employee data. The three IndexView views render the home page with different chart types (Pie, Gauge, and Bar) generated using Pygal. These views fetch data from the Employee model and use specific chart classes to create and display dynamic charts. This setup allows users to interact with employee data and view it in various chart formats within a Django application.
Python3
from django.views.generic import TemplateView from pygal.style import DarkStyle from django.shortcuts import render,redirect from django.http import HttpResponse from testapp.models import Employee from .charts import EmployeePieChart,EmployeeGaugeChart,EmployeeBarChart def clear(request): Employee.objects. all ().delete() return redirect( '/home' ) def home(request): if request.method = = 'POST' : department = request.POST[ 'department' ] strength = request.POST[ 'strength' ] print (department) print (strength) Employee.objects.create(department = department, strength = strength) return render(request, 'home.html' ) class IndexView(TemplateView): template_name = 'index.html' def get_context_data( self , * * kwargs): context = super (IndexView, self ).get_context_data( * * kwargs) # Instantiate our chart. We'll keep the size/style/etc. # config here in the view instead of `charts.py`. cht_employee = EmployeePieChart( height = 600 , width = 800 , explicit_size = True , style = DarkStyle ) # Call the `.generate()` method on our chart object # and pass it to template context. context[ 'cht_employee' ] = cht_employee.generate() return context class IndexView1(TemplateView): template_name = 'index.html' def get_context_data( self , * * kwargs): context = super (IndexView1, self ).get_context_data( * * kwargs) # Instantiate our chart. We'll keep the size/style/etc. # config here in the view instead of `charts.py`. cht_employee = EmployeeLineChart( height = 600 , width = 800 , explicit_size = True , style = DarkStyle ) # Call the `.generate()` method on our chart object # and pass it to template context. context[ 'cht_employee' ] = cht_employee.generate() return context class IndexView2(TemplateView): template_name = 'index.html' def get_context_data( self , * * kwargs): context = super (IndexView2, self ).get_context_data( * * kwargs) # Instantiate our chart. We'll keep the size/style/etc. # config here in the view instead of `charts.py`. cht_employee = EmployeeBarChart( height = 600 , width = 800 , explicit_size = True , style = DarkStyle ) # Call the `.generate()` method on our chart object # and pass it to template context. context[ 'cht_employee' ] = cht_employee.generate() return context |
models.py: This Django model, named Employee, has two fields: department to store the employee’s department as text and strength to store the number of employees in that department as an integer. The __str__ method determines how an Employee instance is represented as a string.
Python3
from django.db import models class Employee(models.Model): department = models.CharField(max_length = 255 ) strength = models.IntegerField() def __str__( self ): return self .department |
Setting up GUI
home.html: This HTML code creates a form for users to input department and strength data. It includes labels and input fields, a “Submit” button, and styled hyperlinks functioning as buttons to navigate to different views within a Django application, including charts and data clearing options. The buttons have hover effects for visual appeal.
HTML
<!DOCTYPE html> < html > < head > < title >Department and Strength Form</ title > < style > /* Define styles for the box-style button */ .btn { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border: 2px solid #007bff; border-radius: 5px; font-size: 16px; cursor: pointer; margin-top: 20px; /* Add some space below the form */ } .btn:hover { background-color: #0056b3; border-color: #0056b3; } </ style > </ head > < body > < h1 >Enter Details</ h1 > < form method = "post" > {% csrf_token %} < label for = "department" >Department:</ label > < input type = "text" name = "department" >< br > < label for = "strength" >Strength:</ label > < input type = "number" name = "strength" >< br > < input type = "submit" value = "Submit" > </ form > < a href = "/index" class = "btn" >Click to Pie chart</ a > < a href = "/index1" class = "btn" >Click to Gauge chart</ a > < a href = "/index2" class = "btn" >Click to Bar chart</ a > < a href = "/clear" class = "btn" >Click to Clear data</ a > </ body > </ html > |
index.html: This HTML template is designed to display Pygal charts generated by Django views. It includes the chart using a Django template variable and loads a Pygal tooltips script for improved chart interactivity.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title >django-pygal</ title > </ head > < body > {{ cht_employee|safe }} < script type = "text/javascript" src = "http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js" ></ script > </ body > </ html > |
urls.py: This Django URL configuration defines the URL patterns for routing requests to specific views. It includes routes for the admin interface, views to display charts, and a view to clear data.
Python3
"""projetc_pygal URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/3.2/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path from testapp.views import IndexView,home,IndexView1,IndexView2,clear urlpatterns = [ path( 'admin/' , admin.site.urls), path( 'home/' , home), path( 'index/' , IndexView.as_view()), path( 'index1/' , IndexView1.as_view()), path( 'index2/' , IndexView2.as_view()), path( 'clear/' , clear), ] |
Deployement of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output Video:
Embed pygal charts in Django Application
Suppose we are developing a web application using the Django framework and we have some data and want to visualize it on the webpage We can embed it in Django templates and render it to the web browser using Python.