Módulo de Gráficos

El Módulo de Gráficos proporciona una forma potente y flexible de visualizar tus datos. Puedes crear varios tipos de gráficos, tablas dinámicas y cuadrículas de datos, todo configurable a través de una interfaz intuitiva.

Vista Principal del Gráfico

Cuando abres un gráfico, se te presentará la vista principal. Esta vista se divide en varias áreas clave:

Diseño de la Vista Principal del Gráfico

  1. Área de Visualización del Gráfico: Aquí es donde se renderizará tu gráfico, tabla dinámica o cuadrícula de datos seleccionada.
  2. Panel de Configuración: La barra lateral derecha que contiene las opciones de configuración del gráfico, asignaciones de campos y controles de formato.
  3. Áreas de Asignación de Campos: Zonas de arrastrar y soltar para dimensiones, medidas, colores y filtros dentro del panel de configuración.
  4. Controles de Formato: Opciones de formato del gráfico que incluyen colores, etiquetas y configuraciones de visualización en el panel de configuración.
  5. Área de la Tabla de Datos: Debajo del gráfico, una interfaz con pestañas proporciona acceso a diferentes vistas de datos:
    • Pestaña de Datos Crudos: Muestra los resultados originales de la consulta que alimentan tu gráfico
    • Pestaña de Datos del Gráfico: Muestra los datos procesados y agregados utilizados para crear la visualización

Interfaz de la Tabla de Datos

La interfaz de la tabla con pestañas en la parte inferior proporciona dos vistas de datos diferentes:

Pestaña de Datos Crudos:

  • Muestra los resultados originales de la consulta de tu base de datos
  • Muestra todos los campos y registros antes de cualquier procesamiento del gráfico
  • Ordenación: Haz clic en los encabezados de las columnas para ordenar los datos
  • Paginación: Navega a través de grandes conjuntos de datos con controles de paginación

Pestaña de Datos del Gráfico:

  • Muestra los datos procesados utilizados para crear la visualización
  • Muestra datos agregados, agrupados o filtrados según la configuración de tu gráfico
  • Refleja exactamente qué puntos de datos aparecen en tu gráfico
  • Sin Datos: Si no hay datos disponibles, mostrará "No hay datos disponibles"
  • Cargando: Mientras se procesan los datos, se mostrará un indicador de carga

Panel de Configuración del Gráfico

El panel de Configuración del Gráfico es donde defines cómo se visualizan tus datos. Se desliza desde la derecha (en el escritorio) cuando haces clic en el ícono de Engranaje.

1. Selector de Tipo de Gráfico

En la parte superior del panel, encontrarás el selector de tipo de gráfico.

  • Para cambiar el tipo de gráfico:
    1. Haz clic en el botón que muestra el ícono y el nombre del tipo de gráfico actual.
    2. Aparecerá un menú desplegable con todos los tipos de gráficos disponibles (p. ej., Cuadrícula de Datos, Tabla Dinámica, Circular, Línea, Barra, etc.), cada uno con un ícono representativo.
    3. Haz clic en el tipo de gráfico deseado.
      • Nota: Al cambiar a o desde Cuadrícula de Datos o Tabla Dinámica, la configuración de campos (Dimensión, Grupo, Valores, Filtros) se borrará para asegurar una configuración nueva. Si cambias a Cuadrícula de Datos, todos los campos disponibles se agregarán automáticamente a la sección 'Columnas'.
      • Diseño de la Vista Principal del Gráfico

2. Configuración de Campos (Arrastrar y Soltar)

La configuración de campos utiliza un diseño de panel doble con zonas de arrastrar y soltar a la izquierda y selección de campos a la derecha.

Interfaz de Configuración de Campos

Panel Izquierdo - Áreas de Configuración:

  • COLOR: Arrastra campos aquí para codificar por colores los segmentos de tu gráfico o puntos de datos
    • Colores Categóricos: Arrastra campos categóricos para asignar diferentes colores a las categorías
    • Colores de Gradiente: Arrastra campos de medida agregados para crear gradientes de color basados en la intensidad
    • Mapeo de Intensidad: Al usar campos agregados, la leyenda muestra valores de intensidad en lugar de categorías
  • ÁNGULO: Para gráficos circulares, arrastra campos de medida para determinar el tamaño de los segmentos
  • FILTROS: Arrastra campos aquí para filtrar los datos que se muestran en tu gráfico

Panel Derecho - Selección de Campos:

  • Pestaña de Campos: Explora los campos disponibles organizados por tipo
    • Dimensiones: Campos categóricos (categoria_producto, region, fecha_venta)
    • Medidas: Campos numéricos (ingresos, unidades_vendidas)
  • Pestaña de Formato: Accede a las opciones de formato y estilo para tu gráfico (las opciones varían según el tipo de gráfico)
  • Buscar Campos: Usa el cuadro de búsqueda para encontrar campos específicos rápidamente
  • + Campo Personalizado: Crea campos calculados o expresiones personalizadas

Campos Personalizados

Los campos personalizados te permiten crear campos calculados usando expresiones y funciones SQL:

Modal de Creación de Campo Personalizado

Creación de Campos Personalizados:

  1. Haz clic en el botón "+ Campo Personalizado" en el panel de Campos
  2. Ingresa el nombre del campo - Dale a tu campo personalizado un nombre descriptivo
  3. Escribe la fórmula - Ingresa tu expresión SQL en el editor de fórmulas
  4. Autocompletado - Usa el autocompletado incorporado para funciones y nombres de campos
  5. Validar - Haz clic en "Validar" para verificar la sintaxis de tu fórmula
  6. Crear Campo - Haz clic en "Crear Campo" para agregarlo a tus campos disponibles

Ejemplos de Fórmulas:

  • Agregación: SUM([fecha_venta]) - Suma valores de un campo
  • Lógica Condicional: CASE [fecha_venta] WHEN 'valor' THEN 1 ELSE 0 END - Crea cálculos condicionales
  • Operaciones Matemáticas: [ingresos] / [unidades_vendidas] - Calcula el precio promedio por unidad
  • Funciones de Cadena: CONCAT([primer_nombre], ' ', [apellido]) - Combina campos de texto
  • Funciones de Fecha: YEAR([fecha_pedido]) - Extrae el año de los campos de fecha

Características:

  • Autocompletado - Sugerencias inteligentes para funciones y nombres de campos
  • Validación de Sintaxis - Validación en tiempo real de tus fórmulas
  • Referencias de Campos - Referencia a campos existentes usando la sintaxis [nombre_campo]
  • Funciones SQL - Acceso a una gama completa de funciones y operadores SQL

Para una lista completa de funciones y sintaxis disponibles, consulta la documentación de Funciones de Campos Calculados.

3. Opciones de la Pestaña de Formato

La pestaña de Formato proporciona amplias opciones de personalización que varían según el tipo de gráfico. Aquí están las principales categorías de formato:

Opciones de Formato Específicas del Gráfico

Para Gráficos Circulares:

Opciones de Formato de Gráfico Circular

Opciones del Gráfico:

  • Mostrar Valores del Gráfico - Muestra valores numéricos en los segmentos del gráfico
  • Usar Valores de Color Para las Etiquetas - Aplica codificación de colores a las etiquetas del gráfico
  • Posición de la Etiqueta - Controla dónde aparecen las etiquetas (Por defecto, Dentro, Fuera)
  • Ángulo de Inicio - Establece la posición inicial para el primer segmento del gráfico circular (Arriba 0°, Derecha 90°, etc.)
  • Mostrar Porcentaje en las Etiquetas - Muestra porcentajes en lugar de valores brutos
  • Animar Rotación - Habilita efectos de rotación animados
  • Ancho del Borde - Establece el grosor de los bordes de los segmentos (1-10px)
  • Color del Borde - Elige el color del borde para todos los segmentos
  • Espaciado - Controla el espacio entre los segmentos del gráfico circular (0-20px)
  • Desplazamiento al Pasar el Ratón - Distancia que se mueven los segmentos al pasar el ratón por encima (0-20px)
  • Duración de la Animación - Velocidad de las animaciones del gráfico en milisegundos
  • Suavizado de la Animación - Estilo de animación (Ease Out Cubic, Linear, etc.)
  • Mostrar Líneas de Etiqueta (Etiquetas Exteriores) - Conecta las etiquetas a los segmentos con líneas

Para Gráficos de Eje X/Y (Línea, Barra, etc.):

Opciones de Formato de Gráfico X/Y

Etiqueta de Visualización:

  • Selecciona un campo para formatear - Elige qué etiquetas de campo personalizar

Eje X:

  • Título - Título personalizado para el eje X
  • Mostrar Título - Alterna la visibilidad del título del eje X
  • Mostrar Etiquetas de Datos - Muestra las etiquetas de los puntos de datos
  • Rotar Etiqueta - Ángulo para las etiquetas del eje X (Automático, 0°, 45°, 90°)
  • Opciones Avanzadas - Personalización adicional del eje X

Eje Y:

  • Título - Título personalizado para el eje Y
  • Mostrar Título - Alterna la visibilidad del título del eje Y
  • Mín/Máx - Establece límites de rango personalizados (automático o manual)
  • Tipo de Formato - Formato de número (Decimal, Moneda, Porcentaje)
  • Lugares Decimales - Número de lugares decimales a mostrar
  • Tipo de Escala - Escala lineal o logarítmica
  • Opciones Avanzadas - Personalización adicional del eje Y

Leyenda:

  • Mostrar Leyenda - Alterna la visibilidad de la leyenda del gráfico
  • Posición - Ubicación de la leyenda (Arriba, Abajo, Izquierda, Derecha)
  • Mostrar Título - Muestra el título de la leyenda
  • Título - Texto del título de la leyenda personalizado

Áreas de Configuración:

Opciones de Agrupación y Agregación de Fechas

  • Filtros:
    • Arrastra campos aquí para filtrar los datos que se muestran en tu gráfico.
  • Dimensión / Filas (para Tabla Dinámica):
    • Categoría principal o eje x. Para Tablas Dinámicas, estos son los campos de fila.
  • Grupo / Columnas (para Tabla Dinámica):
    • Campo opcional para subdividir, creando gráficos agrupados/apilados. Para Tablas Dinámicas, estos son los campos de columna.
  • Valores / Columnas (para Cuadrícula de Datos):
    • Campos numéricos a agregar o mostrar. Para Cuadrículas de Datos, estas son las columnas de la cuadrícula.

Opciones de Configuración de Campos

Cuando se asignan campos a las áreas del gráfico, se dispone de opciones de configuración adicionales:

Agrupación de Campos de Fecha: Cuando se utilizan campos de fecha (como fecha_venta) en el eje X o en dimensiones, puedes controlar cómo se agrupan las fechas:

  • Ordenar Por - Controla el orden de los valores de fecha (Por defecto, Ascendente, Descendente)
  • Opciones de Formato de Fecha - Controla cómo se muestran y agrupan las fechas:
    • Año - Agrupa por año (2023, 2024, etc.)
    • Trimestre - Agrupa por trimestres (T1, T2, T3, T4)
    • Mes - Agrupa por mes (Ene, Feb, Mar, etc.)
    • Semana - Agrupa por períodos semanales
    • Día - Muestra días individuales
    • Fecha y hora exactas - Muestra la precisión completa de la marca de tiempo

Modo de Agregación: Para los campos de medida, selecciona cómo se deben agregar los datos:

  • Sin Agregación - Usa los valores brutos del campo sin agregación
  • Contar - Cuenta el número de registros
  • Suma - Suma todos los valores del campo
  • Promedio - Calcula la media de todos los valores
  • Mínimo - Encuentra el valor más pequeño
  • Máximo - Encuentra el valor más grande
  • Eliminar - Elimina el campo del gráfico

Acciones de Campo:

  • Agrega campos aquí... - Texto de marcador de posición para áreas de campo vacías
  • Arrastra para reemplazar el campo - Reemplaza los campos existentes arrastrando nuevos sobre ellos
  • Eliminar campos - Usa la opción de agregación "Eliminar" para eliminar campos no deseados

4. Requisitos del Tipo de Gráfico

Cada tipo de gráfico tiene requisitos y restricciones de campo específicos. Los gráficos se guardan automáticamente a medida que realizas cambios, por lo que no es necesario guardar manualmente tus configuraciones.

Para obtener información detallada sobre los requisitos de campo, las restricciones y el comportamiento de cada tipo de gráfico, consulta:

Tipos de Gráficos - Requisitos y Restricciones

Esta guía completa cubre:

  • Requisitos de campo para todos los tipos de gráficos (Línea, Barra, Circular, Dispersión, etc.)
  • Variaciones del comportamiento del campo de color
  • Tabla de referencia rápida
  • Restricciones y limitaciones específicas del gráfico

5. Opciones Específicas del Gráfico

a. Opciones de Tabla Dinámica

Cuando se selecciona el tipo de gráfico Tabla Dinámica, la pestaña Formato proporciona una configuración completa de la tabla dinámica:

Opciones de Tabla Dinámica

Opciones de Diseño:

  • Área de Campo de Datos: Elige dónde aparecen los campos de datos (Columna, Fila, etc.)
  • Diseño del Encabezado de Fila: Controla la estructura del encabezado de fila (Árbol, etc.)
  • Mostrar Totales Antes: Configura cuándo aparecen los totales (Ninguno, etc.)

Características de Visualización:

  • Mostrar Totales Generales de Columna: Muestra los totales de todas las columnas
  • Mostrar Totales de Columna: Muestra los totales de las columnas individuales
  • Mostrar Totales Generales de Fila: Muestra los totales de todas las filas
  • Mostrar Totales de Fila: Muestra los totales de las filas individuales

Opciones de Funcionalidad:

  • Permitir Ordenación: Habilita la ordenación de columnas y filas
  • Permitir Ordenación por Resumen: Ordena por valores de resumen calculados
  • Permitir Filtrado: Habilita las capacidades de filtrado de datos
  • Exportación Habilitada: Permite a los usuarios exportar datos de la tabla dinámica
  • Mostrar Bordes: Muestra los bordes de la tabla para una mejor legibilidad
  • Ajuste de Palabra Habilitado: Habilita el ajuste de texto en las celdas

Scripting Personalizado:

  • Script Personalizado al Preparar Celda: Personalización avanzada de JavaScript para el renderizado y comportamiento de las celdas

b. Opciones de Cuadrícula de Datos

Cuando se selecciona el tipo de gráfico Cuadrícula de Datos, la pestaña Formato proporciona opciones de configuración específicas de la tabla:

Opciones de Cuadrícula de Datos

Características Principales:

  • Permitir Filtrado: Habilita las capacidades de filtrado a nivel de columna
  • Paginación Habilitada: Habilita la paginación para grandes conjuntos de datos
  • Tamaño de Página: Establece el número de filas por página (p. ej., 15, 25, 50)
  • Permitir Exportación: Habilita la funcionalidad de exportación de datos

Opciones de Visualización:

  • Ancho Automático de Columna: Ajusta automáticamente el ancho de las columnas al contenido
  • Mostrar Bordes: Muestra los bordes de la tabla para una mejor legibilidad
  • Mostrar Líneas de Fila: Muestra líneas horizontales entre filas
  • Mostrar Líneas de Columna: Muestra líneas verticales entre columnas
  • Alternancia de Filas: Alterna los colores de fondo de las filas para una lectura más fácil

Configuración de Ordenación:

  • Modo de Ordenación: Controla el comportamiento de la ordenación (Múltiple, Único, Ninguno)
    • Múltiple: Permite ordenar por múltiples columnas simultáneamente
    • Único: Permite ordenar por una columna a la vez
    • Ninguno: Deshabilita la ordenación por completo

Tipos de Gráficos y Visualización

1. Gráficos Estándar (p. ej., Circular, Línea, Barra)

  • Requisitos de Configuración: Los campos de Dimensión y Valores son esenciales. El Grupo es opcional.
  • Visualización: Si la configuración está incompleta, aparece un mensaje. Un gráfico configurado correctamente se renderizará según tus ajustes.

2. Tabla Dinámica

  • Requisitos de Configuración: Al menos un campo en Filas, Columnas o Valores.
  • Visualización: Resume los datos en un formato de tabla cruzada.

3. Cuadrícula de Datos

  • Requisitos de Configuración: Los campos en el área "Columnas" (Valores) definen las columnas de la cuadrícula.
  • Visualización: Muestra los datos en una tabla rica en características.

Función de Autoguardado

Los gráficos se guardan automáticamente a medida que realizas cambios:

  • Las asignaciones de campos se guardan instantáneamente cuando arrastras y sueltas
  • Los cambios de formato se aplican y guardan automáticamente
  • Los cambios de tipo de gráfico se guardan inmediatamente
  • No se requiere ninguna acción de guardado manual

Solución de Problemas

  • Mensaje "Por favor, comprueba tu configuración...": Revisa los requisitos de campo para el tipo de gráfico elegido.
  • El gráfico/tabla no se actualiza: Intenta un pequeño cambio en el panel de configuración. Los cambios deberían aplicarse automáticamente debido al autoguardado.
  • Los scripts personalizados no funcionan: Comprueba si hay errores de sintaxis en tu código (usa la consola de desarrollador del navegador para ver los errores). Asegúrate de que estás utilizando los objetos options o e proporcionados correctamente.