El Widget Métrico es una opción de visualización de datos que permite calcular y mostrar funciones de computación integradas como máximo, mínimo, suma, conteo, promedio o último valor para un período de tiempo específico.
El Widget Métrico de Ubidots, además de sus beneficios analíticos, también admite un grado de personalización utilizando un editor HTML para ajustar el formato de visualización. Aprende a usar los Widgets Métricos preconstruidos de Ubidots en los paneles de tu aplicación fácilmente utilizando la guía a continuación.
Requisitos
Cuenta Ubidots activa
1. Crear un Widget Métrico Estático
Siguiendo los pasos a continuación, podrás crear un Widget Métrico Estático, mostrando constantemente datos de solo un dispositivo. Para crear un widget dinámico que se actualice según el dispositivo seleccionado en la barra de navegación, salta a la sección 2 a continuación.
Crear un Widget Métrico Estático
Paso 1: Haz clic en el ícono "+" en la parte superior derecha.
Paso 2: Selecciona el Widget Métrico.
Paso 3: Haz clic en el botón "Agregar Variables".
Paso 4: Busca un Dispositivo y Selecciona una Variable.
Paso 5: Configura la configuración del widget:
Método de Agregación: Calcula el máximo, mínimo, conteo, promedio, suma, último o primero basado en los datos de la variable durante un período de tiempo seleccionable o deja que el período sea definido por el Dashboard, o simplemente muestra el último valor de la variable de todos los tiempos.
Nombre: Ingresa un nombre de título para el Widget Métrico.
Usar el Editor HTML: consulta la sección 3 de esta guía a continuación. Por defecto, el interruptor está DESACTIVADO.
Mostrar información de última actualización: activa o desactiva si se debe mostrar la fecha, hora y segundos. Por defecto está ACTIVADO.
Familia de Fuentes: Elige entre las fuentes disponibles Open Sans, Montserrat o Roboto Mono.
Puntos decimales: Ingresa los lugares decimales que se mostrarán. Por defecto se ajusta a la configuración general de lugares decimales de la cuenta.
Formato de fecha: Selecciona un formato de fecha y hora para mostrar la marca de tiempo de los datos mostrados.
Color: Hay dos opciones: – Establecido por el Widget, lo que significa que el color (#FFAE58) es elegido por el widget. – Por defecto de la variable, que usará el color coordinado a la variable que se está mostrando.
2. Crear un Widget Métrico Dinámico
Siguiendo los pasos a continuación, podrás crear un Widget Métrico Dinámico, mostrando constantemente datos de un dispositivo, pero con la capacidad de cambiar entre dispositivos del mismo tipo simplemente seleccionando diferentes dispositivos disponibles en la barra de navegación.
Paso Anterior: Antes de crear un Widget Métrico Dinámico, debes tener un Dashboard Dinámico creado. Por favor consulta aquí para aprender cómo crear un Dashboard Dinámico.
Creando un Widget Métrico Dinámico
Paso 1: Haz clic en el ícono "+" en la parte superior derecha.
Paso 2: Selecciona el Widget Métrico.
Paso 3: Selecciona que el comportamiento del widget sea Dinámico.
Paso 4: Ingresa el ##{{etiqueta de variable}} para identificar qué variable se calculará en el Widget Dinámico en tu Dashboard.
Paso 5: Configura la configuración del widget:
Método de Agregación: Calcula el máximo, mínimo, conteo, promedio o suma basado en los datos de la variable durante un período de tiempo seleccionable o deja que el período sea definido por el Dashboard, o simplemente muestra el último valor de la variable de todos los tiempos.
Nombre: Ingresa un nombre de título para el Widget Métrico.
Usar el Editor HTML: esta opción se cubre en la sección 3 a continuación. Por defecto, deja el interruptor en DESACTIVADO.
Mostrar información de última actualización: activa o desactiva si se debe mostrar la fecha, hora y segundos. Por defecto está ACTIVADO.
Familia de Fuentes: Elige entre las fuentes disponibles Open Sans, Montserrat o Roboto Mono.
Puntos decimales: Ingresa los lugares decimales que se mostrarán. Por defecto se ajusta a la configuración general de lugares decimales de la cuenta.
Formato de fecha: Selecciona un formato de fecha y hora para mostrar la marca de tiempo de los datos mostrados.
Color: Hay dos opciones: – Establecido por el Widget, lo que significa que el color (#FFAE58) es elegido por Ubidots. – Por defecto de la variable, que indica seleccionar el color del selector de color junto a la variable seleccionada al principio.
3. Personaliza el Widget Métrico con su Editor HTML
En las secciones anteriores, el interruptor para activar el Editor HTML y proporcionar visualizaciones personalizadas adicionales está configurado en DESACTIVADO. Al activar el Editor HTML y usar esta guía y las claves de personalización soportadas a continuación, puedes recuperar automáticamente parámetros de una variable, independientemente de la naturaleza Dinámica o Estática del widget.
Paso 1: Crea un nuevo Widget Métrico o Edita uno existente haciendo clic en el ícono de "engranaje" en la parte superior derecha.
Paso 2: Activa el interruptor para "Usar el editor HTML".
Paso 3: Haz clic en el botón "Abrir editor".
Paso 4: Personaliza el widget Métrico utilizando las etiquetas HTML disponibles y las claves a continuación para acceder a la información de la variable y del widget desde tu cuenta de Ubidots:
Etiquetas HTML:
Claves de Variable y Widget:
##{{aggregationMethod}}: Recupera el método utilizado para obtener el valor.
##{{value}}: Valor actual según el método de agregación y el período de tiempo seleccionado.
##{{variable}}: Esta clave permite recuperar tanto las propiedades de nombre como de unidad de la variable. Para acceder, usa el operador de punto "." de la siguiente manera:
##{{variable.name}}
##{{variable.unit}}##{{device}}: Esta clave permite recuperar el nombre, etiqueta, ID, descripción y propiedades del dispositivo. Para acceder, usa el operador de punto "." de la siguiente manera:
##{{device.name}}
##{{device.label}}
##{{device.id}}##{{device.description}}
##{{device.context.<key>}}
Nota: Para acceder a las propiedades del dispositivo, debes reemplazar <key> con la clave de propiedad que deseas mostrar.
##{{span}}: Rango de tiempo seleccionado para obtener datos según el Método de Agregación.
##{{timestamp}}: Marca de tiempo de los datos mostrados en un formato que coincide con el seleccionado en la Configuración del Widget Métrico.
##{{context.key}}: Recupera el valor de la clave de contexto de la variable especificada.
Ejemplo: copia y pega el siguiente código HTML y observa la diferencia entre la configuración predeterminada y la personalizada por el HTML:
<p style="margin: 0;"> <strong>##{{variable.name}}</strong> <em>variable</em> ##{{aggregationMethod}} ##{{span}} es:</p><p> <span style="font-size: 5rem; font-weight: bolder; line-height: normal; margin: 0;color: #59F0E2">##{{value}}</span> <span style="font-size: 2rem; color:#F059DB">##{{variable.unit}}</span></p><p style="font-size: 2rem;margin: 0;color: #F05959"><u>##{{timestamp}}</u></p>