Columnas/barras simples

📌 ¿Qué son?

La visualización Columnas, Barras Simples y Barras con círculos permite representar una única variable o serie de datos a lo largo de un conjunto de categorías o unidades temporales. Cada valor se muestra como una barra individual (vertical o horizontal), facilitando la comparación clara y directa entre elementos. En el caso de las barras con círculos se representan tantos círculos como cantidad del dato (recomendable para cantidades <20).

🔍 Es uno de los formatos más directos para mostrar tendencias básicas o distribuciones simples, y es especialmente útil en vistas de operación donde se quiere evitar saturación visual.

Columnas	Barras	Círculos

🎯 ¿Cuándo usarlas?

• Comparación de cantidades o magnitudes entre distintas categorías o unidades.

• Visualizar cómo varía un único indicador en distintas unidades de tiempo.

• Representar la cantidad total distribuida entre diferentes categorías independientes.

• Mostrar un ranking ordenado de mayor a menor o de mejor a peor.

📥 Formatos de Envío de Datos

▸ Desde dataset

Ejemplo de estructura:

• Se define en el panel:

  • Label: Mes(categoría que se mostrará en el eje)

  • Label type: String

  • Value: Ventas (valor que determina el tamaño de la columna/barra o el número de círculos)

  • Value type: Number

  • Popup: Producto B, Producto C

  

▸ Desde MQTT

🛠️ Configuración de la visualización

Una vez que el KPI tipo etiqueta ha sido creado desde el Panel Admin, en la App de visualización 3D es posible ajustar su apariencia visual, comportamiento según umbrales y otros aspectos gráficos. Estos se agrupan en las siguientes secciones:

🔹 Estructura

Configuración del Nombre

• Personalizar Nombre: permite reemplazar el nombre automático del KPI por un nombre definido manualmente.

• Ocultar Nombre: esconde el nombre del gráfico si se desea una visualización más limpia.

• Alineación del Nombre: opciones de alineación horizontal (izquierda, centro, derecha).

• Personalizar Tamaño del Nombre:

  • Escala del tamaño de fuente del nombre (0.4, 0.9, etc.).

Dimensiones

• Ancho y Alto de la tarjeta/forma de la etiqueta.

  • Valores numéricos proporcionales (ej: 10 y 8).

🔹 Configuración de Etiqueta

Eje (valores de referencia para visualización proporcional)

• Valor máximo: valor considerado 100% (relleno total).

• Valor mínimo: valor considerado 0% (relleno vacío).

• Color del valor correcto: se aplica si el valor está dentro del rango deseado.

• Color del objetivo: representa visualmente el target con fondo blanco o barra secundaria.

• Color del valor por encima del objetivo: para destacar si se supera el valor objetivo.

Datos (umbrales semánticos)

• Umbral máximo / mínimo: definen el rango esperado del valor.

• Color por encima del umbral: se activa si el dato sobrepasa el máximo.

• Color por debajo del umbral: para valores anómalamente bajos.

🔹 Leyenda y Animaciones

Leyenda

• Ocultar Leyenda: permite eliminar la leyenda si no se requiere.

• Tamaño de los valores de la leyenda: escala del texto de la leyenda.

• Número de columnas: organiza los elementos de la leyenda en n columnas.

• Centrar valores de la leyenda: centra el texto dentro del área de la leyenda.

Animaciones

• Activar animación al actualizar valores: hace que las barras se actualicen con animación cuando llegan nuevos datos.

• Duración de la animación: define la velocidad de la animación (en segundos).

🔹 Gráfica de Barras Simples

Colores

• Color de columna de valor: selecciona el color de las barras de la gráfica.

Valores

• Mostrar valor: activa/desactiva el número encima de cada barra.

• Tamaño de la etiqueta valor: ajusta el tamaño de fuente de los valores que aparecen sobre las barras.

Dimensiones

• Espaciado entre columnas: controla el espacio entre las barras (0.9, 1.0, etc.), afectando la densidad visual.

🔹 Visualización simple (sin ejes)

• Usar visualización simple: elimina los ejes y muestra solo las barras, ideal para dashboards minimalistas o gráficos decorativos.

🔹 Configuración del eje Y

Personalización de valores

• Máximo y mínimo personalizados: permite fijar un rango específico en el eje Y.

• Valor Máximo: define el valor superior del eje.

• Mostrar valores con decimales: si se activa, los valores del eje pueden tener decimales.

• Número de decimales: cantidad de decimales a mostrar (0, 1, 2, etc.).

Personalización de labels

• Número de intervalos en el eje: divide el eje Y en segmentos para facilitar la lectura.

• Tamaño de la letra del label: escala del tamaño de los números en el eje.

• Color de la letra del label: personalización del color de las etiquetas del eje.

Líneas

• Mostrar líneas: activa las líneas de referencia horizontales (gridlines).

• Ocultar todas las líneas: elimina todas las líneas de la gráfica.

• Tamaño de la línea: grosor de las líneas de referencia.

• Color de las líneas: define el color de las líneas del grid.

✅ Buenas Prácticas