Data Visualization Using Chartjs and Django - GeeksforGeeks

23 Jan, 2020
Prerequisite : django installationWith the growth of data, data visualization in become a import part here we will implement chart for our data in our web apps using chartjs with django. Django is a high-level Python Web framework based web framework and chartjs is an easy way to include animated, interactive graphs.
Modules required :
django : install django
djangorestframework$ pip install djangorestframework
$ pip install djangorestframework
basic setup :
Start a project by the following command –
$ django-admin startproject charts
Change directory to charts –
$ cd charts
Start the server- Start the server by typing following command in terminal –
$ python manage.py runserver
To check whether the server is running or not go to a web browser and enter http://127.0.0.1:8000/ as URL.
Now stop the server by pressing ctrl+C
Let’s create an app now.
$ python manage.py startapp chartjs
Goto chartjs/ folder by doing:
$ cd chartjs
and create a folder with index.html file: templates/chartjs/index.html
$ mkdir -p templates/chartjs && cd templates/chartjs && touch index.html
Open the project folder using a text editor. The directory structure should look like this :
Now add chartjs app and rest_framework in your charts in settings.py.
Edit urls.py file in charts :
from django.contrib import adminfrom django.urls import pathfrom chartjs import views  urlpatterns = [    path('admin/', admin.site.urls),    path('', views.HomeView.as_view()),    # path('test-api', views.get_data),    path('api', views.ChartData.as_view()),]
Edit views.py in chartjs :
# from django.http import JsonResponse   from django.shortcuts import renderfrom django.views.generic import View   from rest_framework.views import APIViewfrom rest_framework.response import Response   class HomeView(View):    def get(self, request, *args, **kwargs):        return render(request, 'chartjs/index.html')      ####################################################   ## if you don't want to user rest_framework   # def get_data(request, *args, **kwargs):## data ={#             "sales" : 100,#             "person": 10000,#     }## return JsonResponse(data) # http response      #######################################################   ## using rest_framework classes   class ChartData(APIView):    authentication_classes = []    permission_classes = []       def get(self, request, format = None):        labels = [            'January',            'February',             'March',             'April',             'May',             'June',             'July'            ]        chartLabel = "my data"        chartdata = [0, 10, 5, 2, 20, 30, 45]        data ={                     "labels":labels,                     "chartLabel":chartLabel,                     "chartdata":chartdata,             }        return Response(data)
Navigate to templates/chartjs/index.html and edit it.
<!DOCTYPE html><html lang="en" dir="ltr">  <head>  <meta charset="utf-8">  <title>chatsjs</title>  <!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <!-- jQuery library -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    <!-- Latest compiled JavaScript -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>      </head>  <body class="container-fluid">  <center class="row">    <h1>implementation of <b>chartJS</b> using <b>django</b></h1>  </center>  <hr />  <div class="row">    <div class="col-md-6">      <canvas id="myChartline"></canvas>    </div>    <div class="col-md-6">      <canvas id="myChartBar"></canvas>    </div>  </div>    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>    <script>    var endpoint = '/api';      $.ajax({      method: "GET",      url: endpoint,      success: function(data) {        drawLineGraph(data, 'myChartline');        drawBarGraph(data, 'myChartBar');        console.log("drawing");      },      error: function(error_data) {        console.log(error_data);      }    })        function drawLineGraph(data, id) {      var labels = data.labels;      var chartLabel = data.chartLabel;      var chartdata = data.chartdata;      var ctx = document.getElementById(id).getContext('2d');      var chart = new Chart(ctx, {        // The type of chart we want to create        type: 'line',          // The data for our dataset        data: {          labels: labels,          datasets: [{            label: chartLabel,            backgroundColor: 'rgb(255, 100, 200)',            borderColor: 'rgb(55, 99, 132)',            data: chartdata,          }]        },          // Configuration options go here        options: {          scales: {            xAxes: [{              display: true            }],            yAxes: [{              ticks: {                beginAtZero: true              }            }]          }        }        });    }      function drawBarGraph(data, id) {      var labels = data.labels;      var chartLabel = data.chartLabel;      var chartdata = data.chartdata;      var ctx = document.getElementById(id).getContext('2d');      var myChart = new Chart(ctx, {        type: 'bar',        data: {          labels: labels,          datasets: [{            label: chartLabel,            data: chartdata,            backgroundColor: [              'rgba(255, 99, 132, 0.2)',              'rgba(54, 162, 235, 0.2)',              'rgba(255, 206, 86, 0.2)',              'rgba(75, 192, 192, 0.2)',              'rgba(153, 102, 255, 0.2)',              'rgba(255, 159, 64, 0.2)'            ],            borderColor: [              'rgba(255, 99, 132, 1)',              'rgba(54, 162, 235, 1)',              'rgba(255, 206, 86, 1)',              'rgba(75, 192, 192, 1)',              'rgba(153, 102, 255, 1)',              'rgba(255, 159, 64, 1)'            ],            borderWidth: 1          }]        },        options: {          scales: {            yAxes: [{              ticks: {                beginAtZero: true              }            }]          }        }      });    }  </script></body>  </html>
Make migrations and migrate it :
$ python manage.py makemigrations
$ python manage.py migrate

Now you can run the server to see your app :
$ python manage.py runserver
Technical Scripter 2019
Articles
GBlog
Python
Technical Scripter
TechTips
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Time Complexity and Space Complexity
Docker - COPY Instruction
Time complexities of different data structures
SQL | Date functions
Difference between Class and Object
Roadmap to Become a Web Developer in 2022
Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe, ...
Socket Programming in C/C++
DSA Sheet by Love Babbar
Must Do Coding Questions for Product Based Companies