Columnas agrupadas

📌 ¿Qué son?

Las Columnas o Barras Agrupadas permiten representar más de una serie de datos para cada categoría principal, ubicando las barras una junto a otra en lugar de apilarlas. Este tipo de visualización facilita comparar varias variables simultáneamente dentro de la misma categoría.

🔍 Es útil cuando se quiere observar el comportamiento relativo entre diferentes grupos en paralelo (por ejemplo, ventas por región y por producto, o consumo por turno y por planta).

Este ejemplo sirve para realizar un seguimiento de producción mensual por producto.

• Cada barra representa un mes.

• Cada categoría es un producto (A, B, C).

• Color por producto:

  • Producto A – Rosa

  • Producto B – Lila

  • Producto C – Morado

• Objetivo de producción total mensual: 400 unidades.

🎯 ¿Cuándo usarlas?

• Comparar varias métricas dentro de una misma categoría.

• Evaluar diferentes indicadores en paralelo a lo largo del tiempo.

• Mostrar comparaciones entre grupos homogéneos (equipos, fases, líneas, etc.).

• Identificar patrones o diferencias en series similares.

📥 Formatos de Envío de Datos

▸ Desde dataset

Ejemplo de estructura:

Configuración en el panel:

• Label: Mes (etiquetas en el eje X)

• Label type: String (tipo de las etiquetas)

• Values: Producto A, Producto B, Producto C (categórias

• Popup: (cada segmento mostrará su valor, si se quieren visualizar más datos en cada segmento se seleccionan aquí)

▸ Desde MQTT

{
  "Enero": [100, 150, 130],
  "Febrero": [110, 160, 120],
  "Marzo": [90, 140, 150],
  "Abril": [120, 170, 120],
  "Mayo": [110, 150, 140],
  "Junio": [115, 155, 135],
  "Julio": [105, 165, 145],
  "Agosto": [125, 160, 130],
  "Septiembre": [100, 150, 140],
  "Octubre": [120, 155, 125],
  "Noviembre": [110, 145, 135],
  "Diciembre": [130, 165, 140]
}

🛠️ Configuración de la visualización

🔹 Estructura

• Nombre personalizado: puedes asignar un título como “Ventas 2024”.

• Ocultar nombre: si se desea una interfaz más limpia.

• Alineación: izquierda, centro o derecha.

• Tamaño del nombre: escala ajustable (ej. 0.7).

• Dimensiones: ancho y alto del bloque visual (ej. 24 x 8).

🔹 Leyenda y Animaciones

• Leyenda:

  • Ocultar/mostrar leyenda.

  • Tamaño del texto en la leyenda (ej. 0.6).

  • Número de columnas (ej. 3).

  • Centrar valores de la leyenda.

• Animaciones:

  • Activar animación al actualizar valores.

  • Duración de la animación (ej. 0.2 segundos).

🔹 Eje X

• Labels:

  • Tamaño del texto de las etiquetas del eje (ej. 0.3).

  • Color del texto.

  • Opción para mostrar labels inclinadas.

• Líneas:

  • Mostrar u ocultar todas las líneas de referencia.

  • Grosor (ej. 0.1) y color de las líneas.

🔹 Eje Y

• Rango personalizado:

  • Valor máximo (ej. 700) y mínimo.

  • Mostrar valores con decimales (ej. 2 decimales).

• Etiquetas del eje:

  • Número de intervalos (ej. 5).

  • Tamaño del texto (ej. 0.4).

  • Color del texto.

• Líneas:

  • Mostrar/ocultar líneas.

  • Grosor y color personalizable.

🔹 Configuración de Valores

• Asignación de colores a cada variable (ej. Producto A: azul, Producto B: amarillo, Producto C: violeta).

• Campos vinculados directamente por nombre a los datos recibidos.

🔹 Configuración Agrupadas

• Valor sobre la columna: activa la visualización del número directamente sobre cada barra.

• Tamaño de la letra del valor: permite ajustar la visibilidad del dato mostrado (ej. 0.4).

• Color del texto del valor: selección libre para garantizar contraste y legibilidad.

✅ Buenas Prácticas