Tengo un código en python que crea una grafica a partir de datos de un archivo excel con el formato .csv
Este el código en python:
import pandas as pd
datos = pd.read_csv("Hotel.csv")
import matplotlib.pyplot as plt
import seaborn as sns
# Crear un gráfico de dispersión
sns.scatterplot(x='month', y='price_usd', data=datos, alpha=0.5)
# Añadir detalles al gráfico
plt.title('Relación entre Precio y Año')
plt.xlabel('Mes')
plt.ylabel('Precio (USD)')
# Mostrar el gráfico
plt.show()
Lo quiero pasar a una pagina web donde voy a cargar esta grafica con el archivo que el usuario suba para esto tengo esta función en el archivo views.py
Este el código:
def grafica_1(request):
# Obtener los daros de la tabla
datos_expedia = Expedia.objects.values('month','price_usd')
# Convierte los datos a una lista de diccionarios
datos_expdia_list = list(datos_expedia)
# Rendereizamos la plantilla con el contexto
return render(request, 'estadistica.html', {'datos_expedia': datos_expdia_list})
Estos datos los tomo de una tabla llamada Expedia que cree en el archivo models.py
Una vez que cree la función la agrego en el archivo urls.py para mandarla llamar en la pagina estadistica.html
Este es el la estructura de mi pagina html:
<!--Cargar los archivos estaticos-->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Seccion de librerias-->
<!--Chart.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
<!--Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--DataTable.js-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!--Custom Css-->
<link rel="stylesheet" href="{% static 'css/principal.css' %}">
<link rel="stylesheet" href="{% static 'css/estadistica.css' %}">
<title>Pagina de Inicio</title>
</head>
<body>
<!--Menu-->
<header>
<nav>
<ul class="menu-lista">
<span class="nombre-usuario"> Usuario <span class="nombre-usuario" id="nombre"></span></span>
<li class="menu-opciones"><a href="{% url 'principal' %}">Inicio</a></li>
<li class="menu-opciones"><a href="{% url 'subir_csv' %}">Subir Csv</a></li>
<li class="menu-opciones"><a href="{% url 'registros_expedia' %}">Registros</a></li>
<li class="menu-opciones"><a href="{% url 'mineria' %}">Mineria de Datos</a></li>
<li class="menu-opciones"><a href="{% url 'estadistica' %}">Calculos Estadisticos</a></li>
<li class="menu-opciones"><a href="">Cerrar Sesion</a></li>
</ul>
</nav>
</header>
<article>
<div class="cont-title">
<h1 class="titulo">Calculos Estadisticos</h1>
</div>
</article>
<article>
<div class="cont-grafica">
<a href="{% url 'grafica_1' %}">Grafica 1</a>
<!--Seccion para cargar las graficas en el dashboard-->
<div class="myCahrt" style="width: 80%; margin: auto;">
<canvas id="PrecioMesChart"></canvas>
</div>
</div>
<div id="datosDjango" style="display: none;">{{ datos_expedia | safe | json_script:"datosDjango" }}</div>
</article>
</body>
<!-- Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<!--DataTable.js-->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<!--Custom js-->
<script src="{% static 'js/grafica_1.js' %}"></script>
<!--Script para otener el nombre del usuario-->
<script>
// Obtener el nombre del usuario
let sotoredUsuario = localStorage.getItem('usuario');
//Mostramos el nombre del usuario
if (sotoredUsuario) {
document.getElementById('nombre').innerText = sotoredUsuario
}
</script>
</html>
Y este es el código JavaScript donde estoy intentando crear la grafica:
// Recuperar los datos de Django y convertirlos a formato adecuado para Chart.js
var datos = JSON.parse('{{ datos_expedia|escapejs|safe }}');
// Crear un array para almacenar los meses y precios
var meses = datosDjango.month;
var precios = datosDjango.price_usd;
// Obtener el contexto del canvas
var ctx = document.getElementById('precioMesChart').getContext('2d');
// Crear la gráfica de dispersión
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: meses,
datasets: [{
label: 'Relación entre Precio y Mes',
data: precios,
backgroundColor: 'rgba(75, 192, 192, 0.5)', // Color de fondo
borderColor: 'rgba(75, 192, 192, 1)', // Color del borde
borderWidth: 1
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'Mes'
}
},
y: {
type: 'linear',
position: 'left',
title: {
display: true,
text: 'Precio (USD)'
}
}
}
}
});
Al parecer hasta ahí todo bien cuando agrego el cdn de la librería Chart.js me da estos errores: 1.- Uncaught ReferenceError: Chart is not defined at grafica_1.js:12:15 2.- Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1) 3. - VM337:1 Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2) at JSON.parse () at grafica_1.js:2:18
import Chart
o de la forma en que se importe esa libreriaUncaught ReferenceError
debe de ser de libreria.. Intenta con<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.js" integrity="sha512-6LKCH7i2+zMNczKuCT9ciXgFCKFp3MevWTZUXDlk7azIYZ2wF5LRsrwZqO7Flt00enUI+HwzzT5uhOvy6MNPiA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>