Arcs 4.1 - JS functions

Here we use 2 JavaScript functions 'describeArc' and 'polarToCartesian' to draw circle arcs. The function does not allow a full 360° circle, but we can fudge it with a simple alteration.

For the black arc, we use an 'endAngle' of 359.99° instead of 360°. Even with a stroke-width set at 1px, the arc appears to close. You can zoom in as much as you like!

describeArc(375,375,100,0,359.99)

The arcs begin at 12:00 and are drawn clock-wise. 0° is at 12:00; 90° is at 3:00; 180° is at 6:00; 270° is at 9:00.

As you can see, we can alter the stroke-width as well. We use this later to make our donut charts.

View the source code to see the magic.

The JavaScript describeArc function can be found here. Or here:

function describeArc(x, y, radius, startAngle, endAngle) {
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
        "M", start.x, start.y,
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");
    return d;
}

It calls the polarToCartesian JavaScript function to convert degrees to radians:
(JavaScript uses radians not degrees for trigonometric calculations)

var x; var y; var Angle;
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
    return {
        x: centerX + (radius * Math.cos(angleInRadians)),
        y: centerY + (radius * Math.sin(angleInRadians))
    };
};

As usual, use your browser 'view source' feature to see how it's done.

Next we do the donut chart.