Los widgets de medidor circular te permiten visualizar el estado de hasta 4 variables al mismo tiempo, compararlas gráficamente entre sí o mostrar qué tan cerca están las variables de sus límites correspondientes.
En este artículo, aprenderás cómo crear un widget de medidor circular.
Requisitos
Una cuenta activa de Ubidots
1. Crear un Widget de Medidor Circular
Paso 1. Mientras estés en un dashboard, haz clic en el botón "+" ubicado en la esquina superior derecha de la pantalla.
Paso 2. Una vez en el cajón de widgets, busca y selecciona la opción de Medidor Circular.
Paso 3: Añadir hasta 4 variables para mostrar y configurar los siguientes parámetros:
Selecciona el método de agregación para calcular el máximo, mínimo, recuento, promedio o suma en función de los datos de cada variable. Alternativamente, selecciona "último valor" para mostrar el último valor de la variable.
Elige un rango de tiempo para cada variable. La opción "Establecido por el dashboard" corresponde al rango del selector de fecha y hora general del Dashboard.
Selecciona el valor del rango para establecer los límites del arco para la variable dentro del widget. Se aceptan valores negativos.
Selecciona el color de la variable. Hay tres opciones disponibles:
Establecido por el widget: Un color fijo y predefinido que eliges utilizando un selector de color o ingresando manualmente el valor hexadecimal o RGBA.
Predeterminado de la variable: El color asignado a la variable directamente en su configuración.
Definir una lógica de color que funcione en función del valor de la variable.
NOTA: Las variables se colocan en el sentido de las agujas del reloj alrededor del anillo comenzando en la posición de las 12 en punto. Además, la dirección positiva para los valores es en el sentido de las agujas del reloj.
Paso 4: En la pestaña de apariencia, puedes:
Nombrar tu widget.
Configurar los lugares decimales.
Definir un formato de fecha.
Elegir una fuente de texto.
Añadir una imagen de fondo.
Definir un color de fondo.
Personalizar aún más la apariencia del widget utilizando el editor de "estilo personalizado".
