SVG.org > SVG Pie Chart

SVG Pie Chart

Posted by DesertDawg apropos on Sun Nov 11th, 2007 at 14:07:41 BST

Inspired by the following:

Internet Explorer below 50%, always, and dropping ... Posted by stelt apropos on Fri Oct 26th, 2007 at 13:33:10 BST At my SVG links resource http://svg.startpagina.nl Internet Explorer use is always below 50%. Quite often it's not even the first browser, but behind Firefox. Opera that keeps improving its already good SVG support is small, but growing and looking forward to having SVG support added to Safari in only hours is improving its numbers as well.


<svg onload='go()' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

<text x='220' y='080'> 45.20% Mozilla </text>
<text x='220' y='100'> 00.61% Netscape, Mobile Wap, Other </text>
<text x='220' y='120'> 05.51% Safari </text>
<text x='220' y='140'> 04.95% Opera </text>
<text x='220' y='160'> 43.66% Microsoft Internet Explorer </text>

<script> <![CDATA[
  
 
 pcarray='0.6 5.0 5.5 43.7 45.2'           // percentages of pie pieces for each wedge
 
 pc=pcarray.split(' ')
 
 var n = pc.length               // Number of pie wedges (centered at 0 0 and translated to 250 250)
 var a = 0                            // Angle of each wedge  (even pie wedge angle = Math.PI*2/n)
 var b = 0                            // Start and accum angles - trailing edge (starts at 3:00 and goes CCW)
 var c = 0                            // Accum angles - forward edge (goes CCW)
 var r = 100                        // Radius of pie
 
 colorarray='red yellow blue lime violet'
 color=colorarray.split(' ')
 
 function go()
 {
 for (i=0; i<n; i++)
 {
 clr=i;if(i>=color.length)clr=(i%color.length)

a = Math.PI*2*(pc[i]/100)                              // compute each pie wedge angle separately
c += a                                                                // accumulate the pie wedge angles - forward
var x1 = Math.round(r*Math.cos(b)) + ' '       // trailing
var y1 = Math.round(r*Math.sin(b))  + ' '
var x2 = Math.round(r*Math.cos(c)) + ' '       // forward
var y2 = Math.round(r*Math.sin(c))  + ' '

d = 'M0 0 '+ x1+' ' + y1+' ' + 'A' + r+' ' + r+' ' + ' 0 0 1 ' + x2+' ' + y2+' ' + 'L0 0'

dog = document.createElementNS('http://www.w3.org/2000/svg', 'path')
dog.setAttributeNS(null,'d', d )
dog.setAttributeNS(null,'fill',color[clr])
dog.setAttributeNS(null,'transform','translate(100,100)')
document.documentElement.appendChild(dog)
b += a                                                                                 // save the old accumulation
}}

//]]> </script>

</svg>

SVG Pie Chart | 1 comment (1 topical, 0 editorial, 0 hidden)

Useful Links

Make a new account

Username:
Password: