app.js

app.js

"use strict"


window.onload = function()
{
    arc();

    // pieSlice();

    // pieChart();
}


function arc()
{
    drawArc({ id: "svg", centreX: 256, centreY: 256, startAngleRadians: 0, sweepAngleRadians: Math.PI / 2, radius: 192, fillColor: "#0000FF", fillOpacity: 0.0, strokeColour: "#000000" } );
}


function pieSlice()
{
    drawPieSlice({ id: "svg", centreX: 256, centreY: 256, startAngleRadians: 0, sweepAngleRadians: Math.PI / 4, radius: 192, fillColour: "#FF8000", strokeColour: "#000000" } );
}


function pieChart()
{
    const colours = ["red", "green", "blue", "yellow", "orange", "purple"];
    const data = [26, 16, 36, 10, 20, 29];
    const total = data.reduce((a,b) => a + b); // = 137
    const radiansPerUnit = (2 * Math.PI) / total;

    let startAngleRadians = 0;
    let sweepAngleRadians = null;

    for(let i = 0, l = data.length; i < l; i++)
    {
        sweepAngleRadians = data[i] * radiansPerUnit;

        drawPieSlice({ id: "svg", centreX: 256, centreY: 256, startAngleRadians: startAngleRadians, sweepAngleRadians: sweepAngleRadians, radius: 192, fillColour: colours[i], strokeColour: "#000000" } );

        startAngleRadians += sweepAngleRadians;
    }
}