Django Python Dynamic Google Line Charts Example

Hi Dev,
In this tutorial we will go over the demonstration of pie chart example using google chart in django python. We will use django dynamic google pie charts example. step by step explain django python dynamic google pie charts example from scratch. Here you will learn django python google pie chart example tutorial.
Here i explained simply step by step example of here you will learn django python google pie chart example tutorial.
Step 1 : Create a ProjectIn this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:
django-admin startproject exampleStep 2 : Create a App
python3 manage.py startapp chartStep 3 : Update setting.py
In this step we require to do two things in our settings.py file, One is to change the path of template look up directory. Second one is to configure our media folder. Add the below lines to your settings.py file:
Next, you need to add it in the settings.py file as follows:
import os .... INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'chart', ]Step 4 : Database Setup
Next step, we will modify the settings.py file and update the database settings to configure the mydb database:
settings.pyDATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'example', 'USER':'root', 'PASSWORD':'root', 'HOST':'localhost', 'PORT':'3306' } }Step 5: Create a Model
In this step we will require the database model for storing click and visitors data.Open the chart/models.py file and add the following code:
chart/models.pyfrom django.db import models class Visitor(models.Model): click = models.IntegerField() viewer = models.IntegerField()
After creating these model, you need to create migrations using the following command:
Step 6 : Create a Migrationspython manage.py makemigrations
After successfully run the above command go to the chart/migrations/0001_initial.py
chart/migrations/0001_initial.py# Generated by Django 2.1 on 2022-07-04 09:35 from django.db import migrations, models class Migration(migrations.Migration): dependencies = [ ('core', '0002_user'), ] operations = [ migrations.CreateModel( name='Visitor', fields=[ ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), ('click', models.IntegerField()), ('viewer', models.IntegerField()), ], ), ]
Next, you need to migrate your database using the following command:
python manage.py migrateStep 7 : Creating the Views
In this step, we need to create the views for performing fetch record to the database.Open the chart/views.py file and add:
chart/views.pyfrom django.shortcuts import render from django.http import HttpResponse, JsonResponse from .models import Visitor import json # Create your views here. def googleChart(request): #h_var : The title for horizontal axis h_var = 'Click' #v_var : The title for horizontal axis v_var = 'Visitors' data = [[h_var,v_var]] visitors = Visitor.objects.all() for visitor in visitors: data.append([visitor.click,visitor.viewer]) h_var_JSON = json.dumps(h_var) v_var_JSON = json.dumps(v_var) modified_data = json.dumps(data) return render(request,"charts.html",{'values':modified_data,\ 'h_title':h_var_JSON,'v_title':v_var_JSON})Step 8 : Creating the Templates
Next, open the chart/templates/charts.html file and the add:
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the corechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { //{{values|safe}} : list of list containing points for the chart var data = google.visualization.arrayToDataTable({{values|safe}}); // Set chart options var options = { title: {{h_title|safe}} +' vs. '+ {{v_title|safe}}, hAxis: {title: {{h_title|safe}}}, vAxis: {title: {{v_title|safe}}}, legend: { position: 'bottom' } }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div class="container" style="margin:40px;"> <div class="row"> <div class="col-md-12" style="text-align: center;"> <h2>Django Python Google Chart Example Tutorial - Tuts-Stations.com</h2> <div id="chart_div" style="width: 900px; height: 500px;display: inline-block;"></div> </div> </div> </div> </body> </html>Step 9 : Creating URLs
In this section, we’ll create the urls to access our CRUD views.Go to the urls.py chart/urls.py file and update it as follows:
chart/urls.pyfrom django.urls import path from . import views urlpatterns = [ path('', views.googleChart), ]
Next, we will require the modify the urls.py your root preoject folder lets update the file.
example/urls.pyfrom django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('chart.urls')), ]Run the Server
In this step, we’ll run the local development server for playing with our app without deploying it to the web.
python manage.py runserver
Next, go to the http://localhost:8000/ address with a web browser.
I Hope It will help you....