--- title: "¿Cómo crear un dashboard paso a paso?" canonical: "https://onesaitplatform-es.refined.site/space/DOC/2215910858/%C2%BFC%C3%B3mo%20crear%20un%20dashboard%20paso%20a%20paso%3F" format: markdown --- ES | [EN](https://onesaitplatform.atlassian.net/wiki/spaces/DOCT/pages/2220789152) > Macro (toc) # 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](https://lab.onesaitplatform.com/controlpanel/login) Si no tienes usuario con rol Developer, debes crear uno: ![image](media://68917a13-9028-43d9-882d-30eb477b955d) # Ir a Opción Dashboards Ve a **VISUALIZATION -> **a My Dashboards. > Macro (inline-media-image) Te aparecerá un listado de los dashboards disponibles y una serie de información asociada que explicaremos a continuación. > Macro (inline-media-image) 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. ![image](media://66b800bf-05ec-4117-9c62-117b9461b65d) 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). ![image](media://560b953a-c8cc-4a85-8544-e3a25f754057) 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: > Macro (inline-media-image) 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 > Macro (inline-media-image) **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. ![image](media://23ba846f-9978-495b-95e1-ba82c7ae66c1) 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. ![image](media://7cc6381e-55d0-4f53-af52-b3431559c348) 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. ![image](media://afb35698-7fd5-4790-8c13-f7e90d983ace) 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**. ![image](media://9879489d-ff38-4721-ba0c-32d506144c5f) 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. ![image](media://0bb7562a-73f8-41e5-ba2f-027423277f83) 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. > Macro (inline-media-image) 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. ![image](media://fb06656f-bec2-4c45-a4df-19b013f20e15) ![image](media://7c453b78-b5b3-4535-b663-cf47115e8e38) 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 ![image](media://7a8825e0-e7ad-49ec-ba22-e4c5ccd8a9a6) ## 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. ![image](media://f3baa57f-2682-4a22-81fa-8d271078f5e5) La **primera relación **la establecemos del GADGET PIE con el GADGET LINE: ![image](media://e9c4c485-10d6-489b-ab9f-dfed29b612a3) 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. ![image](media://7b7e4874-80f8-4a85-9dfa-f5788b53bc38) La opción (5) de la cabecera de edición tiene tres opciones adicionales para configurar el dashboard: ![image](media://b623e415-dcc2-43ca-8e05-078051a51fa1) ## 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. > Macro (inline-media-image) 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. > Macro (inline-media-image) ## Configurar Dashboard Permite configurar el header del dashboard, sus estilos, colores y añadir un logo. > Macro (inline-media-image) También permite configurar la visibilidad y estilo del grid, como número de líneas, columnas… > Macro (inline-media-image) **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. > Macro (inline-media-image) Además, si pulsas sobre el icono de los menús ![image](media://1ddb98ba-ed70-480b-a34f-12d6b0b22cba) 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,… > Macro (inline-media-image)