Saltar al contenido principal

Gráfico de Líneas

El elemento Gráfico de Líneas permite visualizar la evolución de una o más variables en un diagrama cartesiano. Es fundamental para analizar tendencias, monitorear procesos continuos y comparar el comportamiento de diferentes señales simultáneamente.

Este componente dispone de dos modos principales de funcionamiento, configurables mediante la propiedad Tipo de datos en la pestaña Avanzado:

  • Histórico: Muestra los datos almacenados previamente en el registro de históricos del sistema, permitiendo consultar la evolución de las variables en periodos de tiempo pasados.
  • Tiempo Real: Representa los valores de las variables en vivo a medida que el sistema los recibe, proporcionando una visión inmediata del comportamiento actual del proceso.

Las propiedades marcadas con bolt permiten dinamización a partir de una expresión con variables.

General​

Configuración básica de identificación y posición.

Nombre (string)​

Identificador único del elemento.

Descripción (string)​

Texto descriptivo opcional.

X bolt (number)​

Posición horizontal en píxeles.

Y bolt (number)​

Posición vertical en píxeles.

Z bolt (number)​

Índice de profundidad (z-index).

Ancho bolt (number)​

Anchura del elemento en píxeles.

Alto bolt (number)​

Altura del elemento en píxeles.

Estilo​

Personalización visual del componente y su interfaz.

Oculto bolt (boolean)​

Hace invisible el elemento.

Color bolt (color)​

Color principal aplicado a los elementos del gráfico.

Color de fondo bolt (color)​

Color de fondo del área del gráfico.

Color de interfaz (color)​

Color de los elementos de la interfaz, como ejes y rejillas de fondo.

Color de botones (color)​

Color aplicado a los botones de la interfaz de usuario del propio widget.

Color de borde bolt (color)​

Color global del borde.

Color de borde [Superior/Inferior/Izquierdo/Derecho] (color)​

Permite definir un color específico para cada lado del borde.

Radio de borde bolt (number)​

Redondeo de las esquinas del contenedor en píxeles.

Ancho del borde bolt (number)​

Grosor global del borde en píxeles.

Ancho del borde [Superior/Inferior/Izquierdo/Derecho] (number)​

Grosor específico para cada uno de los lados.

Estilo de borde bolt (string)​

Tipo de trazo global (Sólido, Punteado, etc.).

Estilo de borde [Superior/Inferior/Izquierdo/Derecho] (string)​

Tipo de trazo específico para cada lado del borde.

Tamaño fuente (number)​

Tamaño del texto de las etiquetas y valores de los ejes.

Rotar bolt (number)​

Ángulo de rotación del elemento en grados.

Transición (string)​

Definición CSS de transición para animar cambios de estado.

Punto de anclaje [Vert./Horiz.] (string)​

Define la posición de referencia respecto a los ejes vertical y horizontal.

Sombra bolt (string)​

Estilo de sombra predefinido (Ninguna, Pequeña, Media, Grande).

Avanzado​

Configuración del comportamiento de datos y funcionalidades del widget.

Botones de control (boolean)​

Habilita la visualización de dos botones de interacción en la parte inferior del gráfico que facilitan el análisis de los datos:

  • play_arrow Reproducción / pause Pausa: Detiene o reanuda el movimiento del gráfico en tiempo real. Esto permite que el gráfico no siga avanzando, facilitando la realización de zoom (con el scroll del ratón) y la navegación por la línea temporal (pinchando y arrastrando) para inspeccionar datos específicos. Nota: Este botón solo es funcional cuando el Tipo de datos está configurado como Tiempo Real.
  • replay Reiniciar: Restablece instantáneamente la vista del gráfico, eliminando el zoom aplicado y volviendo a la posición inicial en la línea temporal. Es muy útil para recuperar la vista estándar rápidamente después de haber explorado los datos.

Filtro de fecha (boolean)​

Habilita dos campos de selección de fecha y hora (Desde y Hasta) en la parte superior del gráfico. Esta funcionalidad es exclusiva para el modo de Tipo de datos configurado como Histórico.

  • Funcionamiento inteligente: Al aplicar un filtro, el sistema comprueba si ya dispone de los datos requeridos. Si no es así, realiza una consulta automática al servidor para obtenerlos y representarlos. Si los datos ya fueron descargados previamente, la visualización es instantánea, optimizando el rendimiento y el consumo de red.
  • Carga inicial: Por defecto, al cargar el componente, se muestran los datos correspondientes al periodo comprendido entre la fecha actual y el tiempo definido en la propiedad Ancho (en segundos).
  • Consideraciones de rendimiento:
    • Rangos de fechas muy amplios pueden aumentar el tiempo de respuesta debido al volumen de información a procesar.
    • La velocidad de carga también depende del intervalo de muestreo configurado en el histórico de las variables; un intervalo muy bajo implica una mayor densidad de datos y, por tanto, consultas más pesadas.

Mostrar leyenda (boolean)​

Muestra una leyenda interactiva que identifica cada serie de datos mediante su color y nombre de variable. Al hacer clic sobre cualquier elemento de la leyenda, se puede ocultar o mostrar la serie de datos correspondiente de forma instantánea, permitiendo limpiar el área de trazado para centrar el análisis únicamente en las variables de interés.

Mostrar valor sobre línea (boolean)​

Habilita una ventana emergente informativa (tooltip) que aparece al desplazar el puntero del ratón sobre las series de datos. Esta ventana muestra de forma sincronizada los valores numéricos exactos de todas las líneas presentes en ese instante preciso de tiempo, facilitando la lectura puntual de los datos sin necesidad de estimar su valor sobre el eje vertical.

Tipo de datos (string)​

Determina si el gráfico muestra información actual o del pasado:

  • Histórico: Busca los valores guardados en la base de datos de históricos del sistema. Este modo permite usar el Filtro de fecha para consultar cualquier periodo anterior. Es útil para analizar fallos ocurridos o revisar tendencias de días pasados.
  • Tiempo Real: Muestra los datos en vivo a medida que llegan y el gráfico avanza automáticamente. Permite usar el botón de Reproducción / Pausa para detener el avance temporal y observar con calma los datos actuales.

Serie de datos (Array)​

Configuración de las señales representadas en el gráfico. Para que el elemento funcione correctamente, debe contener al menos una serie definida. Aunque se pueden añadir tantas como sean necesarias, se debe considerar que un número muy elevado de series podría impactar en el rendimiento. Cada serie permite configurar:

  • Variable: Selección del Tag cuyos valores se van a representar.
  • Color: Permite elegir un color personalizado para identificar la línea de la serie en el gráfico.
  • Escala Y: Permite asociar la serie a una de las dos escalas verticales definidas previamente, determinando así su rango de representación.

Escala Y (Array)​

Define los ejes verticales utilizados para representar los valores de las series. El gráfico permite configurar hasta un máximo de dos escalas (izquierda y derecha), lo cual es ideal para comparar variables con diferentes rangos o unidades. Cada escala cuenta con las siguientes propiedades:

  • Nombre: Etiqueta que aparecerá en la parte superior del eje para identificar la escala.
  • Unidad: Texto (como %, Ud., ºC) que se muestra junto a los valores del eje para dar contexto a la magnitud representada.
  • min / max: Definen el rango numérico (límite inferior y superior) que abarcará la escala en el gráfico.

Intervalo (segundos) (number)​

Propiedad opcional que define la frecuencia con la que se actualiza el trazado del gráfico.

  • Modo de funcionamiento: Esta configuración solo es efectiva cuando el Tipo de datos está configurado como Tiempo Real.
  • Rendimiento: Establecer intervalos muy pequeños puede sobrecargar el navegador y afectar al rendimiento de la visualización.
  • Limitaciones: Reducir este valor no hace que los datos se lean más rápido del sistema. Si el intervalo es inferior a la tasa de cambio real de la variable, el gráfico mostrará puntos redundantes o repetidos.

Ancho (en segundos) (number)​

Define la ventana de tiempo que se visualiza por defecto en el eje horizontal (eje X).

  • Carga inicial de datos: Este valor determina qué cantidad de histórico se descarga automáticamente al abrir el gráfico. Se aplica tanto en el modo Histórico como en Tiempo Real, lo que permite visualizar la evolución reciente de las variables de forma inmediata sin tener que esperar a que se reciban nuevos datos.
  • Impacto en el rendimiento: Debe usarse con precaución; establecer un ancho de tiempo excesivamente grande obligará al sistema a procesar una mayor cantidad de registros durante la carga inicial, lo que puede aumentar el tiempo de respuesta y mermar la fluidez del gráfico.