Pie Chart with only 5 datasets/arrays (Noob)

p5.js Beginners
1

I’m just getting started (noob) - I’m confused about using the pie chart to represent data - I converted data into 360 degrees but it still doesn’t seem to be working. Any advice?

Here’s the code for reference:

let angles = [72, 90, 108, 18, 72];
function setup() {
  createCanvas(720, 400);
  noStroke();
  noLoop(); // Run once and stop
}

function draw() {
  background(100);
  pieChart(300, angles);
}

function pieChart(diameter, data) {
  let lastAngle = 0;
  for (let i = 0; i < data.length; i++) {
    let gray = map(i, 0, data.length, 0, 255);
    fill(gray);
    arc(
      width / 2,
      height / 2,
      diameter,
      diameter,
      lastAngle,
      lastAngle + radians(angles[i])
    );
    lastAngle += radians(angles[i]);
  }
}

When I added another array of even 1 in the lets angle it started to work but I have no idea how to make it work with only 5 datasets.

1 Like
2

-a- your code is not posted / formatted as code, please use the
</> code tag
to repair above.

-b- you make a function and hand down the pointer to ‘angles’ with ‘data’
so inside the function should not be used the variable ‘angles’, only ‘data’

-c- with some math to distribute the circle 2 * PI acc. the count and values from the data
it looks better:
https://editor.p5js.org/kll/sketches/E98-K2NVL

2 Likes
3

Oh wow I am dumb - looks like it was working all along. Massive thank you for the response, that was useful too.