Saltar al contenido principal

Cuadros Estadísticos

Para qué sirve​

Aquí se publican los cuadros estadísticos del instituto (ingresantes, matriculados, egresados, titulados…). Cada cuadro puede ser de dos tipos:

  • Imagen: subes una imagen del cuadro o gráfico ya hecho (por ejemplo, exportado desde una hoja de cálculo). Es la opción más sencilla.
  • Chart.js: el gráfico se dibuja en la página a partir de un texto de configuración (JSON). Es una opción avanzada; si no conoces ese formato, usa Imagen.

Cómo acceder​

Menú lateral → Transparencia → Cuadros Estadísticos (/admin/cuadros-estadisticos).

El listado de cuadros​

Listado Cuadros registrados con las columnas Nombre, Tipo, Imagen, Orden y Activo

Cada fila muestra el nombre, el tipo, una miniatura de la imagen, el orden y si está activo. En los cuadros de tipo Chart.js, la columna Imagen muestra «JSON».

Crear un cuadro de tipo imagen​

  1. Pulsa Nuevo cuadro.
  2. Escribe el Nombre y deja el Tipo en Imagen.
  3. Pulsa Guardar.
  4. En el listado, pulsa el botón de subida (flecha hacia arriba) de la columna Imagen y elige el archivo. Se guarda al momento. El mismo botón sirve para reemplazarla.

Ventana Nuevo cuadro estadístico con los campos Nombre, Orden, Activo y el interruptor Tipo en Imagen

Crear un cuadro de tipo Chart.js​

  1. Pulsa Nuevo cuadro, escribe el Nombre y cambia el Tipo a Chart.js.

  2. Pega la configuración del gráfico en JSON de configuración Chart.js. El botón Formatear ordena el texto con sangrías.

    Ventana Editar cuadro estadístico de tipo Chart.js con el editor del JSON de configuración y el botón Vista previa

  3. Pulsa Vista previa para comprobar que el gráfico se dibuja bien. Si el texto tiene un error, la vista previa lo indica.

    Ventana Vista previa del gráfico con un gráfico de barras de egresados y titulados por año

  4. Pulsa Cerrar y después Guardar. El panel pide confirmar que revisaste la vista previa: pulsa Confirmar.

    Ventana Confirmar guardado con la pregunta «¿Confirmas que el gráfico se visualiza correctamente en la vista previa?»

Si alguien del equipo prepara el gráfico, pídele el JSON completo de Chart.js: tipo de gráfico, etiquetas y datos.

Para modificar un cuadro, pulsa el lápiz ✏️. Para eliminarlo, pulsa la papelera 🗑️ y confirma.

Campos del formulario​

CampoObligatorioDescripción
NombreSíTítulo del cuadro, por ejemplo «INGRESANTES». Máximo 150 caracteres.
OrdenNoPosición en la página: los números más bajos van primero.
Activo—Si está apagado, el cuadro no se muestra en la web.
Tipo—Imagen o Chart.js.
ImagenNoJPG, PNG o WebP de hasta 5 MB. Solo para el tipo Imagen.
JSON de configuración Chart.jsSí, en tipo Chart.jsConfiguración del gráfico en formato JSON válido.

Cómo se ve en el sitio público​

En el menú del portal, Transparencia › Estadísticas (/transparencia/estadisticas). Cada cuadro es un bloque desplegable; el primero aparece abierto.

Página Estadísticas con el bloque INGRESANTES abierto mostrando la imagen del cuadro

Los cuadros de tipo Chart.js se dibujan al abrir su bloque:

Página Estadísticas con los bloques INGRESANTES y MATRICULADOS cerrados y el bloque EGRESADOS Y TITULADOS abierto con un gráfico de barras

Si no hay cuadros activos, se muestra «No hay estadísticas disponibles por el momento.».

Notas y buenas prácticas​

  • Imágenes horizontales y con letra grande: el cuadro ocupa el ancho del bloque y en celular se ve más pequeño.
  • Un cuadro por tema (ingresantes, matriculados…) en lugar de una imagen con todo junto.
  • Pon el periodo en el propio cuadro (título o leyenda) para que se entienda a qué año corresponde.
  • Revisa siempre la vista previa de los gráficos Chart.js: si el JSON tiene un error, en la web aparece «Error al renderizar el gráfico.».
Última actualización en