Lección: 78 Instalar y utilizar CHART.JS para reportes del Sistema de Gestión Escolar(PHP y MySql)FullStack

78 Instalar y utilizar CHART.JS para reportes del Sistema de Gestión Escolar(PHP y MySql)FullStack

Duración: 16 min

Módulo: 📤 Importación Masiva y Gráficos Lección 3 de 6

Descripción

LECCIÓN 78: Instalar y utilizar CHART.JS para reportes del Sistema de Gestión Escolar 📊

Esta lección marca el inicio del Módulo de Reportes, pero comienza resolviendo un error crítico de la lección anterior y luego se enfoca en la instalación y demostración de la librería Chart.js para la visualización de datos.

1. Corrección Crítica del Bug de Notas Repetidas 🐞

Antes de iniciar el módulo de reportes, se corrigió un error fatal causado por la importación masiva de estudiantes que provocaba que las calificaciones de los alumnos antiguos se repitieran en los campos vacíos de los estudiantes nuevos [01:00].

Causa: La inicialización de las variables de nota (ej. $nota, $n1, $n2) estaba fuera del bucle (foreach) que recorría a los estudiantes. Esto hacía que la última nota calculada en la iteración anterior se arrastrara e imprimiera como valor por defecto en los estudiantes que no tenían una calificación asignada [01:59].
Solución: Se movió la inicialización de las variables de nota dentro del bucle foreach [02:30]. Esto garantiza que las variables se reinicien a un valor nulo o en blanco en cada iteración, mostrando solo la nota real si existe, o un campo vacío si no la hay [02:40].

2. Instalación de Chart.js y Estructura de Reportes

Una vez subsanado el error de calificaciones, se procede a implementar la librería de gráficos Chart.js, tal como se había planificado.

Inclusión de la Librería: Se incorporó la librería Chart.js al proyecto mediante su CDN (Content Delivery Network) en la parte superior del archivo index.php del módulo de Reportes [06:50].
Estructura de la Vista: La vista se divide en dos columnas (col-6) para mostrar dos gráficos simultáneamente [06:21].
Elemento Canvas: Cada reporte se genera dentro de un elemento <canvas> que actúa como contenedor. Se asignaron identificadores únicos a cada uno:
- Primer Reporte: miChart [07:39]
- Segundo Reporte: miChart2 [14:15]

3. Creación y Demostración de los Gráficos

Se armaron dos ejemplos de gráficos para demostrar el uso de Chart.js con datos ficticios.

Reporte 1: Estudiantes por Grado (Gráfico de Línea)

Propósito: Mostrar la cantidad de estudiantes registrados por cada nivel académico.
Tipo de Gráfico: Línea (type: 'line') [08:15].
Etiquetas (Labels): Se definieron manualmente todas las denominaciones de grados académicos del sistema (Inicial 1, Inicial 2, Primaria 1-6, Secundaria 1-6) [09:29].
Título del Gráfico: "Estudiantes por grados" [11:34].

Reporte 2: Estudiantes Inscritos por Meses (Gráfico de Barras)

Propósito: Mostrar cuántos estudiantes se inscribieron en el sistema por cada mes del año.
Tipo de Gráfico: Barra (type: 'bar') [13:29].
Etiquetas (Labels): Los meses (Enero, Febrero, Marzo, etc.) [15:15].

Próximo Paso: Los datos utilizados en ambos gráficos son actualmente ficticios [11:42]. La siguiente lección se centrará en crear un controlador para realizar consultas a la base de datos y obtener estos datos de forma automática para hacer los reportes funcionales [11:50].

Hilari Web