Ir al contenido principal
Todas las coleccionesGuías de usuario
Crear Widgets de Gráfico de Rosa
Crear Widgets de Gráfico de Rosa

Aprende a crear widgets de gráfico de rosa en Ubidots para mostrar datos de histograma parametrizados en polar.

David Sepúlveda avatar
Escrito por David Sepúlveda
Actualizado hace más de un mes

Utiliza el widget Rose Chart para mostrar datos parametrizados en forma polar en forma de histogramas. Aunque los gráficos de Rose pueden servir para diferentes propósitos, comúnmente se utilizan para trazar la dirección y velocidad del viento simultáneamente; no es de extrañar que también se le conozca como un gráfico de Rosa del Viento. En tal caso, los parámetros del Rose Chart serían:

  • Variable polar: Dirección del viento

  • Variable de magnitud: Velocidad del viento

Para cada dirección cardinal, el gráfico muestra un histograma de velocidad durante un período de tiempo determinado:

Requisitos

  • Cuenta activa de Ubidots con datos disponibles.

1. Modos de Operación

El widget Rose Chart necesita ser alimentado con 2 fuentes de datos; una para la dirección polar, y otra para la variable de magnitud, que se utiliza para crear un histograma para cada dirección polar.

Mientras que magnitud es la variable típica de series temporales de Ubidots, la dirección polar puede especificarse de dos maneras: dentro del contexto de la variable de magnitud, o como una variable separada. En cualquiera de los casos, la unidad de la variable polar debe estar en grados.

  1. Dirección polar como contexto: Tanto la magnitud como la dirección polar se extraerán de una sola variable. El widget Rose Chart permite extraer datos del valor de la variable, así como de su contexto. Por ejemplo, aquí hay un ejemplo de cómo se deben enviar los datos para que sean entendidos por el widget en este modo:

{"wind":{"value":40, "context":{"direction": 230}}}

Como se puede ver, la magnitud corresponde al valor de "velocity" mientras que la dirección está incrustada en el contexto de la variable bajo la clave "direction". En la configuración del widget, se vería así:

2. Dirección polar como variable independiente: 2 variables separadas suministran los datos al widget; una para la magnitud y la otra para la dirección.

IMPORTANTE: Ambas variables deben tener la misma marca de tiempo, lo que significa que los datos deben enviarse en la misma carga útil:

{ "wind": 40, "direction": 230}

En esta carga útil de ejemplo, ambas variables tendrán la misma marca de tiempo y, por lo tanto, serán compatibles con el widget Rose Chart.

Para usar el widget en este modo, selecciona "Variable label" en "+ADD ANGLE VARIABLE", luego selecciona la variable de dirección polar, en este caso "direction". Se vería así:

2. Crear un Widget de Gráfico de Rosa Estático

Después de enviar tus datos parametrizados por dirección a Ubidots en cualquiera de los 2 formatos mencionados, dirígete al menú desplegable "Dispositivos" en la barra de navegación, luego "Tableros", y selecciona el tablero apropiado en el que trabajar. A continuación, sigue los pasos a continuación para crear un widget de gráfico de Rosa estático:

Paso 1: Haz clic en el botón "+" en la parte superior derecha
Paso 2: Selecciona la opción de widget de gráfico de Rosa
Paso 3: Agrega la fuente de datos de Magnitud y Ángulo según el modo (sección 1.)
Paso 4: Elige un color en el selector de color junto a la variable de magnitud
Pasando a la sección de Apariencia:
Paso 5: Establece todos los campos disponibles:

  • Nombre de tu widget de gráfico de Rosa

  • Elige una Familia de Fuentes

  • Selecciona los ejes polares a 4, 8 o 16

  • Establece los decimales

  • Modo de color:

    • Selecciona el Modo de color para los histogramas basados en la dirección (puede ser el valor por defecto de la variable o un rango personalizado)

    • Establece el Número de bins para cada uno de los histogramas basados en la dirección

    • Ingresa el rango de Magnitud

  • Selecciona una Imagen de fondo, en caso de ser necesario.

  • Si hay alguno, ingresa un Estilo Personalizado para tu widget

3. Crear un Widget de Gráfico de Rosa Dinámico

Similar a la sección 2, dirígete al menú desplegable "Dispositivos" en la barra de navegación, luego "Tableros", y selecciona el tablero apropiado en el que trabajar, en este caso, debería ser un Tablero Dinámico. A continuación, sigue los pasos a continuación para crear un widget de gráfico de Rosa dinámico:

Paso 1: Haz clic en el botón "+" en la parte superior derecha
Paso 2: Selecciona la opción de widget de gráfico de Rosa
Paso 3: Agrega la fuente de datos de Magnitud y Ángulo según el modo (sección 1.) ingresando las etiquetas de las respectivas variables

Paso 4: Elige un color en el selector de color junto a la variable de magnitud
Pasando a la sección de Apariencia:
Paso 5: Establece todos los campos disponibles:

  • Nombre de tu widget de gráfico de Rosa

  • Elige una Familia de Fuentes

  • Selecciona los ejes polares a 4, 8 o 16

  • Establece los decimales

  • Modo de color:

    • Selecciona el Modo de color para los histogramas basados en la dirección (puede ser el valor por defecto de la variable o un rango personalizado)

    • Establece el Número de bins para cada uno de los histogramas basados en la dirección

    • Ingresa el rango de Magnitud

  • Selecciona una Imagen de fondo, en caso de ser necesario.

  • Si hay alguno, ingresa un Estilo Personalizado para tu widget

Las personas también visitaron:

¿Ha quedado contestada tu pregunta?