Forum Discussion

wujunmin's avatar
wujunmin
Advocate III
3 years ago

Apple watch's donut chart by DAX

One day I saw apple's ads, these donut charts are amazing: 

So, I put one of them (right one) in Power BI by DAX:

Here is the measure: 

 

Chart = 
VAR Pct=0.66 // repalce 0.66 with your percent measure
VAR SVG=
    "<svg viewbox='0 0 110 60' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='55' cy='55' r='50' fill='none' stroke='LightGrey' stroke-opacity='0.4' stroke-width='10' stroke-linecap='round' stroke-dasharray='" & PI()*50 & "' stroke-dashoffset='" & PI()*50 & "'/>
         <g id='wujunmin'>
            <circle cx='55' cy='5' r='5' fill='White' fill-opacity='0.8' stroke='#228FF1'  stroke-width='2.5'/>
            <animateTransform attributeName='transform' type='rotate' from='-90 55 55' to='"&180*pct-90 &" 55 55' begin='0s' dur='3s' fill='freeze'/>
        </g>
        <text x='55' y='45' text-anchor='middle' dominant-baseline='middle' font-size='25' fill='white'>"&ROUND(Pct*100,0)&"</text>
    </svg>"
RETURN
  SVG

 

 

You need HTML Content to get the result: 

This chart even has some kind of animation:

 

No RepliesBe the first to reply