¿Cómo crear un dashboard paso a paso?

ES | EN

Acceder a una instancia de Plataforma

Primero accede al Control Panel de mi instancia, por ejemplo el Entorno CloudLab: https://lab.onesaitplatform.com/controlpanel/login

Si no tienes usuario con rol Developer, debes crear uno:

Ir a Opción Dashboards


Ve a VISUALIZATION -> a My Dashboards.

Te aparecerá un listado de los dashboards disponibles y una serie de información asociada que explicaremos a continuación.


En la columna Options, puedes ver diferentes opciones. Estas opciones varían en función del rol del usuario y los permisos sobre los distintos dashboards :

  • Permite acceder al dashboard para trabajar con él, en modo presentación.

  • Acceder al dashboard en modo edición.

  • Configuración del dashboard, cambiar imagen, permisos.

  • Permite clonar el dashboard.

  • Da la URL para acceder al dashboard en modo presentación.

  • Exporta una imagen del dashboard.

  • Exporta un pdf del dashboard.

  • Si se pulsa y confirma, se elimina el dashboard.

Crear un nuevo Dashboard

Haz clic en el botón Nuevo Dashboard para acceder al formulario de creación.

Asigna al dashboard un identificador único (1) y una breve descripción (2) para poder diferenciarlo del resto de dashboards que se creen. Existe la opción de hacer el dashboard publico marcando (3) o podemos dejarlo como privado y asignar permisos más específicos. Se puede seleccionar un estilo inicial (4), dejar la imagen por defecto que se mostrará para los usuarios con rol DataViewer, o seleccionar una para que sea más claro diferenciar tu dashboard del resto (5), a su vez se le puede asignar una Categoría (6) y una subcategoría (7).

Se pueden crear Scripts, añadir librerias o estilos al dashboard en el editor html (8). Adicionalemente se pueden asignar permisos a otros usuarios (9), para lo cual debes elegir el usuario y el tipo de acceso, y pulsar en insert authorization. Se pasará el permiso al listado de la derecha, donde podrás modificarlo o eliminarlo.

Los tipos de permisos disponibles son :

  • EDIT permite edición y vista.

  • VIEW solo permite al usuario la visualización.

Pulsa en NEW para terminar la creación de tu dashboard.

Edición del Dashboard

Tras la creación del dashboard, accede a la pantalla de edición con el botón Editar. Allí podrás diseñar tu dashboard, dándole los estilos que se adecuen a tus necesidades, y creando o añadiendo los gadgets que te mostrarán la información que se haga falta.

Botones de la cabecera del dashboard:

  1. Move Toolbar Buttons.

  2. Add Element: este botón nos permite añadir gadgets al dashboard.

  3. DataLink: nos da la opción para configurar los filtros y Drill-down entre gadgets.

  4. URL Parameters.

  5. Nos abre un desplegable con las opciones Pages, Configure Dashboard y Dashboard Style.

  6. Save Dashboard.

  7. Delete Dashboard.

  8. Close Dashboard Editor.

Para comenzar añadiendo gadgets, pulsa en el icono (2) y aparecerán unos charts con los distintos tipos de gadgets que puedes pasar al dashboard.

Actualmente tenemos los siguientes tipos:

  • Line Chart, gráfico de líneas.

  • Bar Chart, gráfico de barras.

  • Mixed Chart, gráfico mixto.

  • Pie Chart, gráfico de tarta.

  • Wordcloud, nube de palabras.

  • Map, mapa, para usarlo es preciso que la ontología contenga coordenadas.

  • Radar, gráfico tipo radar, también se conoce como gráfico de web, gráfico de araña , tabla de estrellas.

  • Template, nos permite crear gadgets escribiendo directamente el código html.

  • Filter, permite limpiar los filtros.

  • HTML5, permite crear un gadgets editando en html5.

  • Table, tabla con datos.

Arrastra los iconos del fondo al dashboard, suéltalos allí, y aparecerá una ventana modal con las siguientes opciones

ADD GADGET: Si seleccionas un gadget creado previamente y pulsas este botón, ese gadget se cargará en el dashboard.

NEW GADGET: Aún no existe el gadget que necesitas, así que lo crearás ahora. Pulsa el botón y aparecerá esta venta modal.

Asígnale un nombre y selecciona un DataSource existente, o trabaja a partir de la ontología cuya información quieras mostrar. En este caso, selecciona la Ontología Restaurants.


Tras elegir la ontología, parece un wizard para ayudarte a montar la consulta con la que traerás los datos. Para el ejemplo con un simple select * from Restaurants será suficiente.

Si pulsas en Execute Query, aparecen los resultados de la query, y puedes validar que es lo que necesitas. Cuando se adecue a tus requisitos, pulsa Continue.

En este caso vas a crear un gadget tipo Line Chart, por lo que tendrás que rellenar y elegir al menos los siguientes valores: X Axis e Y Axis que son los valores de los distintos ejes del gráfico (para este ejemplo se ha elegido como eje X el tipo de cocina y como eje Y la valoración); y un Color para la línea. Después pulsa en NEW. Puedes crear más de una línea añadiendo más measures o más de un eje con ADD AXIS y rellenando los valores para otro eje.

Puedes ver en tiempo real cómo se va representando tu grafo con los valores marcados. Cuando esté como desees, pulsa NEW y el gadget se pasará a la página del dashboard. Éste sería tu primer gadget. Ahora crearás dos más para ver las funciones de Drill-down y filtros.

Crearemos un gadget tipo Pie o tarta. Para éste, tras elegir la fuente de datos, tan solo tienes que elegir los valores para los ejes X e Y.

Por último, crearás un gadget Tipo Tabla para ver al detalle la información de cada restaurante. Para, esto igual que en los dos casos anteriores, selecciona una fuente de datos y rellena los campos que necesites.

Puedes ver una sección Table config, con la configuración de la tabla; Mostrar u ocultar el header; filas seleccionables; número de elementos por página… En este ejemplo, yo solo he hecho seleccionables las filas y cambiado los colores del header y del footer a blanco. Luego he añadido las medidas y los nombres que se verán en la cabecera, y les he dado un orden.

Pulsamos NEW y ya tenemos nuestro tercer gadget.

Colocamos los gadgets de la manera que nos permita ver mejor la información y le damos a Guardar para no perder los cambios

DATA LINK

Selecciona la opción (3) de la cabecera de edición, data link, para establecer relaciones o conexiones entre los gadgets. Aparece esta ventana modal, donde puedes ir añadiendo las relaciones. Seleccionamos primero el source gadget y source field que es el gadget sobre el que pulsarás para filtrar los datos del target gadget por su target field. Resumiendo: al pulsar un dato del gadget origen, filtra los datos del gadget destino.

La primera relación la establecemos del GADGET PIE con el GADGET LINE:

La segunda Relación la establecemos Del GADGET TABLE con el GADGET PIE.

Puedes ver que, si pulsas una fila de la tabla, se actualizan los datos del GADGET PIE con el filtro cuisine = American, y que si, pulsas en el GADGET PIE en Manhattan, el GADGET LINE hereda los filtros borough = Manhattan y cuisine = American.

La opción (5) de la cabecera de edición tiene tres opciones adicionales para configurar el dashboard:

PAGES

Permite gestionar las páginas del dashboard, pudiendo tener una o crear más.

Tan solo tienes que darle un nombre, seleccionar un icono, y si quieres, puedes ponerle una imagen de fondo o un color.

Para establecer el orden de las páginas, tan solo tienes que pulsar en las flechas de la derecha. La que está más arriba es la primera, y así sucesivamente.

Configurar Dashboard

Permite configurar el header del dashboard, sus estilos, colores y añadir un logo.

También permite configurar la visibilidad y estilo del grid, como número de líneas, columnas…



Dashboard Style
Permite configurar los estilos de los gadgets a nivel global, como son la altura de los headers, el color, estilo de los títulos y del body.


Además, si pulsas sobre el icono de los menús

tienes la opción de configurar los estilos de cada gadget de manera individual, ocultar el header, añadir un título, un icono, colores,…