API tools faq
paste
Advertisement
YAMILDIAZ

REPORTES

YAMILDIAZ
Jun 19th, 2025
407
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Java 4.41 KB | Source Code | 0 0
raw download clone embed print report
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Reportes</title>
  8. </head>
  9. <body>
  10.     <jsp:include page="Nav.html"/>
  11.    
  12.     <div class="container mt-4">
  13.         <!-- Tarjetas con información -->
  14.         <section class="row">
  15.             <article class="col-12 text-center mb-4">
  16.                 <h1>
  17.                     Reportes
  18.                 </h1>
  19.             </article>
  20.            
  21.             <article class="col-md-4">
  22.                 <div class="card text-bg-primary mb-3">
  23.                     <div class="card-header">Usuarios</div>
  24.                     <div class="card-body">
  25.                         <h5 class="card-title">1,200</h5>
  26.                         <p class="card-text">Usuarios registrados.</p>
  27.                     </div>
  28.                 </div>
  29.             </article>
  30.             <article class="col-md-4">
  31.                 <div class="card text-bg-success mb-3">
  32.                     <div class="card-header">Total de $ Prestamos</div>
  33.                     <div class="card-body">
  34.                         <h5 class="card-title">25,000,000</h5>
  35.                         <p class="card-text">Total dinero prestado.</p>
  36.                     </div>
  37.                 </div>
  38.             </article>
  39.             <article class="col-md-4">
  40.                 <div class="card text-bg-warning mb-3">
  41.                     <div class="card-header">Cantidad de prestamos</div>
  42.                     <div class="card-body">
  43.                         <h5 class="card-title">350</h5>
  44.                         <p class="card-text">Total prestamos.</p>
  45.                     </div>
  46.                 </div>
  47.             </article>
  48.         </section>
  49.    
  50.         <!-- Gráficos -->
  51.         <div class="row">
  52.             <div class="col-12">
  53.                 <div class="card">
  54.                     <div class="card-header">Prestamos por mes ($)</div>
  55.                     <div class="card-body">
  56.                         <canvas id="barChart"></canvas>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.             <div class="col-md-6 mt-3 mb-3">
  61.                 <div class="card">
  62.                     <div class="card-header">Resumen del mes</div>
  63.                     <div class="card-body">
  64.                         <canvas id="pieChart"></canvas>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.             <div class="col-md-6 mt-3 mb-3">
  69.                 <div class="card">
  70.                     <div class="card-header">Resumen del mes</div>
  71.                     <div class="card-body">
  72.                         <canvas id="pieChart2"></canvas>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.     </div>
  78.  
  79. <!-- Script para gráficos con Chart.js -->
  80. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  81. <script>
  82.     // Gráfico de Barras
  83.     var ctxBar = document.getElementById('barChart').getContext('2d');
  84.     var barChart = new Chart(ctxBar, {
  85.         type: 'bar',
  86.         data: {
  87.             labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Nobiembre', 'Diciembre'],
  88.             datasets: [{
  89.                 label: 'Prestamos por mes ($)',
  90.                 data: [3456, 7890, 14567, 2345, 19876, 5678, 12345, 9876, 15000, 2001, 17500, 3000],
  91.                 backgroundColor: 'rgba(54, 162, 235, 0.5)',
  92.                 borderColor: 'rgba(54, 162, 235, 1)',
  93.                 borderWidth: 1
  94.             }]
  95.         },
  96.         options: {
  97.             responsive: true,
  98.             scales: {
  99.                 y: {
  100.                     beginAtZero: true
  101.                 }
  102.             }
  103.         }
  104.     });
  105.  
  106.     // Gráfico de Torta
  107.     var ctxPie = document.getElementById('pieChart').getContext('2d');
  108.     var pieChart = new Chart(ctxPie, {
  109.         type: 'pie',
  110.         data: {
  111.             labels: ['Prestamos aprobados', 'Prestamos rechazados'],
  112.             datasets: [{
  113.                 data: [30, 70],
  114.                 backgroundColor: ['#FFCE56', '#4BC0C0']
  115.             }]
  116.         },
  117.         options: {
  118.             responsive: true
  119.         }
  120.     });
  121.    
  122.     var ctxPie = document.getElementById('pieChart2').getContext('2d');
  123.     var pieChart = new Chart(ctxPie, {
  124.         type: 'pie',
  125.         data: {
  126.             labels: ['Alta de cliente', 'Baja de cliente'],
  127.             datasets: [{
  128.                 data: [85, 15],
  129.                 backgroundColor: ['#FF6384', '#36A2EB']
  130.             }]
  131.         },
  132.         options: {
  133.             responsive: true
  134.         }
  135.     });
  136. </script>
  137.    
  138. </body>
  139. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!