Tuesday, September 3, 2013

Trouble drawing a pie chart with SVG

Trouble drawing a pie chart with SVG

I'm working in a SVG small system to draw charts (line, bar and pie) and
I'm having some weird issues with the pie chart... When the sections in
the chart are smaller than the half of the circle, the function works
perfectly and everything gets drawn correctly (see the image below):

However, when a portion of the pie is bigger than the half of the circle,
the portion is drawn wrong, as if the center of the arc was moved (see the
image below and note that the red part is the "empty" circle where the
portions have to be drawn: I'm filling it with red color to check if
portions are drawn correcly or not):

I'm using SVG's "path" function with absolute parameters to draw each pie
portion. I'm passing some parameters to the function:
$circleCenter_ corresponds to the X and Y position of the center of the
circle. $valPos[i][0-1] contains the X and Y position of each point of the
triangle formed by the center and the two points on the circle (where the
portion should end).
Here is the "path" I'm using:
<path d="M<?php echo $circleCenterX." ".$circleCenterY; ?>
L<?php echo $valPos[$i][0][0].",".$valPos[$i][0][1] ?>
A<?php echo $circleRadius.",".$circleRadius; ?> 0 0,1 <?php echo
$valPos[$i][1][0].",".$valPos[$i][1][1]; ?> Z"
(...) />
I don't understand why it works fine when the portion is less than the
circle half, and why it seems like the center is "moved" when the portion
is bigger than the circle half. Of course the $circleCenter variables are
never modified inside the pie drawing function...
Any clue about this?
Thanks in advance for your time and effort! :)

No comments:

Post a Comment