Where to place certain values in a chart code

I’m having a bit of confusion on understanding just simple placement of my data. I’m making a pie chart based off of a data set so I know I have to plug them into where it says diameter and such but can someone help clarify this a bit more for me.

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

I have all my data values ready to plug in I just need clarification as to where they go and why!
Here is my full code:

Boolean barGraphButton = true;
int beaver = 0;

// create array for data
int[] day;
int[] time;
float [] temp;

int leftMargin = 100;
int rightMargin = 50;
int topMargin = 20;
int bottomMargin = 80;
int barWidth;



void setup() {
  size(1200, 700);
  smooth();
  frame.setResizable(true);

  // load data from csv file
  String[] lines = loadStrings("data.csv");

  //use number of columns to set length
  day = new int[lines.length];
  time = new int[lines.length];
  temp = new float[lines.length];
  for (int i=0; i<lines.length; i++) {
    //split into 2 strings
    String[] tokens = splitTokens(lines[i], ",");
    // put 2nd string into int array
    day[i] = int(tokens[1]);
    time[i] = int(tokens[2]);
    temp[i] = float(tokens[3]);
  }
  //set bar width according to # of rows of data
  barWidth = (width -leftMargin-rightMargin)/ lines.length;
  println(barWidth);
}

void barGraph() {

  fill(26, 129, 13);

  //set height of bars
  for (int i=0; i<day.length; i++) {
    float h = day[i];
    rect((i*barWidth)+leftMargin, height - (h+bottomMargin), barWidth*.85, h);
  }

  // Title Text
  textSize(24);
  textAlign(CENTER);
  fill(0);
  text("Beaver Body Temperature", width/2, height/6);
}

void pieChart(){
  }


void draw() {
  background(255); 
  switch(beaver) {
  case 0: 
    barGraph();
    break;
  case 1: 
    pieChart();  
    break;
  case 2:

    break;
  }
  //create Toggle Button to display bar or line graph
  color C1 = color(#E3DC10);
  color C2 = color(#550183);

  if (barGraphButton) {
    fill(C1);
    rect(width*.8, height/25, 100, 25);

    //text during bar graph view
    textSize(10);
    fill(0);
    text("switch view", width*.8+50, height/25+13);
  } else {

    fill(C2);
    rect(width*.8, height/25, 100, 25);
    textSize(10);
    text("switch view", width*.8+50, height/25+13);
  }
}

void mouseClicked() {
  // click from Bar graph to Line graph
  beaver = (beaver+1)%2;
  beaver = (beaver+1)%3;
  //if (barGraphButton) {
  //  if (mouseX > width*.8 && mouseX < (width*.8)+100 && mouseY > height/25 && mouseY < height/25+25) {
  //    barGraphButton = false;
  //  }
  //} else {
  //  // Click from Line graph to Bar graph
  //  if (mouseX > width*.8 && mouseX < (width*.8)+100 && mouseY > height/25 && mouseY < height/25+25) {
  //    barGraphButton = true;
  //  }
  //}
}

sadly I don’t think i can provide my data file to run the code.

1 Like

Remark

the first code segment seems incomplete

void pieChart(float diameter, int[] data) {
  float lastAngle = 0;

You wrote:

please provide some fake data then with the right type of time etc. please

Arrays

This section

    String[] tokens = splitTokens(lines[i], ",");
    // put 2nd string into int array
    day[i] = int(tokens[1]);
    time[i] = int(tokens[2]);
    temp[i] = float(tokens[3]);

looks suspicious : arrays start with 0 , so I guess you want

    day[i] = int(tokens[0]);
    time[i] = int(tokens[1]);
    temp[i] = float(tokens[2]);

Here is an example

void setup() {
  size(1200, 700);
}

void draw() {
  background(255); 

  stroke(255, 0, 0);
  int[] c1 = {
    130, 100, 70, 60
  };
  pieChart(200, c1);
}

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

    text(str(i), 
      cos((lastAngle+lastAngle+radians(data[i]))/2) * diameter/2*1.1  + width/2, 
      sin((lastAngle+lastAngle+radians(data[i]))/2) * diameter/2*1.1  + height/2);

    lastAngle += radians(data[i]);
  }
}
1 Like

@Chrisir this is the example code provided from processings examples. Maybe that’s why I can’t get it to run correctly

I made an example now - see above

The angle starts at 90 degrees (pointing to the right, to the east if you like (3 o’clock), not north)

the goes clockwise then

This is starting to make more sense now, my next question would be

would this would be where I would paste however many values I would like to show on the chart. each array has a list of recorded data from a csv file. I would like to just use temp for at least 20 values or segments within the circle chart.

would this would be where I would paste however many values I would like to show on the chart

That’s right. The function

pieChart(float diameter, int[] data)

expects a diameter and a list of the values (essentially in degrees of a circle).

One way to solve this is to make the array I called c1 on the fly by copying your data from day or temp into c1. Then pass c1 to pieChart().

Give c1 a better name - pieData or so :wink:

Remark

As I said, the values in the data are essentially measured in degrees of a circle.

This is a little lame. Independent of the values and the number of the values they should be scaled in a way that they add up to 360 degrees (scale them proportionally).

Chrisir

1 Like