Skip to content

Instantly share code, notes, and snippets.

@CodeDrome
Created Oct 20, 2021
Embed
What would you like to do?
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment