CODEWITHSUNDEEP
javascriptsvgchartsraphaeltrigonometry
P Kero
P Kero

Reputation: 77

Creating pie chart with some arcs more than 180 degrees

I'm taking help from the code given here http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ to create a pie chart. But the problem is, if I replace some of those values with 0. Or give large values, the angles become more than 180 and the chart looks weird as given here fiddle. The x2 and y2 values for the arc is given here

    x2 = parseInt(200 + 180 * Math.cos(Math.PI * endAngle / 180), 10);
    y2 = parseInt(200 + 180 * Math.sin(Math.PI * endAngle / 180), 10);

Is there some changes I could bring in this? Some useful tips on creating arcs with more than 180deg angles would be appreciated!

Upvotes: 3

Views: 1273

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

You need to set the largeArc flag to 1 if the angle is > 180. Change your fiddle Like so...

var d = "M200,200  L" + x1 + "," + y1 + "  A180,180 0 " + ((endAngle - startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z"; //1 means clockwise

Upvotes: 7

Related Questions