Prerequisite : django installation
With 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
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 admin
from django.urls import path
from 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 render
from django.views.generic import View
from rest_framework.views import APIView
from 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 -->
<!-- Latest compiled JavaScript -->
</ 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 >
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