Ir al contenido principal
Todas las coleccionesGuías de usuario
Tablero: crear un widget de gráfico de barras
Tablero: crear un widget de gráfico de barras

Aprende cómo crear gráficos de barras en tu tablero de Ubidots.

Sergio M avatar
Escrito por Sergio M
Actualizado hace más de una semana

Los gráficos de barras son muy útiles y populares para la visualización de datos, ya que están diseñados para comparar valores a través de la altura de las barras. Hoy, aprenderemos a crear uno en los tableros de Ubidots.

Requisitos

1. Crear un widget de gráfico de barras

1.1. Configuración:

  1. Ve al tablero en el que quieres trabajar y haz clic en el botón "+" ubicado en la esquina superior derecha de la pantalla.

  2. Selecciona la opción de Gráfico de Barras.

  3. Agrega la(s) variable(s) a mostrar y configura los siguientes parámetros:

    1. Nombre de la barra.

    2. Selecciona el método de agregación: Muestra el último valor de la variable o calcula el máximo, mínimo, cuenta, promedio o suma de los datos de la variable.

    3. Elige un intervalo de tiempo para cada variable. La opción "establecido por el tablero" sincroniza el widget con el selector de intervalo de tiempo general del tablero.

    4. Elige un color para la barra o define una lógica de color basada en el valor de la variable.

    5. Decide si se mostrará el nombre del dispositivo en la información sobre herramientas de la barra.

1. 2. Apariencia:

  1. Nombra tu widget.

  2. Puedes elegir el número de barras que deseas resaltar con el color de tu elección o dejarlo en 0 para que no se resalte ninguna barra. Las barras con los valores más altos se ven afectadas por esta opción.

  3. Puedes ordenar las barras según sus valores en orden ascendente o descendente.

  4. Elige el formato de las fechas que se muestran en el widget.

  5. Elige el número de decimales que se mostrarán en los valores.

  6. Decide si se añadirá o no un prefijo del Sistema Métrico.

  7. Puedes definir un color de fondo para el widget.

  8. Haz cualquier cambio adicional a la apariencia del widget utilizando el editor de código de estilo personalizado.

¿Ha quedado contestada tu pregunta?