# re: pie chart

From: Bernd Grolig <Bernd.Grolig@ptv.de>
Date: Thu, 8 Jun 2000 14:36:37 +0200
Message-ID: <81CE335DFC44D311BEFF00E0292A346EE32B95@ptv_nt_09.ptv.ptv.de>

```Hi Christian,

I haven't tried it yet. But it should work with the elliptical arc
parameter, defined in the path - tag.

There is an explanation in the W3C Spec - Section Elliptical Arcs
http://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

I posted an extract of the Spec below.
If it works, you might post an example, would be very interesting.

Regards, Bernd.

Here is what it says:

The elliptical arc command draws a section of an ellipse which meets the
following constraints:
*	the arc starts at the current point
*	the arc ends at point (x, y)
*	the ellipse has the two radii (rx, ry)
*	the X-axis of the ellipse is rotated by x-axis-rotation relative to
the X-axis of the current coordinate system.
For most situations, there are actually four different arcs (two different
ellipses, each with two different arc sweeps) that satisfy these
constraints: (Pictures will be forthcoming in a future version of the spec)
large-arc-flag and sweep-flag indicate which one of the four arcs are drawn,
as follows:
*	Of the four candidate arc sweeps, two will represent an arc sweep of
greater than or equal to 180 degrees (the "large-arc"), and two will
represent an arc sweep of less than or equal to 180 degrees (the
"small-arc"). If large-arc-flag is '1', then one of the two larger arc
sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the
smaller arc sweeps will be chosen,
*	If sweep-flag is '1', then the arc will be drawn in a
"positive-angle" direction (i.e., the ellipse formula x=cx+rx*cos(theta) and
y=cy+ry*sin(theta) is evaluated such that theta starts at an angle
corresponding to the current point and increases positively until the arc
reaches (x,y)). A value of 0 causes the arc to be drawn in a
"negative-angle" direction (i.e., theta starts at an angle value
corresponding to the current point and decreases until the arc reaches
(x,y)).
(We need examples to illustrate all of this! Here is one for the moment.
Suppose you have a circle with center (5,5) and radius 2 and you wish to
draw an arc from 0 degrees to 90 degrees. Then one way to achieve this would
be M 7,5 A 2,2 0 0 1 5,7. In this example, you move to the "0 degree"
location on the circle, which is (7,5), since the center is at (5,5) and the
circle has radius 2. Since we have circle, the two radii are the same, and
in this example both are equal to 2. Since our sweep is 90 degrees, which is
less than 180, we set large-arc-flag to 0. We want to draw the sweep in a
positive angle direction, so we set sweep-flag to 1. Since we want to draw
the arc to the point which is at the 90 degree location of the circle, we
set (x,y) to (5,7).)

Christian Schmitt wrote:

Hi,
I have this challenge here to create an HTML page form XML (sales) data.
That so far is no problem. Whar is a problem that there is a pie chart to be
included. I've been playing around with SVG using rotate() and paths with
arcs and the like but I haven't found a solution yet to produce a pie chart.

Does anyone have a hint for me on how to go about doing that?