column with two values per row

[bice]

I am using mokkup.ai to mock a dashboard and came accross this in the simple table view. I have a value and the target value as a KPI in the first column of the table. I don't see anything in Power BI that could do something like this, and I'm hoping someone else has come across the need to have KPIs like me. Is there a way to do this, and if not is anyone aware of a custom vis in python or R that could do it?

[Anonymous]

Hi @bice ,

I tried creating part of charts using the SVG + Dax, and I hope it will help you. 

KPI_Progress_Chart = 
VAR CurrentValue = [Current KPI Value]
VAR TargetValue = [Target KPI Value]
VAR BarWidth = 700 
VAR BarHeight = 70 
VAR BarXStart = 0 
VAR BarYStart = 70 
VAR ProgressRatio = IF(TargetValue <> 0, CurrentValue / TargetValue, 0)
VAR ProgressWidth = BarWidth * ProgressRatio 
VAR ArrowDirection = IF(CurrentValue < TargetValue, "down", "up") 
VAR BarColor = IF(CurrentValue < TargetValue, "red", "green") 
VAR ArrowXPos = BarXStart + 20 
VAR ArrowYPos = BarYStart + BarHeight / 2 
VAR CurrentValueText = FORMAT(CurrentValue, "#,##0") 
VAR TargetValueText = FORMAT(TargetValue, "#,##0") 
VAR CurrentValueXPos = 0 
VAR CurrentValueYPos = 50 
VAR TargetValueXPos = BarXStart + BarWidth + 10
VAR TargetValueYPos = BarYStart + BarHeight / 2 + 10
RETURN 
"data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='200'>
<text x='" & CurrentValueXPos & "' y='" & CurrentValueYPos & "' font-size='30' fill='black'>" & CurrentValueText & "</text>
<rect x='" & BarXStart & "' y='" & BarYStart & "' width='" & BarWidth & "' height='" & BarHeight & "' fill='#E0E0E0' stroke='black' stroke-width='1'/>
<rect x='" & BarXStart & "' y='" & BarYStart & "' width='" & ProgressWidth & "' height='" & BarHeight & "' fill='" & BarColor & "'/>
<line x1='" & BarXStart + ProgressWidth & "' y1='" & BarYStart & "' x2='" & BarXStart + ProgressWidth & "' y2='" & BarYStart + BarHeight & "' stroke='black' stroke-width='2'/>
<text x='" & TargetValueXPos & "' y='" & TargetValueYPos & "' font-size='30' fill='black'>" & TargetValueText & "</text>
<g transform='translate(" & ArrowXPos & ", " & ArrowYPos & ")'>
    <path d='M-10,-10 L10,0 L-10,10 z' fill='" & BarColor & "' stroke='white' stroke-width='2' transform='rotate(" & IF(ArrowDirection = "up", 90, -90) & ")' />
</g>
</svg>"

SVG in Power BI Part 2 - KPI Shapes - Hat Full of Data

Creating custom visuals in Power BI with DAX - SQLBI

Best Regards,
Gao
Community Support Team

If there is any post helps, then please consider Accept it as the solution  to help the other members find it more quickly.
If I misunderstand your needs or you still have problems on it, please feel free to let us know. Thanks a lot!

How to get your questions answered quickly --  How to provide sample data in the Power BI Forum