Simple SVG KPI (Power BI august 2018 update)

matemusic — Thu, 09 Aug 2018 16:14:22 GMT

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

Re: Simple SVG KPI (Power BI august 2018 update)

stevedep — Sat, 20 Feb 2021 05:34:03 GMT

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

Re: Simple SVG KPI (Power BI august 2018 update)

Anonymous — Thu, 16 Sep 2021 09:23:55 GMT

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.

Re: Simple SVG KPI (Power BI august 2018 update)

Anonymous — Tue, 22 Mar 2022 14:41:16 GMT

awesome, thank you

topic Simple SVG KPI (Power BI august 2018 update) in Quick Measures Gallery

Simple SVG KPI (Power BI august 2018 update)

Re: Simple SVG KPI (Power BI august 2018 update)

Re: Simple SVG KPI (Power BI august 2018 update)

Re: Simple SVG KPI (Power BI august 2018 update)