Lección: 63 📊 Analytics: Generando Gráfico de Usuarios Registrados Mensualmente con DB Raw y ApexCharts

63 📊 Analytics: Generando Gráfico de Usuarios Registrados Mensualmente con DB Raw y ApexCharts

Duración: 12 min

Módulo: 📊 Análisis de Datos, Despliegue y Conclusión 62-68 Lección 2 de 7

Descripción

Lección 63: 📊 Análisis de Datos | Generando Gráfico de Usuarios Registrados Mensualmente con DB Raw y ApexCharts

Esta lección pone en práctica la librería ApexCharts instalada previamente, creando un gráfico dinámico que muestra el registro de clientes mes a mes, utilizando consultas directas a la base de datos de Laravel.

1. ⚙️ Preparación de la Consulta SQL Dinámica

El primer paso es construir una consulta que agrupe la información de los clientes por mes:

Consulta Agregada con DB::raw() 📝: En el controlador administrativo (AdminController), se utiliza el facade DB (Database) con la función raw para:
- Extraer el número del mes de la columna created_at (alias mes).
- Contabilizar el número de registros en ese mes (alias total).
Agrupación y Conversión 🔄: La consulta se agrupa por mes (groupBy('mes')) y se ordena (orderBy('mes')) para obtener un array que relaciona el número de mes con la cantidad de usuarios registrados en ese mes [04:40].

2. 🗃️ Normalización y Preparación de Datos Mensuales

Para que el gráfico cubra los 12 meses del año (incluso si no hay registros), los datos deben ser normalizados:

Bucle de 12 Meses 🗓️: Se recorre un array de 12 posiciones (de 1 a 12) para cada mes del año [07:27].
Asignación de Totales: Se recorre el array de la base de datos y se asigna el total de usuarios a su respectivo mes. Si un mes no tiene registros, se le asigna automáticamente un valor de 0, asegurando que el gráfico muestre una línea continua [07:18].
Envío a la Vista: Este array normalizado y listo (usuarios_data) se envía a la vista principal del dashboard (index.blade.php) [09:07].

3. 📈 Renderizado Dinámico con ApexCharts

En la vista, se ajusta el código de ApexCharts para consumir los datos normalizados:

Etiquetas de Meses 🏷️: Se establecen las etiquetas de los 12 meses (ej. Ene, Feb, Mar...) en el eje X (categories) [02:13].
Inyección de Datos 💻:
- Se utiliza Blade para convertir el array de Laravel ($usuarios_data) en una cadena JSON válida en JavaScript [09:37].
- Se extraen solo los valores (array_values) del JSON y se asignan a la propiedad series del gráfico [10:11].
Gráfico Finalizado ⭐: El gráfico se renderiza mostrando la cantidad real de clientes registrados por mes, actualizándose inmediatamente cada vez que un nuevo cliente se registra en el e-commerce [11:39].

Hilari Web