Simple SVG KPI (Power BI august 2018 update) 08-09-2018 09:14 AM

[matemusic]

Hi,

based on the last update Power BI video of SVG visualisation here is a measure, that creates simple KPI. 

User has to add reference for 3 values: Main Value, Goal and Max Value.

Based on values KPI color is changing to green or red. User can also change colors or edit if function for color changing.

Measure category has to be Image URL.

Visualisation only works in table visual. I hope someday will works in other visualisations too. 

Maybe there is a change to get a simple visualisation, where DAX measure could return HTML code for creating custom visuals.

If you like measure, please use it and improve it. Please share your versions of measure.

Code: 

SVG KPI = 
------------------------DATA (replace values)-------------------------
VAR MainValue = 'Value'[Measure] 
VAR GoalValue = 'Goal'[Goal Value]
VAR MaxValue = 'Max Value'[MaxValue] //End value of bar must be higher than value and goal
VAR GoalTxt = "Goal"
-----------------------COLORS--------------------
VAR ColorGood= "Green"
VAR ColorBad ="Red"
VAR GoalColor = "Orange"
----------------IF statement for colors------------------------------------------
VAR KPIColor = if(GoalValue<=MainValue;ColorGood;ColorBad)
---------------------------------------
VAR ValuePos = MainValue/MaxValue*100
VAR GoalPos = GoalValue/MaxValue*100
VAR PicHigh = "150"
VAR PicWidth ="150"
------------------- SVG code
VAR SvgC = 
"
<text x='0' y='25' font-size='35' fill='"&KPIColor&"'>"&MainValue&"</text>
<text x='0' y='55' font-size='25' fill='Orange'>"&GoalTxt&" "&GoalValue&"</text>
<rect x='0' y='70' rx='0,5' ry='20' width='100%' height='25'
  style='fill:white;stroke:black' />
<rect x='0' y='70' rx='0,5' ry='20' width='"&ValuePos&"%' height='25'
  style='fill:"&KPIColor&";stroke:black' />
<line x1='"&GoalPos&"%' y1='65' x2='"&GoalPos&"%' y2='200' style='stroke:"&GoalColor&";stroke-width:3' />
"
------------SVG - start code & end code
VAR Cd1=
"data&colon;image/svg+xml;charset=utf-8," &
"<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'
    width='"&PicWidth&"' 
    height='"&PicHigh&"' 
     viewBox = '0 0 100 100'> "
VAR Cd2 = " </svg>"
RETURN
Cd1&SvgC&Cd2
 

[dsmitha]

awesome, thank you 

[JNordentoft]

Hi, I just tried your code. 
I get a broken image when I use it. 

Do you know if this still works? or is there are a better way to get this visual? Tried some different custom visuals, but I think they are a bit slow. 

[stevedep]

That's really cool! I was not aware we can (prototype) Custom Visual Development like this. Great to quickly create a custom visual!