0

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

3
  • No tenes importada la libreria de Chart, en el código que compartiste de JS, al inicio debería de existir tu área de importaciones, algo como import Chart o de la forma en que se importe esa libreria
    – Alfa Rojo
    Commented el 23 nov. 2023 a las 18:19
  • Pero solo bastaría con importarla desde la pagina html ¿no? o ¿Tengo que agregar otro script dentro del archivo js? En la documentación de Chart.js lo hace en la misma pagina html y genera un script como yo lo quiero hacer es tener un archivo js separado. Commented el 23 nov. 2023 a las 18:29
  • Ya intentaste usar otro CDN? Porque el error de Uncaught 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>
    – Alfa Rojo
    Commented el 24 nov. 2023 a las 3:49

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.