Diseño Profesional en Power BI con HTML5 en el GPPB2021 Barcelona
El pasado Sábado 20 de Febrero tuve el honor de participar en el Global Power Platform Bootcamp 2021 Barcelona con una sesión sobre Diseño profesional en Power BI con HTML Content. Gracias al Power BI User Group Barcelona y a los patrocinadores del evento porque fue una experiencia increíble tanto como ponente como asistiendo al resto de sesiones.
En este post, os explicaré el ejemplo de la demo y añadiré el video de la sesión al final por si no pudiste asistir.
Objetivo de la sesión
La idea de la sesión es mostrar el potencial de la custom visual (o visualización personalizada) HTML Content en los siguientes casos de uso:
- Cuando quieres realizar una infografía (mostrar datos de una manera muy sencilla y visual como en artículos de prensa o en programas de tv).
- Cuando no encuentras una visualización que realmente muestre los datos como tu necesitas.
- Cundo quieres darle un toque especial a tus informes.
El ejemplo de la demo
Para poder mostrar la potencia de la visualización HTML Content, he elegido los gráficos de alineaciones que se emiten previamente a un partido de fútbol. En ellas se muestran los 11 jugadores titulares, su posición en el campo y algún indicador sobre su juego (goles marcados, asistencias, paradas,…).
Como podrás entender, no hay ninguna visualización de Power BI que pueda hacer esto, por lo que usaremos HTML Content porque nos permite usar elementos de diseño web HTML para colocar y mostrar nuestros datos a nuestro gusto.
En este caso he decidido que el diseño que quiero mostrar es el siguiente:
Para poder hacerlo usaré las etiquetas DIV de HTML que nos permiten crear tablas con celdas. En nuestro caso querremos crear una tabla de 3 filas:
- La primera fila de una sola celda (la foto).
- La segunda fila con 2 celdas (escudo equipo y otra uniendo el dorsal y el nombre del jugador).
- La tercera fila con 3 celdas (posición en el campo y las estadísticas de goles y asistencias)
El siguiente paso es cambiar el contenido de nuestras celdas por datos de nuestro dataset en el informe de Power BI.
En el vídeo del final te explico el código HTML necesario para crear esta tabla y como concatenar en una medida el código y las métricas a mostrar.
El resultado es el siguiente:
Para este ejemplo, he obtenido las fotos de jugadores de las paginas oficiales de los equipos (en este caso Real Madrid y FC Barcelona).
Aquí os dejo el informe accesible para que podáis interactuar con él. Podéis pulsar en los escudos para cambiar el equipo a mostrar:
El vídeo de la sesión
Sin más os dejo el vídeo de la sesión del Global Power Platform Bootcamp 2021 Barcelona:
Recordad que si estás suscrito a nuestra newsletter (es gratuito) podrás acceder al fichero pbix original de esta sesión para ver las formulas DAX y tener todo el detalle del informe.
Conclusiones
Como veis, HTML Content nos da mucha versatilidad en el diseño de nuestros informes.
Ya lo comenté al principio, es muy recomendable para storytelling, infografías y formatos de visualizaciones difíciles de conseguir con las herramientas estándares de Power BI.
¡Venga, a probad la visualización HTML Content y contadme en comentarios que tal os ha ido y para que lo habéis utilizado!
