Where to place certain values in a chart code

Processing Coding Questions
1

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
2

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
3

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

4

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

5

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.

6

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