Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
02-19-2021 21:34 PM
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: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
awesome, thank you
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.
That's really cool! I was not aware we can (prototype) Custom Visual Development like this. Great to quickly create a custom visual!
Proud to be a Super User!
Awesome Keyboard Shortcusts in Power BI, thumbs up if you like the article
My Community Blog Articles (check them out!)
My Blog - Power M code to automatically detect column types -
How to create test data using DAX!