# Where to place certain values in a chart code

**URL:** <https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749>\
**Category:** Coding Questions\
**Created:** [February 26, 2019, 10:52pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749 "2019-02-26T22:52:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Floralvxins](https://avatars.discourse-cdn.com/v4/letter/f/6de8d8/32.png) [@Floralvxins](https://discourse.processing.org/u/Floralvxins)\
**Post date:** [February 26, 2019, 10:52pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/1 "2019-02-26T22:52:37Z")

</div>

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.

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2019, 11:04pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/2 "2019-02-26T23:04:47Z")

</div>

**Remark**

the first code segment seems incomplete

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

```

**You wrote:**

> [@Floralvxins](#):
>
> sadly I don’t think i can provide my data file to run the code.

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

**Arrays**

This section

```auto
    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

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

```

**Here is an example**

```auto
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]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Floralvxins](https://avatars.discourse-cdn.com/v4/letter/f/6de8d8/32.png) [@Floralvxins](https://discourse.processing.org/u/Floralvxins)\
**Post date:** [February 26, 2019, 11:06pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/3 "2019-02-26T23:06:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2019, 11:18pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/4 "2019-02-26T23:18:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Floralvxins](https://avatars.discourse-cdn.com/v4/letter/f/6de8d8/32.png) [@Floralvxins](https://discourse.processing.org/u/Floralvxins)\
**Post date:** [February 26, 2019, 11:55pm UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/5 "2019-02-26T23:55:27Z")

</div>

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

> [@Chrisir](#):
>
> int c1 = { 130, 100, 70, 60

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 27, 2019, 8:38am UTC](https://discourse.processing.org/t/where-to-place-certain-values-in-a-chart-code/8749/6 "2019-02-27T08:38:53Z")

</div>

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

That’s right. The function

```auto
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 😉

**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