Requisito previo: instalación de django
Con el crecimiento de los datos, la visualización de datos se convierte en una parte importante aquí, implementaremos un gráfico para nuestros datos en nuestras aplicaciones web usando chartjs con django. Django es un marco web basado en Python Web de alto nivel y chartjs es una manera fácil de incluir gráficos animados e interactivos.
Módulos requeridos:
- django: instalar django
- djangorestframework
$pip install djangorestframework
configuración básica :
Inicie un proyecto con el siguiente comando:
$ django-admin startproject charts
Cambiar directorio a gráficos –
$ cd charts
Inicie el servidor: inicie el servidor escribiendo el siguiente comando en la terminal:
$ python manage.py runserver
Para verificar si el servidor se está ejecutando o no, vaya a un navegador web e ingrese http://127.0.0.1:8000/ como URL.
Ahora detenga el servidor presionando ctrl+C
Vamos a crear una aplicación ahora.
$ python manage.py startapp chartjs
Vaya a la carpeta chartjs/ haciendo:
$ cd chartjs
y cree una carpeta con el archivo index.html: templates/chartjs/index.html
$ mkdir -p templates/chartjs && cd templates/chartjs && touch index.html
Abra la carpeta del proyecto con un editor de texto. La estructura del directorio debería verse así:
Ahora agregue la aplicación chartjs y rest_framework en sus gráficos en settings.py .
Edite el archivo urls.py en los gráficos:
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()),
]
Edite views.py en 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)
Vaya a templates/chartjs/index.html y edítelo.
<!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>
Hacer migraciones y migrarlo:
$ python manage.py makemigrations $ python manage.py migrate
Ahora puede ejecutar el servidor para ver su aplicación:
$ python manage.py runserver
Publicación traducida automáticamente
Artículo escrito por itsvinayak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA