Funcionando con un gráfico

Finanzas/finanzas/apuntes/urls.py

@@ -15,8 +15,7 @@ urlpatterns = [
     path('apuntes/<int:apunte_id>/editar/', views.editar_apunte, name='editar_apunte'),
     path('apuntes/<int:apunte_id>/eliminar/', views.eliminar_apunte, name='eliminar_apunte'),
 
-    path('apuntes/chart-data/', views.chart_data, name='chart_data'),
-    path('apuntes/chart/', views.chart_view, name='chart_view'),
-
+    path('apuntes/datos_grafico_bancos/', views.datos_grafico_bancos, name='datos_grafico_bancos'),
+    path('apuntes/grafico_bancos/', views.grafico_bancos_view, name='grafico_bancos_view'),
 
 ]

Finanzas/finanzas/apuntes/views.py

@@ -130,20 +130,23 @@ def eliminar_apunte(request, apunte_id):
     return redirect('lista_apuntes')
 
 @login_required
-def chart_data(request):
-    datos = Cuenta.objects.all()
+def datos_grafico_bancos(request):
+    datos = Cuenta.objects.filtern class="p">(tipo=Tipo.objects.get(tipo="Banco")) | Cuenta.objects.filter(tipo=Tipo.objects.get(tipo="Ahorro"))
 
     etiquetas = [item.nombre for item in datos]
     valores = [item.saldo_actual for item in datos]
 
-    chart_data = {
-        'label': 'Gráfico',
+    print(etiquetas)
+
+    datos_grafico_bancos = {
+        'label': 'Bancos',
         'labels': etiquetas,
         'values': valores,
+
         'chart_type': 'bar' # any chart type line, bar, ects
         }
 
-    return JsonResponse(chart_data)
+    return JsonResponse(datos_grafico_bancos)
 
-def chart_view(request):
-    return render(request, 'apuntes/chart.html')
+def grafico_bancos_view(request):
+    return render(request, 'apuntes/grafico_bancos.html')

Finanzas/finanzas/templates/_cabecera.html

@@ -109,7 +109,7 @@
 
                     <li class="nav-item">
                         <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
-                        <a class="nav-link" href="{% url 'chart_view' %}">
+                        <a class="nav-link" href="{% url 'grafico_bancos_view' %}">
                             <span class="nav-icon">
                             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>

Finanzas/finanzas/templates/_head.html

@@ -20,7 +20,21 @@
     <!-- App CSS -->  
     <link id="theme-style" rel="stylesheet" href="{% static 'css/portal.css' %}">
 
-    <!-- Include Chart.js via CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Include Chart.js via CDN
+    <script src="{% static 'js/chart.js' %}"></script>-->
 
+         <!-- Javascript -->
+    <script src="{%  static 'plugins/popper.min.js' %}"></script>
+    <script src="{%  static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
+
+    <!-- Charts JS -->
+    <script src="{%  static 'plugins/chart.js/chart.min.js' %}"></script>
+    <script src="{%  static 'js/index-charts.js' %}"></script>
+
+    <!-- La línea siguiente es para la demo de los charts en charts.html -->
+    <script src="{%  static 'js/charts-demo.js' %}"></script>
+
+
+    <!-- Page Specific JS -->
+    <script src="{%  static 'js/app.js' %}"></script>
 </head> 

Finanzas/finanzas/templates/apuntes/chart.html

@@ -1,44 +0,0 @@
-{% extends 'base.html' %}
-
-{% block content %}
-
-<div class="container-xl">
-
-    <h1 class="app-page-title">Gráficos</h1>
-
-    <div class="app-card app-card-notification shadow-sm mb-4">
-        <div style="width: 50%; margin: 0 auto;">
-            <canvas id="myChart"></canvas>
-        </div>
-
-        <script>
-            document.addEventListener('DOMContentLoaded', function () {
-                fetch('/apuntes/apuntes/chart-data/')
-                    .then(response => response.json())
-                    .then(data => {
-                        const ctx = document.getElementById('myChart').getContext('2d');
-
-                        new Chart(ctx, {
-                            type: data.chart_type,
-                            data: {
-                                labels: data.labels,
-                                datasets: [{
-                                    label: data.label,
-                                    data: data.values,
-                                }]
-                            },
-                            options: {
-                                scales: {
-                                    y: {
-                                        beginAtZero: true
-                                    }
-                                }
-                            }
-                        });
-                    });
-            });
-        </script>
-    </div>
-</div>
-
-{% endblock %}

Finanzas/finanzas/templates/apuntes/grafico_bancos.html

@@ -0,0 +1,60 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="container-xl">
+
+    <h1 class="app-page-title">Saldos de bancos</h1>
+
+    <div class="app-card app-card-notification shadow-sm mb-4">
+        <div style="width: 50%; margin: 0 auto;">
+            <canvas id="graficoBancos"></canvas>
+        </div>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function () {
+                fetch('/apuntes/apuntes/datos_grafico_bancos/')
+                    .then(response => response.json())
+                    .then(data => {
+                        const ctx = document.getElementById('graficoBancos').getContext('2d');
+
+                        new Chart(ctx, {
+                            type: data.chart_type,
+                            data: {
+                                labels: data.labels,
+                                datasets: [{
+                                    label: data.label,
+                                    data: data.values,
+                                    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)'
+                                                ],
+                                }]
+                            },
+                            options: {
+                                scales: {
+                                    y: {
+                                        beginAtZero: true
+                                    }
+                                }
+                            }
+                        });
+                    });
+            });
+        </script>
+    </div>
+</div>
+
+{% endblock %}

Finanzas/finanzas/templates/base.html

@@ -14,21 +14,6 @@
       {% include "_footer.html"  %}
 
     </div><!--//app-wrapper-->    					
-
-     <!-- Javascript -->          
-    <script src="{% static 'plugins/popper.min.js' %}"></script>
-    <script src="{%  static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>  
-
-    <!-- Charts JS -->
-    <script src="{%  static 'plugins/chart.js/chart.min.js' %}"></script> 
-    <script src="{%  static 'js/index-charts.js' %}"></script> 
-
-    <!-- La línea siguiente es para la demo de los charts en charts.html -->
-    <script src="{%  static 'js/charts-demo.js' %}"></script> 
-
-    
-    <!-- Page Specific JS -->
-    <script src="{%  static 'js/app.js' %}"></script> 
     </body>
 </html>