Texte im Power BI Matrix Visual mittels UNICHAR oder SVG visualisieren

In Power BI können derzeit im Table Visual sowohl Zahlen als auch Texte bedingt formatiert werden. Im Matrix Visual hingegen können nur die Zahlen im Values Bereich bedingt formatiert werden - nicht aber die Texte im Columns und Rows Bereich. Diese Einschränkung kann mit einer UNICHAR oder einer SVG Visualisierung der Texte umgangen werden (siehe dazu auch hier für einen anderen Anwendungsfall).

Hinweis: im folgenden Beitrag werden ausschließlich Calculated Columns und keine Measures erzeugt, da im Rows und Columns Bereich des Matrix Visuals ausschließlich Columns und keine Measures aufgetragen werden können.

Ausgangssituation

In einer Anwendung für das Projektmanagement Reporting ist jedes Projekt einer Project Phases "in execution" oder "finished" zugeordnet:

Diese beiden Stati können im Matrix Visual entweder im Columns Bereich ...

.... oder im Rows Bereich aufgetragen werden:

Basislösung in Power BI: Bedingte Formatierung

Zur Bestimmung der Farbe für die Bedingte Formatierung wird eine entsprechende Calculated Column mittels DAX erzeugt:

Project Phase (Color) = 
    SWITCH(
        'Dim Projects'[Project Phase];
        "finished"; "#16c60c";
        "in execution"; "#fff100"
    )

Die derart definierten Farben können jetzt wunderbar auf die Werte im Values Bereich angewendet werden, nicht aber auf die Texte im Rows Bereich:

Lösung 1: Anreicherung der Texte mittels UNICHAR() Symbolen

Als mögliche Lösung kann in einer weiteren Calculated Column der Text mit einem bunten UNICHAR() Symbol angereichert werden:

Project Phase (with Symbol) = 
     SWITCH(
        'Dim Projects'[Project Phase];
        "finished"; UNICHAR(128994);
        "in execution"; UNICHAR(128993);
        "other"; UNICHAR(128997)
    )
    & " " 
    & 'Dim Projects'[Project Phase]

Der derart angereicherte Text kann jetzt im Matrix Visual sowohl im Columns als auch im Rows Bereich problemlos eingesetzt werden:

Darüber hinaus kann das Textfeld auch im Slicer eingesetzt werden.

Lösung 2: Visualisierung der Texte als SVG Images

SVG Images sind Bilder, die mittels HTML Befehl dynamisch generiert werden. Wir können diese Technologie in Power BI zur bedingten Formatierung nutzen, in dem wir ein buntes Viereck erzeugen und darauf unseren Text platzieren. Die Texte können dabei horizontal oder auch vertikal dargestellt werden.

a) Horizontale Texte für den Rows Bereich

Wir erzeugen auch hier eine Calculated Column mittels DAX mit dem entsprechenden SVG Befehl für die horizontale Darstellung auf einem liegenden Rectangle:

Project Phase (SVG horicontal) = 
VAR var_Color = 
    SWITCH(
        'Dim Projects'[Project Phase];
        "finished"; "rgb(22,198,12)";
        "in execution"; "rgb(255,241,0)"
    )

VAR var_Project_Phase = 'Dim Projects'[Project Phase]

RETURN
    "data:image/svg+xml;utf8,"
    & "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>"
    & "<rect width='100%' height='90%' x='0' y='0' fill='" & var_Color & "' />"
    & "<text text-anchor='left' x='5' y='16' font-size='12' fill='rgb(0,0,0)' font-family='Segoe UI'> " & var_Project_Phase & " </text>"
    & "</svg>"

Die Kategorisierung als Image URL ist essentiell für die Darstellung des Bildes anstelle der URL:

Diese Column kann jetzt im Columns oder Rows Bereich des Matrix Visuals platziert werden - es entsteht der Eindruck einer bedingten Formatierung der Texte im Rows Bereich:

Entscheidend für die korrekte Darstellung des SVG Images sind die Einstellungen der Bildgröße im Matrix Visual:

Glücklicherweise beziehen sich diese Image size Settings nicht nur auf Bilder im Values Bereich sondern auch im Columns und Rows Bereich.

b) Vertikale Texte für den Columns Bereich

Wir erzeugen eine weitere Calculated Column mittels DAX mit dem entsprechenden SVG Befehl für die vertikale Darstellung auf einem stehenden Rectangle:

Project Phase (SVG vertical) = 
VAR var_Color = 
    SWITCH(
        'Dim Projects'[Project Phase];
        "finished"; "rgb(22,198,12)";
        "in execution"; "rgb(255,241,0)"
    )

VAR var_Project_Phase = 'Dim Projects'[Project Phase]

RETURN
    "data:image/svg+xml;utf8,"
    & "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>"
    & "<rect width='100%' height='100%' x='0' y='0' fill='" & var_Color & "' />"
    & "<text text-anchor='left' x='-90' y='25'  transform='rotate(-90,0,0)' font-size='13' fill='rgb(0,0,0)' font-family='Segoe UI'> " & var_Project_Phase & " </text>"
    & "</svg>"

Jetzt wieder die Kategorisierung als Image URL vornehmen:

Und schon erhalten wir die formatierten vertikalen Text-Vierecke im Columns Bereich des Matrix Visuals:

Entscheidend für die saubere Darstellung ist auch hier die Definition der gewünschten Bildgröße:

Anstelle eines Vierecks können auch Ellipsen, Kreise und einige andere Formen erzeugt werden:

Leider werden SVG Images NICHT im Slicer dargestellt - leider weder im aktuellen Default Slicer noch im neuen Button Slicer (Preview):

Fazit und Empfehlungen

Beide Lösungsvarianten haben ihre Vorzüge.

Die Formatierungsmöglichkeiten mit UNICHAR sind zwar begrenzt, dafür ist der Einsatz universell bspw. auch im Slicer möglich, da es sich weiterhin um einen Text und nicht um ein Image handelt.

SVG bietet umfangreiche Formatierungsmöglichkeiten, es sind auch sehr anspruchsvolle Darstellungen möglich (siehe weiterführende Links). Schade nur, das SVG Images derzeit nicht im Slicer gerendert werden.

Weiterführend

https://www.sqlbi.com/articles/creating-custom-visuals-in-power-bi-with-dax/ (toll!)

https://de.wikipedia.org/wiki/Scalable_Vector_Graphics

https://www.w3schools.com/graphics/svg_rect.asp

https://www.mediaevent.de/tutorial/svg-text-alignment.html

https://www.youtube.com/watch?v=ludhojThyZI

Über den Autor

Blog auf Feedly abonnieren

Kategorien

Verwandte Beiträge

Power BI Camp - Präsenztrainings in Wien und Nürnberg!

Dashboarding mit Power BI, DAX & Datenmodellierung und Power Query. Drei Einzelmodule oder als ganze Trainingswoche - für Einsteiger und Fortgeschrittene!

Termine 2022

Wien: (7./8. Februar 2022)
und 25.-28 April 2022
Nürnberg: (14./15. Februar 2022)
und 9.-12. Mai 2022

Jetzt buchen und Rabatt sichern.

Jetzt buchen!

Leave a Replay

Schreibe einen Kommentar

Kostenlos zum Newsletter anmelden

Ihre Anfrage

Schicken Sie uns Ihre Fragen und Anregungen!