Gráficos avanzados HTML con Power BI

¿Por qué usar HTML en Power BI?

Power BI ofrece una amplia variedad de visualizaciones nativas, pero a veces necesitamos algo más personalizado. Aquí es donde el visual HTML Content entra en juego.

Con HTML personalizado puedes:

• Crear KPI cards con diseños únicos
• Mostrar información formateada de manera especial
• Agregar iconos y elementos visuales personalizados
• Crear tablas con estilos específicos

Configurando el Visual HTML

Paso 1: Instalar el visual

Primero, necesitas descargar el visual 'HTML Content' desde AppSource. Este visual te permite renderizar HTML dinámico basado en tus datos.

Paso 2: Crear la medida DAX

Crea una medida que genere el código HTML:

HTML_KPI = 
VAR Valor = [Total Ventas]
VAR Meta = [Meta Ventas]
VAR Porcentaje = DIVIDE(Valor, Meta)
VAR Color = IF(Porcentaje >= 1, '#10B981', IF(Porcentaje >= 0.8, '#F59E0B', '#EF4444'))
RETURN
"<div style='text-align:center; padding:20px;'>
    <h2 style='color:" & Color & "; font-size:32px; margin:0;'>" & FORMAT(Valor, "$#,##0") & "</h2>
    <p style='color:#6B7280; margin:5px 0;'>de " & FORMAT(Meta, "$#,##0") & "</p>
    <div style='background:#E5E7EB; border-radius:10px; height:10px; margin-top:10px;'>
        <div style='background:" & Color & "; width:" & FORMAT(MIN(Porcentaje, 1) * 100, "0") & "%; height:100%; border-radius:10px;'></div>
    </div>
</div>"

Paso 3: Agregar al reporte

Arrastra el visual HTML Content al canvas y agrega tu medida al campo 'Values'.

Casos de uso populares

1. Tarjetas de KPI personalizadas

Crea tarjetas con gradientes, iconos SVG y animaciones CSS.

2. Tooltips enriquecidos

Muestra información adicional con formato cuando el usuario hace hover.

3. Tablas estilizadas

Aplica estilos CSS personalizados a tus tablas de datos.

Consideraciones de seguridad

Power BI tiene restricciones de seguridad que limitan ciertos elementos HTML:

• No se permiten scripts JavaScript
• Algunos eventos están bloqueados
• Las imágenes externas pueden requerir configuración adicional

Conclusión

El visual HTML en Power BI abre un mundo de posibilidades para personalizar tus dashboards. Aunque requiere conocimientos de HTML y CSS, el resultado son visualizaciones únicas que destacan de las estándar.

¿Tienes preguntas? Contáctanos para una consulta gratuita sobre cómo implementar visualizaciones personalizadas en tu organización.