Ir al contenido principal
Todas las coleccionesGuías de usuario
Widgets: Gráfico de Líneas y Doble Eje
Widgets: Gráfico de Líneas y Doble Eje

Aprende cómo crear y configurar un widget de Gráfico de Líneas y de Doble Eje en Ubidots.

David Sepúlveda avatar
Escrito por David Sepúlveda
Actualizado hace más de 3 meses

Los widgets de Gráfico de Líneas y de Doble Eje son una combinación perfecta para visualizar datos de series temporales en Ubidots. Ambos widgets tienen opciones para mostrar y personalizar la visualización de datos según lo requiera cada aplicación individual. Color, intervalo de tiempo, método de agregación, entre otros, son las opciones disponibles dentro de estos dos widgets.

Requisitos

1. Crear y configurar un widget de Gráfico de Líneas/Doble Eje

Los widgets de Gráfico de Líneas y Doble Eje te permiten visualizar fácilmente datos de series temporales de una o más variables a la vez (hasta 30). Dentro de las opciones de configuración se pueden encontrar el color de la traza, el método de agregación, el intervalo de tiempo, entre otros. Todos estos están diseñados para adaptarse a la visualización deseada y los requisitos de la aplicación. Siguiendo los pasos a continuación, podrás crear y configurar un widget de Gráfico de Líneas según lo desees:

NOTA: El widget de Doble Eje sigue el mismo proceso de creación. Contiene dos ejes Y por defecto.

Paso 1: Mientras estás en un tablero, haz clic en el botón “+” en la esquina superior derecha de la pantalla.
Paso 2: Busca la opción “Gráfico de Líneas” y haz clic en ella.

Paso 3: Haz clic en la opción "Ejes Y" y configura los siguientes parámetros:

  • Nombra el eje Y.

  • Establece la posición del eje Y.

  • Ingresa el rango del Eje Y esperado. Dejar este campo vacío establecerá el rango según los valores máximos y mínimos dentro del período mostrado.

  • Habilita/deshabilita el botón de alternancia "usar prefijo SI" para agregar un prefijo de unidad del Sistema Internacional de Unidades al widget.

  • Habilita/deshabilita el botón de alternancia "ocultar valores" para ocultar o mostrar a lo largo del eje.

  • Ingresa etiquetas y líneas horizontales para mostrar umbrales personalizados. Estas líneas pueden simplificar la tarea de monitorear e identificar información en tu widget.


Paso 4: Haz clic en el botón "+ agregar variable", luego en el dispositivo que contiene la variable deseada y selecciónala. Puedes seleccionar múltiples variables del mismo o diferentes dispositivos. Para finalizar este paso, haz clic en el botón "seleccionar".

NOTA IMPORTANTE: Si tanto tu tablero como el widget de Gráfico de Líneas son dinámicos, el proceso de selección de variables será el mismo, pero en lugar de variables pertenecientes a un dispositivo específico, tu widget estará asociado a las etiquetas de variables seleccionadas.

Paso 5: Usando el selector de color junto al nombre de la variable, elige un color para la variable.


Paso 6: Selecciona el método de agregación que se aplicará a los datos de la variable. Las opciones disponibles son:

  • Crudo (sin método de agregación)

  • Máximo

  • Mínimo

  • Cuenta

  • Promedio

  • Suma

Paso 7: Si se eligió "crudo" en el paso anterior, define el intervalo de tiempo que se tomará en cuenta para cada variable. Por el contrario, si se seleccionó algún método de agregación en el paso anterior, define el período de muestra de datos al cual se aplicará el método de agregación.

Con la opción "establecido por el tablero", la variable se establecerá por defecto al intervalo que definas en el selector de tiempo del tablero, mientras que la opción "últimos valores" te permite definir la cantidad de valores históricos (puntos) que se mostrarán; se pueden mostrar hasta 10,000 puntos con cualquiera de estas dos opciones.

NOTA IMPORTANTE: Si el conteo combinado de puntos supera los 10,000 puntos, Ubidots volverá a muestrear los datos, promediando, cada 5 minutos, 30 minutos, etc., para asegurar que no se supere el límite.


Paso 8: Selecciona el tipo de gráfico en el que se mostrarán los datos entre línea, área, área apilada, barras, barras apiladas, puntos o paso.


Paso 9: Elige el eje Y al que pertenecerá la variable.

2. Configura la apariencia del widget

En la pestaña de apariencia de la configuración del widget, puedes hacer lo siguiente:

  • Nombra tu widget de Gráfico de Líneas.

  • Elige un formato de fecha.

  • Define el número de decimales que se mostrarán en el widget. La opción "auto" hereda el número definido a nivel de cuenta.

  • Habilita/deshabilita el interruptor para mostrar leyendas para cada variable.

  • Activa/desactiva el zoom de datos del eje X.

  • Etiqueta tu eje X.

  • Selecciona una fuente y su tamaño.

  • Define un color de fondo para tu widget.

  • Sube una imagen de fondo para tu widget.

  • Personaliza a fondo la forma en que se ve el contenido del widget usando la opción de configuración de ECharts.

  • Con la opción de Estilo personalizado, edita la forma en que se ve el widget. Si la configuración de ECharts controla el "contenido" del widget, entonces el estilo personalizado controla el "contenedor".

Por último, haz clic en el botón "guardar" para finalizar la creación de tu widget.

¿Ha quedado contestada tu pregunta?