PBI - SVG circle isn't displaying

Question

I'm trying to replicate a visual that I found at the link below; however, the circle isn't displaying. I've tried adjusting the parameters, but I still haven't found a workaround to make it function.

Link to the article: https://datameerkat.com/templates/Circle-progress-chart

Sample File: https://github.com/tomecsek21/pbix_file/blob/main/svg_circle_test.pbix

Could anyone please advise? Thanks

Answer 1

I did a diff on your code and the sample code and there is no material difference. I suspect the sample code is missing something in the circle logic and I have always found using transform, rotate and translate far from intuitive. If you want an easier circle implementation, try the one from my sample file here.

https://github.com/PBI-David/SVG

Something strange is happening with the file you sent. However, if you create a brand new .pbix and drop in the following code into a HTML Lite visual, it works fine.

SVG Donut = 
VAR per = 0.25
VAR height = 140
VAR width = 150
VAR radius = (height/2) - 2.5
VAR circ = 2*PI()* radius
VAR val = FORMAT( per, "#%;-#%;0%")
VAR a1 =  IF( per >= 0,(per *circ),0)
VAR a2 = (1-per) *circ  
VAR offset = 0.25*circ
VAR sort  = IF(per <0, 1000+ABS(per),  10000+ per)
RETURN
 
"<svg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " & width & " " & height & "'   >
 /*" & sort & "*/ 
<rect width='150' height='150' style='fill:rgba(0,0,255,0);stroke-width:2;stroke:'/>
<circle class='background' cx='" & radius + 8 & "' cy='50%' r='" & radius & "' fill='transparent' stroke='#dde1e3' stroke-width='5'   />
<circle class='segment' cx='" & radius + 8 & "' cy='50%' r='" & radius & "' fill='transparent' stroke='#2c76b4' stroke-width='5' stroke-dasharray='" & a1 & " " & a2 & "' stroke-dashoffset='" & offset & "'></circle>
<style>
    .percent {
          font: bold 12pt Arial;
    }
  </style>
<text  x='" & width/2 & "' y='50%' class='percent' text-anchor='middle' fill='#666666' alignment-baseline='middle'  >" & val &"</text>
</svg>"