Construyendo Tableros de Control con Pentaho
Agenda
Audiencia y Requisitos Previos
Objetivos de Aprendizaje
Proceso de Clase
Audiencia y Requisitos Previos
Audiencia del Curso
Para diseñadores y presentadores de información de forma gráfica
Requisitos del CursoConocimiento base de JavaScript y HTML
Conocimientos en base de datos relacionales
Conocimiento y comprensión de modelos OLAP, Metadata y SQL
Objetivos de Aprendizaje
Al final del curso, los participantes estarán en la capacidad de:
Comprender los conceptos básicos de los Tableros de Controles
Crear Tableros de Controles (Dashboards) rápidamente usando
Pentaho Dashboard Designer
Crear Tableros avanzados usando Pentaho Community Dashboard
Framework
Comprender la arquitectura del CDE (Community Dashboard Editor)
Objetivos de Aprendizaje
¿Cuáles son tus objetivos?
¿Cuáles son tus expectativas?
Evolución del Curso
Horario8:00 am – 5:00 pm
1 hora de Almuerzo ~ mediodía
Descansos cuando sean necesarios
El curso es una combinación de presentaciones, demostraciones y laboratorios
Tipos de laboratoriosSeguir con el instructor
Por cuenta propia
¡Pueden hacer todas las preguntas y sugerencias que quieran!
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda Curso
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda Curso
Conceptos Básicos
Conceptos Básicos
● El concepto de cuadro de mando deriva del concepto denominado Tableau de bord en Francés, que traducido de manera literal, vendría a significar algo así como tablero de mandos, o cuadro de instrumentos, como en el tablero del carro.
● La gestión de las empresas requiere un sistema de indicadores que nos faciliten la toma de decisiones y el control. Se requiere un sistema completo de análisis financiero.
● El sistema de indicadores debe organizarse en un cuadro de mando. El cuadro de mando recoge los principales indicadores y los presenta de un modo claro y útil. El cuadro de mando es un sistema que nos informa de la evolución de los parámetros fundamentales del negocio.
Conceptos Básicos
● Existe infinidad de posibles indicadores que podemos utilizar. Algunos ratios o indicadores son de uso muy general. Los más habituales son, por ejemplo, los indicadores de ventas, margen, rotación del inventario y rentabilidad.
● Otros indicadores deberán ser elaborados expresamente para analizar una empresa concreta.
● Los cuadros de mando han de presentar sólo aquella información que sean imprescindible, de una forma sencilla y por supuesto, sinóptica y resumida.
Conceptos Básicos
● El mostrar datos precisos en un formato «bonito» no es suficiente● Una tabla de control ejecutivo ayudará a los gerentes a:
● Responder preguntas fundamentales acerca de su negocio ● Alertar sobre problemas que están ocurriendo● Proveer información para tomar decisiones que impacten al negocio
● Si decimos «las ventas actuales han sido de $1.500.000,00» ¿es eso bueno o malo?
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda del Curso
Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Selección de la distribución de los paneles.
Como usar Pentaho Dashboard Builder
Selección de colores de los paneles.
Como usar Pentaho Dashboard Builder
Selección de titulo del dashboard.
Intervalo de refrescamiento
Como usar Pentaho Dashboard Builder
Como usar Pentaho Dashboard Builder
Agregar o modificar contenido
Agregar gráfica
Tabla de datos
Direcciones Web (URL)
Archivos de pentahoReportesAnalisisxActions
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda del Curso
Seleccionar incluir gráfica
Selección fuente de datos (MetaData)
Como Incluir gráficos
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Seleccionar datos para la gráfica
Como Incluir gráficos
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Aplicar filtros de parámetro usando {parámetro}
Como Incluir gráficos
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Seleccionar tipo de gráfica y uso de datos
Como Incluir gráficos
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Seleccionar tipo de gráfica y uso de datos
Como Incluir gráficos
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Pentaho Analyzer
Definición de Parámetros…
Seleccionar Filtros
Activar opción para ver los Filtros en la parte superior
Añadir nuevo Filtro
Como Incluir Parámetros
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Seleccionar fuente de datos y nombre del parámetro
Como Incluir Parámetros
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Seleccionar fuente de datos y nombre del parámetro
Como Incluir Parámetros
Click to edit Master text stylesSecond levelThird level
Fourth level
Fifth level
Resultado de incluir un parámetro
Como Incluir Parámetros
Seleccionar el panel y vincular con los parámetros
Como conectar los elementos a los parametros
Pentaho AnalyzerUso de parámetros via URL …
EDITOR: http://serverName:8080/pentaho/content/analyzer/editorcommand=open
solution=steel-wheels
path=/analysis
action=actionName.xanalyzer
showFieldList=true
VISUALIZADOR: http://serverName:8080/pentaho/content/analyzer/viewersolution=steel-wheels
path=/analysis
action=actionName.xanalyzer
parameterName=value
Ejemplo: http://localhost:8080/pentaho/content/analyzer/viewer?solution=steel-wheels&path=/analysis&action=actionName.xanalyzer&country_name=Brazil
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda del Curso
Laboratorio: Crear su propio tablero de control
Objetivo: Crear un Dashboard con una gráfica y una vista de un modelo que cambien dependiendo de un parámetro.
Requisitos: • Instalación del BI Server
Laboratorio: Resultado esperado
Laboratorio: ActividadesPara el grafico seleccionar el Datasource Orders, y colocar los siguientes datos:
CountrySUM - Quantity Ordered
Column: TerritoryComparison: exactly matchesValue: {territory}Default: EMEA
Country - ASC
Laboratorio: ActividadesPara la configuración del gráfico:
Type: Pie Chart
Theme: Default
Series Column: Country
Values Column: Quantity
Ordered
Chart Title: Cantidad
OrdenadaGuarde el dashboard
Laboratorio: ActividadesSeleccione en la barra de menú Archivo -> Nuevo -> Analyzer ReportSeleccione el cubo SteelWheels: SteelWheelsSalesColocar Line y Sales en la vista de análisis, además agregar Territory al área de filtro
- Marcar el check- Colocar el nombre del parámetro igual al parámetro del Dashboard
- Colocar el valor por defecto
Laboratorio: ActividadesCambiar la vista a gráfico, seleccione Bar:
Guardar la vista
Laboratorio: ActividadesAgregar la vista de análisis en el otro recuadro del Dashboard:
Guardar la vista
Laboratorio: Actividades• Agregue el filtro en la sección Prompts• Click en el botón
• Configurar el filtro como la imagen a continuación:
Query:select distinct(territory) from offices
Laboratorio: Actividades• Marcar cada uno de los recuadros y configurar en la pestaña de
Parameters, el filtro “Territorio” que el objeto va a escuchar para actualizarse
Guardar la vista Quitar el modo de edición y previsualizar el dashboard
Fin del Lab
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda del Curso
Community Dashboard Framework
Community Dashboard Framework (CDF)Características:
Un framework integrado a Pentaho para desarrollar dashboards
Disponible en la versión Community y Enterprise
Provee componentes para mostrar elementos gráficos, tomar parámetos de entrada, etc.
El desarrollo de los dashboards se realiza a través de javascript.
CDF: Arquitectura
Plantilla de Pie y Cabecera
Plantilla de Layout
Componentes
Javascript
FormularioHTML
xactions
xdcf(índice
)
xcdf expone el dashboard y provee un punto de entrada al mismo
xactions alimentan los componentes del dashboard
Formulario html indica la disposición de los elementos visuales mediante etiquetas html (<div>)
CDF: Plantilla de Cabecera y Pie de Página
Permite definir cabeceras y pie de páginas comunes para los
dashboards de una solución.
Útil para «branding» empresarial
Provee una plantilla por defecto
Se denominan:
template-dasboard.html
template-dasboard-mantle.html
Se encuentra en /pentaho-solutions/system-
pentaho-cdf
Ejemplos de otras plantillas disponibles
CDF: Plantilla de Layout
Permite definir la forma en la cual se disponen los elementos
visuales del dashboard
Es un archivo html
Aloja los elementos visuales que se deben mostrar (código
javascript)
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Proceso de Curso
CDF: ComponentesLos componentes permiten la creación de contenido para mostrarse en
el dashboard.
Se definen y configuran utilizando javascript
Los objetos de javascript debe ir en la plantilla de layout
Algunos componentes que se han implementado:
check
dateInput
Radio
select
selectMulti
text
textInput
xaction
jpivot
map
mapBubble
check
CDF: Creación de Elementos Visuales
Se configuran los parámetros, datos de entrada y comportamiento del objeto (respuestas a eventos)
Pueden ser gráficos, reportes y también elementos de interacción como botones, selectores de fecha, etc.
Pueden alimentarse de un xaction (datos de entrada o contenido)Se puede crear dependencias entre componentes
CDF: Propiedades de Componentes
Los componentes de CDF tienen un conjunto de propiedades que
definen su comportamiento y apariencia
Las propiedades más comunes son:name: Nombre del componentetype: Tipo de componentelisteners: Cambios en estas variables hacen refrescar el componenteparameter: La variable del dashboard que este componente cambiahtmlObject: El id de la etiqueta que muestra este componente (generalmente <div>)executeAtStart: Si se debe ejecutar o no este componente al iniciar el dashboard
CDF: Propiedades de Componentes (Cont)
Otras propiedades:solution: solución del xactionpath: ruta al xaction en la soluciónaction: Nombre del xaction a ejecutarparameters: Parámetros para ejecutar el xactionpreExecution: Función javascript que se ejecuta antes de ejecutar el componentepostExecution: Función javascript que se ejecuta después de ejecutar el componentepreChange: Función javascript que se ejecuta antes de refrescar el objeto debido a un cambiopostChange: Función javascript que se ejecuta después de refrescar el objeto debido a un cambio
Solo se usan cuando el componente xaction
CDF: Componentes – Ejecutar xaction
Eventos:Listeners: «está atento» por si cambia el valor de la línea de
producto y el territorioParameters: toma los dos valores como parámetros al momento
que detecta un cambio en ellos y vuelve a refrescarse
CDF: Componentes – Selector de Fecha
Este objeto no toma datos de un xaction
postChange: Luego de refrescarse mostrará la fecha seleccionada al
usuario en un diálogo
CDF: Componentes – Selector
Especificar:Los datos de entrada se configuraron dentro del objeto, pero pueden venir de un xactionvalueAsId: Se puede especificar si lo que recibe la variable «region» es el nombre o el identificador numérico en el valuesArraySi valueAsId es true, entonces no se tiene que especificar el identificador numérico
CDF: Componentes – Texto
Sirve para mostrar texto en el dashboard
Se le puede pasar parámetros o variables definidas en javascript
CDF: Creando un Dashboard
Índice (Expone el Dashboard en la Cónsola de Usuario)Plantilla de LayoutElementos visuales, fuentes de datos para componentes
Plantilla de cabecera y pieComponentes visualesAcepta múltiples fuentes de datosSe pueden crear nuevos componentes visuales a partir de la biblioteca del CDF
● Conceptos básicos de los Tableros de Controles● Pentaho Dashboard Builder
● Como usar Pentaho Dashboard Builder● Agregando Elementos● Laboratorios
● Pentaho Community Dashboard Framework (CDF)● Arquitectura● Componentes● Laboratorios
Agenda del Curso
Laboratorio: Crear un elemento visual
Objetivo: Crear y mostrar elementos visuales usando componentes de CDF.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Prelaboratorio: ¿Las conexiones están configuradas?
• La conexión SampleData debe estar definida dentro del Enterprise Console
• Si no está creada, crearla ahora
Laboratorio 1: Exponer un nuevo dashboard a Pentaho
• Se creará una carpeta en la cónsola llamada «Dashboard Curso CDF»
• En ella alojaremos todos los ejercicios• En la primera parte crearemos un dashboard de
prueba.
Dashboard de Prueba
El dashboard de prueba tendrá un título y un gráfico de barras alimentado por un xaction.
Paso 1: Crear la carpeta
Abrir Pentaho Design Studio y crear una carpeta llamada curso_cdf en pentaho-solutions
Paso 2: Hacer la carpeta visible
• Crear los archivos index.xml e index.properties. Se pueden copiar de archivos existentes para luego modificarlos.
Paso 3: Modificar index.xml
• Este archivo da visibilidad a la carpeta desde la Consola de Usuario• Las variables %name y %description toman sus valores del archivo
index.properties
Paso 4: Modificar index.properties
• «name» le dará el nombre a la carpeta que se mostrará en la Consola de Usuario
Paso 5: Exponer un nuevo dashboard
• De /pentaho-solutions/bi-developers/cdf-samples/10-cdf copiar los archivos information_dashboard.xcdf y template.html y pegar al directorio creado
• Renombrar a prueba.xcdf y prueba.html. Esto permitirá al usuario acceder al dashboard desde la cónsola de usuario
Paso 6: prueba.xcdf
• Editar prueba.xcdf como se muestra• Le dará el nombre y un punto de entrada al dashboard desde la
Consola de Usuario
Paso 7: prueba.html• Editar prueba.html
como se muestra• Se determina el
layout del título y del gráfico que se mostrará
Paso 8: Gráfico• Agregar este código
a la parte inferior del archivo prueba.html
• Refrescar y probar en la consola de usuario. ¿Funcionó?
Laboratorio 2: Configurar la Plantilla de Cabecera y Pie de Página
Objetivo: Crear cabeceras y pies personalizados.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Laboratorio 2: Configurar la Plantilla de Cabecera y Pie de Página
Queremos cambiar la cabecera y eliminar el pie que el CDF provee por defecto
Paso 1: Eliminar Pie
Eliminar este código de /pentaho-solutions/system/pentaho-cdf/template-dashboard-mantle.html
Paso 2: Modificar Cabecera• Modificaremos la
cabecera que se muestra en la cónsola de usuario.
• Es una etiqueta «div id=header»
Paso 2: Modificar Cabecera• La nueva cabecera
mostrará el logo de Pentaho.
• El logo es una imagen alojada en el servidor de Pentaho, solo hay que referenciarla.
Paso 2: Modificar Cabecera
Comentar esta línea al comienzo del archivo
• Cambiar en la sección del div «header» como se indica• Refrescar la solución, actualizar las configuraciones del sistema (system settings) y
probar en la cónsola. ¿Funcionó?
Paso 2: Modificar CabeceraResultado
Laboratorio 3: Dashboard CDF
Objetivo: Desarrollar un dashboard usando CDF que obtenga datos de Steel Wheels y muestre un elemento gráfico.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Laboratorio 3: Gráfico
Primero se expondrá un nuevo dashboard a Pentaho y luego se configurarán las plantillas y componentes respectivos
Paso 1: Exponer en nuevo dashboard
• Copiar los archivos prueba.html y prueba.xcdf, pegar al mismo directorio• Renombrar a grafico_barra.xcdf y grafico_barra.html
Paso 2: Asignar nuevo Nombre
Editar el archivo .xcdf como se muestra
Paso 3: Configuración HTML
Editar el archivo .html como se muestra
Paso 4: Crear Objeto de Barra
Agregar esto al archivo a la plantilla de layoutLa definición del gráfico se hace en un objeto separado, alimenta al objeto que muestra el gráfico
Un objeto javascript que provee las opciones de configuración del gráfico y en el cual se define el modelo multidimensional y la consulta sobre dicho modelo para traer los datos
Objeto que define el gráfico
Paso 5: Verificar que funcione
• Refrescar el repositorio de soluciones, buscar la carpeta y el archivo en Pentaho User Console
• ¿Funcionó?
Laboratorio 4: Dashboard Interactivo
Objetivo: Agregar interactividad al Dashboard que se ha diseñado.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Gráfico Parametrizado
Queremos que el usuario pueda seleccionar las ventas por línea de producto
Paso 1: Crear Nuevos Archivos de Trabajo
• Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y pegar en la misma carpeta como grafico_barra_parametrizado.html y grafico_barra_parametrizado.xcdf
• La estructura de archivos debería verse como en la figura
Paso 2: Renombrar el índice
Cambiar el nombre del archivo .html respectivo
Paso 3: Crear Objeto Selector
Agregar esto al archivo .html nuevo, antes del objeto del gráfico de barras
Paso 4: Modificar el layout
Incluir el <div> para el selector
Paso 5: Asegurar que se carguen los componentes
• Actualizar la lista de componentes que se deben inicializar• Refrescar el repositorio y probar• ¿Funcionó?
Paso 6: Actualizar LISTENERS y Parámetros del gráfico
Paso 7: Refrescar y revisar• Refrescar el
repositorio y probar
• ¿Funcionó?
Laboratorio 5: Gráficos
Objetivo: Agregar otro gráfico interactivo.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Dos Gráficos
También queremos que se vean las ventas de los últimos 12 meses para esa línea de productos.
Paso 1: Crear Nuevos Archivos de Trabajo
• Copiar los archivos .xcdf y .html del dashboard anterior, renombrar y pegar en la misma carpeta como dos_graficos.html y dos_graficos.xcdf
• La estructura de archivos debería verse como en la figura
Paso 2: Renombrar el índice
Cambiar el nombre del archivo .html respectivo
Paso 3: Crear Segundo Gráfico
Se separa en dos objetos como el gráfico anterior
Paso 4: Modificar el Layout
Asegurarse que concuerdan los nombres de los div con los parámetros de los objetos
Paso 5: Cargar el objeto nuevo
• Asegurarse que cargue el segundo gráfico• Refrescar el repositorio y probar• ¿Funcionó?
Dashboard interactivo con dos gráficas
Laboratorio Opcional: Interaccion Avanzada
Objetivo: revisar el dashboard Avanzado.html.
Requisitos: • Instalación del BI Server• Pentaho Design Studio
Resultado Avanzado
CDF: Documentación
Ejemplos y documentación disponibles en la cónsola de usuario en la solución “BI Developer Examples”
http://wiki.pentaho.com/display/COM/Community+Dashboard+Framework
Community Dashboard Editor(CDE)
CDE – Community Dashboard Editor
Es una herramienta gráfica para crear, editar y previsualizar Dashboards, esta se integra con Pentaho, se utiliza desde la Consola de Usuario.
Ayudante para generar dashboard, permite establecer el cuerpo a través de filas y columnas, generando el código html, además ofrece algunas plantillas que pueden utilizarse para crear la estructura del dashboard.
CDE – Diseño de Plantilla (Layout)
El diseño del Dashboard puede ser creado a través de la combinación de filas y columnas, también puede ser establecido por bloques HTML y puede incluir imágenes.
1. Sección Layout2. Permiten agregar
filas, columnas y codigo
HTML
CDE – Conexión de Datos (Datasources)El contenido del dashboard puede provenir de diferentes fuentes, tales como:
- Bases de Datos - Cubos Mondrian - Pentaho Metadata
- Archivos XML - Transformaciones ETL
1. Sección Data Sources
2. Seleccionar la Categoría
de acuerdo a la conexión que desee
crear
CDE – Componentes(Component)1. Componentes visuales: corresponde por ejemplo a tablas, cajas de texto,
gráficos, reportes, vistas Olap, etc.2. Parámetros: representan los valores que son compartidos por los
componentes, le aportan interacción al dashboard.3. Scripts: código JavaScript que permite personalizar la apariencia y
comportamiento de otros componentes.
1. Sección Componentes
2. Seleccionar el tipo de
componente que desea agregar
CDE – Componentes(Component)
En general la mayoría de los componentes comparten las siguientes propiedades:
executeAtStart: para indicar si el componente se carga al ejecutar el dashboard.
HtmlObject: donde se mostrará el objeto dentro dentro del dashboard.Datasource property: para indicar que datasource será utilizado por el componente.
preExecution: función que prepara los datos antes de cargar el componente.
postExecution: función que es ejecutada después de cargar el componente.
Listeners: lista de variables que actualizarán el componente.
Laboratorio 6: CDE
Objetivo: Instalar el CDE en el Pentaho para quedar integrado en el Consola de Usuario.
Requisitos: • Descomprimir el archivo CDE-bundle-1.0-RC3.tar.bz2.• Copiar las carpetas de acuerdo a las instrucciones.
Laboratorio 6: Copiar Carpetas• Instrucciones:1. Copiar las subcarpetas en las carpetas correspondientes en el pentaho
solutions, recordando eliminarlas si ya existen en el Pentaho.•. Las carpetas a eliminar son:
a) /pentaho-solutions/bi-developers/cdf-samplesb) /pentaho-solutions/cdfc) /pentaho-solutions/system/pentaho-cdf
2. Reiniciar el servidor de Pentaho.3. Refrescar el repositorio.
Laboratorio 6: Copiar Carpetas• El CDE se crea como un plugin de Pentaho dentro de la Consola de Usuario.
CDE - Componentes
CDE – Componentes(Component)• Generic:
Permiten establecer los parámetros que son utilizados en los filtros y por ende en los datasources.
CDE – Componentes(Component)• Scripts:
Permite crear código Javascript, para modificar el comportamiento de los componentes en el dashboard.
CDE – Componentes(Component)• Others:
Ofrece una serie de componentes para agregar objetos externos al dashboard, como: reportes, vistas de análisis, menús, botones, etc.
CDE – Componentes(Component)• Charts:
El CDE utiliza el Componente CCC (Community Charting Components) para generar diversos gráficos como: torta, Bar, Linea, etc.
CDE – Componentes(Component)• Selects:
Ofrece diferentes componentes que en su mayoría se utiliza en los filtros, estos son: Lista desplegable, radio button, calendario, casilla de texto, etc.
CDE – Componentes(Component)• Custom:
Contiene el Raphael Component, Raphael es un framework JavaScript que permite crear gráficos vectoriales en el explorador, ver figuras:
Laboratorio 7: CDE – Crear Dashboard
Objetivo: Crear un dashboard estático utilizando las funcionalidades que ofrece el CDE.
Laboratorio 7: CDE – Crear DashboardPresionar el icono o el botón New CDE Dashboard, para abrir el ayudante.
Laboratorio 7: CDE – Crear Dashboard• Presionar en el menú superior “New”, el CDE le dará la opción de
guardar de una vez el dashboard, siempre que vaya a crear uno nuevo.
Laboratorio 7: CDE – Crear Dashboard• Vamos a la sección de Layout, para crear la plantilla del Dashboard,
agregando filas y columnas de acuerdo a la forma que se le quiera dar.
2. Para agregar la fila
1. Presione para ingresar a Layout
Laboratorio 7: CDE – Crear Dashboard• Coloque una columna(Column) en la primera fila(Row) creada, para
ubicar el titulo del Dashboard allí.
2. Atributos para personalizar la columna
1. Presionar para agregar columna
Laboratorio 7: CDE – Crear Dashboard• Agregue otra fila con 2 columnas para colocar allí los objetos del Dashboard,
recuerde configurar el Span Size en las columnas para asignarle el tamaño.
2. Colocar en la propiedad Name, el nombre html correspondiente para esa sección.
1. Dos columnas:- Grafico- Tabla de Datos
Laboratorio 7: CDE – Crear Dashboard• Agregue 2 datasource (conexión a los datos) para crear un query para
la gráfica y uno para la tabla.
2. Coloque aquí el nombre de la conexión a la BD1. Agregue 2
componentes de SQL Queries
3. Presione para escribir el query en esta sección.
Laboratorio 7: CDE – Crear Dashboard• Escribir los queries en cada objeto.
1. Una vez finalizado presione OK.
Query 1
Query 2
Laboratorio 7: CDE – Crear Dashboard• Vaya a la sección de Componentes para agregar el objeto para el
título.
1. Presione para ingresara Componentes
2. Agregamos un Componente de Texto
3. Expression: lo que se va a mostrar en código html.HtmlObject: coloque el nombre de la columna donde queremos que aparezca dicho objeto
Laboratorio 7: CDE – Crear Dashboard• Agregamos un Table Component para la tabla de datos que hará
referencia al segundo query.
1. Agregamos un Componente de Texto
2. En HtmlObject colocamos el nombre de la columna donde quiere que aparezca el objeto
3. Nombre del datasource correspondiente
Laboratorio 7: CDE – Crear Dashboard• Marcar la propiedad Column Headers (Cabecera de Columnas) para
agregar el nombre a las columnas, colocar tantos Arg como columnas desee.
Colocar tantos Arg como columnas sean necesarias Para agregar
mas columnas a la tabla
Presione OK para finalizar
Laboratorio 7: CDE – Crear Dashboard• Agregamos el grafico, en el menú izquierdo en la sección de Charts ->
CCC Pie Chart
Name: grafica01
Name: grafica01Title: Presupuesto por DepartamentoDatasource: presupuesto_bdWidth: 200Height: 200HtmlObject: grafica01
Laboratorio 7: CDE – Crear Dashboard• Presione Preview para previsualizar el Dashboard.
Presione “Preview”
Laboratorio 7: CDE – Crear Dashboard• Previsualice el Dashboard, cualquier cambio que necesite en cuanto a
forma, regrese a la sección de layout para personalizar.
Resumen del curso
¡¡¡Felicitaciones!!!!
FIN