Librería de visualizaciones

Table of Content

Table of Content

Table of Content

Connected dots

📌 ¿Qué son?

El gráfico Connected Dots representa una serie de datos individuales donde cada elemento muestra:

  • Un rango mínimo–máximo esperado o permitido.

  • Un objetivo de referencia (target).

  • Un valor actual reportado.

🔍Se visualiza típicamente como una línea con puntos conectados. Cada punto muestra su posición relativa dentro del rango y respecto al objetivo, permitiendo evaluar desviaciones visualmente.

🎯 ¿Cuándo usarlas?

  • Comparar múltiples variables con valores independientes entre sí.

  • Visualizar desviaciones respecto a objetivos dentro de un rango definido.

  • Evaluar indicadores de calidad, tolerancia, cumplimiento o desempeño técnico en múltiples unidades.

  • Ideal para paneles comparativos donde se debe observar si cada unidad está “dentro de rango” o “fuera de objetivo”.

📥 Formatos de Envío de Datos

▸ Desde dataset

Ejemplo de estructura:

Indicador

Mínimo (%)

Máximo (%)

Objetivo (%)

Valor Actual (%)

Indicador A

50

100

85

90

Indicador B

45

95

85

82

Indicador C

40

90

85

88

Indicador D

55

100

85

75

Indicador E

50

98

85

80

Indicador F

60

100

85

92

  • Label: Hora (etiquetas en el eje X)

  • Label type: String (tipo de las etiquetas)

  • Values: Valor actual, Objetivo

  • ValueMin: Mínimo

  • ValueMax: Máximo

▸ Desde MQTT

{
  "Connected dots MQTT": [
    { "A": { "min": 50, "max": 100, "target": 85, "value": 90 } },
    { "B": { "min": 45, "max": 95, "target": 85, "value": 82 } },
    { "C": { "min": 40, "max": 90, "target": 85, "value": 88 } },
    { "D": { "min": 55, "max": 100, "target": 85, "value": 75 } },
    { "E": { "min": 50, "max": 98, "target": 85, "value": 80 } },
    { "F": { "min": 60, "max": 100, "target": 85, "value": 92 } }
  ]
}