Gadget LineChart

Interfaz de usuario: 6.2.0-Xenon

Este Gadget permite representar datos en forma de diagrama de líneas.

Para empezar a usar este Gadget, se tendrá que arrastrar la caja «LineChart» desde el listado de Gadgets predefinidos al lienzo del Dashboard.

image-20241108-115315.png

Una vez añadido, en la parte derecha de la pantalla aparecerán las opciones de configuración del Gadget:

image-20241108-115357.png

Conforme se vayan rellenando opciones del diagrama, éste se irá actualizando en tiempo real.

Veamos con detalle en qué consiste cada una de estas opciones de configuración.

Configuración

DataSource

En este desplegable se va a seleccionar el DataSource que incluirá los valores que se quieren mostrar en la gráfica.

Para el ejemplo, se va a utilizar el DataSource de «helsinki_datasource», disponible en CloudLab.

Main

Este conjunto de propiedades permiten configurar la información del Gadget. Existen diversas opciones:

  • Title: será el título del gráfico. Es un campo opcional.

  • Subtitle: cadena de texto que aparecerá bajo el título, y que puede usarse como pequeña descripción. Es un campo opcional.

  • Legend: opción que permite mostrar u ocultar la leyenda del mapa. La leyenda sólo se mostrará si se ha definido un nombre a la serie de datos. Por defecto está activado.

  • Toolbox: este selector permitirá mostrar u ocultar la caja de herramientas asociada al Gadget. Por defecto está activado.

  • Chart Theme: permite indicar si se usará un tema claro, oscuro o vintage en el diagrama. Por defecto se usa el tema claro.

Axis

Este otro conjunto de propiedades van a permitir configurar los ejes de datos del diagrama. Se componen a su vez de dos grupos de opciones:

X Axis Config

Estas propiedades hacen referencia al eje X (eje de abscisas), entre las que encontramos:

  • Name: que será el nombre a mostrar en el eje.

  • Field: el campo del DataSource que contenga la información que se quiere representar en este eje.

  • Date Format: el formato que tendrán las fechas que se muestren en el eje. Se puede elegir entre tres tipos:

    • mes/día/año (MM/DD/YY).

    • día/mes/año (DD/MM/YY).

    • Año/mes/día (YY/MM/DD).

Los datos de los años se encuentran en el campo «Helsinki.year».

En caso de querer utilizar internacionalización, se recomienda indicar en el campo «Name» el mismo nombre de la propiedad del campo de los datos (por ejemplo, «year»).

Y Axis Config

Estas otras propiedades hacen referencia al eje Y (eje de coordenadas). Se podrán añadir tantos ejes de coordenadas como datos se quieran representar.

Para crear un nuevo eje Y, se tendrá que pulsar en el botón de «+». Aparecerán entonces las opciones de configuración del eje, con las siguientes opciones:

  • ID: este valor, autogenerado, corresponde con el identificador del eje, el cual se utilizará posteriormente para asociar el valor del campo que se quiera mostrar.

  • Y Axis Label: que será el nombre a mostrar en el eje. Es un campo opcional.

  • Max Value: opción para indicar el valor máximo que podrá tener el eje. Es un campo opcional.

  • Min Value: opción para indicar el valor mínimo que podrá tener el eje. Es un campo opcional.

Data

A continuación, se asignará los datos a los ejes Y creados. Para asignar datos, se tendrá que pulsar en el botón de «+». Aparecerán entonces las opciones de configuración de un bloque de datos, con las siguientes opciones:

  • Serie Name: para indicar el nombre que tendrá la serie de datos.

  • Serie Field: aquí se seleccionará el campo del DataSource que se quiere mostrar.

  • Y Axis: se indicará el identificador del eje Y al que asociar los datos.

  • Point Radius: opción para indicar el radio que tendrán los puntos del diagrama. En caso de que no se quieran mostrar puntos, se introducirá un valor de 0. Por defecto el valor es de 10.

  • Type: esta opción permite elegir el tipo de visualización del diagrama, pudiendo elegir entre líneas y barras. Por defecto se muestra como línea.

  • Line Color: este selector permitirá elegir el color con el que se representará la serie de datos. Si no se indica ningún color, se asignará uno por defecto.

  • Full Serie: si el tipo de visualización es de líneas, se rellenará de color la línea en el eje Y hasta el eje X.

  • Shadow Color: si el tipo de visualización es de líneas, y la opción de «Full Serie» está activa, este selector permitirá elegir el color con el que se rellenar la serie de datos.

  • Stepped Line: esta opción modifica la línea para mostrarla de forma escalonada. Por defecto esta opción se encuentra desactivada.

  • Max and Min points: para mostrar u ocultar los valores máximos y mínimos de la serie de datos. Por defecto no se muestra.

  • Average Line: para mostrar u ocultar el valor medio de la serie de datos. Por defecto no se muestra.

Zoom

La última sección de configuración permite definir las opciones de zoom, entre las que se encuentran:

  • Show Zoom: para activar o desactivar el zoom del diagrama. Esto va a permitir acercarse o alejarse de los datos. Por defecto está desactivado.

  • Zoom Type: en caso de que la opción de «Show Zoom» se encuentre activada, permite elegir si se quiere hacer dentro del mismo eje X, o si se hace desde fuera con una barra de desplazamiento. Por defecto está activada la opción de hacerlo dentro del eje.