cancel
Showing results for 
Search instead for 
Did you mean: 

SVG Multi-Shape, Multi-Color Indicators

Super User
1828 Views
Super User
Super User

SVG Multi-Shape, Multi-Color Indicators

One of the community blog posts that I have referrred to multiple times since it was published was @Dianapo's Power BI Desktop: Custom Aggregations, Formatting and Performance Indicators:

 

https://community.powerbi.com/t5/Community-Blog/Power-BI-Desktop-Custom-Aggregations-Formatting-and-...

 

However, since discovering this technique I have run into some limitations with using UNICODE characters for indicators, namely the available shape and color options are fairly limited. However, the ability to tag measures as Image URL's and support for SVG functionality have provided a solution to these limitations that I present here. And since SVG Quick Measures are all the rage these days, I figured I'd create one of my own.

 

The two measures presented here provide a measure that produces different colors of all the same shapes based on some indicator criteria and another that modifies both color and shape based upon an indicator criteria. Enjoy!

 

Color changes with the same shape (based on a slicer selection):

 

Measure = 
VAR __shape =
    IF(HASONEVALUE(Shapes[Shape]),MAX(Shapes[Shape]),"Circle")
VAR __indicator = SUM([Column1])
VAR __radius = 9
VAR __opacity = 0.75
VAR __color =
    SWITCH(
        TRUE(),
        __indicator<=-5,"DarkOrchid",
        __indicator<=-4,"DarkBlue",
        __indicator<=-3,"Blue",
        __indicator<=-2,"FireBrick",
        __indicator<=-1,"Red",
        __indicator=0,"Gold",
        __indicator>=5,"HotPink",
        __indicator>=4,"Orange",
        __indicator>=3,"Tomato",
        __indicator>=2,"SpringGreen",
        __indicator>=1,"Green",
        "White"
    )
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='10' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextTriangle = "<polygon points=""0,20 20,20 10,0"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextDot = "<circle cx='10' cy='10' r='" & 1 & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextSquare = "<polygon points=""0,20 0,0, 20,1 20,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextDiamond = "<polygon points=""10,0 20,10, 10,20 0,10"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextRect = "<polygon points=""0,20 0,0, 40,1 40,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextHex = "<polygon points=""10,0 20,4 20,16 10,20 0,16 0,4"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextOct = "<polygon points=""6,0 14,0 20,6 20,14 14,20 6,20 0,14 0,6"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextPent = "<polygon points=""10,0 20,8 16,20 4,20 0,8"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextStar = "<polygon points=""10,0 12,9 20,8 13,13 16,20 10,15 4,20 7,13 0,9 8,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeText =
    SWITCH(__shape,
        "Triangle",__shapeTextTriangle,
        "Circle",__shapeTextCircle,
        "Dot",__shapeTextDot,
        "Square",__shapeTextSquare,
        "Rectangle",__shapeTextRect,
        "Hexagon",__shapeTextHex,
        "Octagon",__shapeTextOct,
        "Pentagon",__shapeTextPent,
        "Star",__shapeTextStar,
        "Diamond",__shapeTextDiamond,
        __shapeTextCircle
    )
VAR __return = __header & __shapeText & __footer
RETURN __return

 

Color and shape changes:

 

Measure 2 = 
VAR __shape =
    IF(HASONEVALUE(Shapes[Shape]),MAX(Shapes[Shape]),"Circle")
VAR __indicator = SUM([Column1])
VAR __radius = 9
VAR __opacity = 0.75
VAR __color =
    SWITCH(
        TRUE(),
        __indicator<=-5,"DarkOrchid",
        __indicator<=-4,"DarkBlue",
        __indicator<=-3,"Blue",
        __indicator<=-2,"FireBrick",
        __indicator<=-1,"Red",
        __indicator=0,"Gold",
        __indicator>=5,"HotPink",
        __indicator>=4,"Orange",
        __indicator>=3,"Tomato",
        __indicator>=2,"SpringGreen",
        __indicator>=1,"Green",
        "White"
    )
VAR __header = "data&colon;image/svg+xml;utf8," &
              "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='10' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextDiamond = "<polygon points=""10,0 20,10, 10,20 0,10"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextTriangle = "<polygon points=""0,20 20,20 10,0"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextDot = "<circle cx='10' cy='10' r='" & 1 & "' fill='" & __color & "' fill-opacity='" & __opacity & "' />"
VAR __shapeTextSquare = "<polygon points=""0,20 0,0, 20,1 20,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextRect = "<polygon points=""0,20 0,0, 40,1 40,20"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextHex = "<polygon points=""10,0 20,4 20,16 10,20 0,16 0,4"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextOct = "<polygon points=""6,0 14,0 20,6 20,14 14,20 6,20 0,14 0,6"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextPent = "<polygon points=""10,0 20,8 16,20 4,20 0,8"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeTextStar = "<polygon points=""10,0 12,9 20,8 13,13 16,20 10,15 4,20 7,13 0,9 8,9"" style=""fill:" & __color & ";stroke:" & __color & ";stroke-width:0;fill-rule:evenodd;"" />"
VAR __shapeText =
    SWITCH(
        TRUE(),
        __indicator<=-5,__shapeTextCircle,
        __indicator<=-4,__shapeTextDot,
        __indicator<=-3,__shapeTextHex,
        __indicator<=-2,__shapeTextOct,
        __indicator<=-1,__shapeTextPent,
        __indicator=0,__shapeTextRect,
        __indicator>=5,__shapeTextSquare,
        __indicator>=4,__shapeTextTriangle,
        __indicator>=3,__shapeTextStar,
        __indicator>=2,__shapeTextDiamond,
        __indicator>=1,__shapeTextCircle,
        __shapeTextCircle
    )
VAR __return = __header & __shapeText & __footer
RETURN __return

 

 NOTE: In the __header VAR, you need to change the &colon; to an actual colon ( : )

 

 

 

 

 


Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!


Dianapo Visitor
Visitor

Re: SVG Multi-Shape, Multi-Color Indicators

Thanks Greg for mentioning my article and also for all the helpful info in yours.  Below also including the link to the color indicator article as the one you have is for the custom aggregations. I totally made it confusing as I published two different articles with the same name and adding part 1 and part 2 in the end Smiley Happy

 

https://community.powerbi.com/t5/Community-Blog/Power-BI-Desktop-Custom-Aggregations-Formatting-and-...

 

Cheers,

Diana

Super User
Super User

Re: SVG Multi-Shape, Multi-Color Indicators

Appreciate your input @Dianapo! I really have gotten a ton of mileage out of your article. I've used that technique on a number of projects. Really appreciate your contributions to the community!


Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!