# Want columns to get thinner, but they get on top of each other

Hello there!

So, I want the columns to get thinner if I add more rows to the table data, and also to preserve a distance between themselves of 10 units, but my columns get on top of each other if I add more than 12 rows of data

Right now, less than 12 rows is perfect for what I have, but more than that I’d like them to do what I described above.

Here is the code I am working on:

``````// Import the CSV file
Table data;

void setup() {
size(850, 600);
background(255);
println(data.getRowCount());
// Set the y axis range
int lastNrofStd = data.getInt(data.getRowCount()-1, "students");
int yMin = 0;
int yMax = lastNrofStd + 4000;
int yStep = 2000;

// Set the x axis range
int firstYear = data.getInt(0, "year");
int lastYear = data.getInt(data.getRowCount()-1, "year");
int xMin = firstYear;
int xMax = lastYear;
int xStep = 1;

// Draw the x and y axis
drawAxis(xMin, xMax, xStep, yMin, yMax, yStep, 50, 50);

// Draw the stacked columns
for (int i = 0; i < data.getRowCount(); i++) {
int year = data.getInt(i, "year");
//int students = data.getInt(i, "students");
int men = data.getInt(i, "men");
int women = data.getInt(i, "women");

// Calculate the heights of the stacks
float menHeight = map(men, yMin, yMax, 0, height - 100);
float womenHeight = map(women, yMin, yMax, 0, height - 100);

// Draw the stacks
fill(0, 0, 255);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
fill(255, 0, 0);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding

}
}

void draw(){
}

void drawAxis(int xMin, int xMax, int xStep, int yMin, int yMax, int yStep, int paddingX, int paddingY) {

// Draw the x axis
stroke(0);
for (int x = xMin; x <= xMax; x += xStep) {
float xPos = map(x, xMin, xMax, paddingX, width - paddingX - 50);  // Decrease the range of the x axis to make room for the right padding
fill(0);
textSize(12);
text(x, xPos + 20, height - paddingY + 20);
}

// Draw the y axis
stroke(0);
for (int y = yMin; y <= yMax; y += yStep) {
if (y>=10000) {
text(y, paddingX - 40, yPos + 4);
} else {
text(y, paddingX - 35, yPos + 4);
}
}
}
``````

And here the csv data that I am using

``````year,students,men,women
2011,11147,5225,5922
2012,12158,5516,6642
2013,13241,5931,7310
2014,14316,6256,8060
2015,15083,6364,8719
2016,16088,6725,9363
2017,16740,6995,9745
2018,17695,7247,10448
2019,18351,7528,10823
2020,18469,7527,10942
2021,18019,7392,10627
2022,17372,7243,10129
``````

Till there, all good, but if I add for example:

``````2023,17372,7243,10129
2024,17372,7243,10129
2025,17372,7243,10129
``````

It doesn’t look as good anymore

I know I have to use an if-else (and maybe a for-loop too) but I’m not sure how to procede.

``````    if (data.getRowCount() < 12) {
fill(0, 0, 255);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
fill(255, 0, 0);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
} else {
fill(0, 0, 255);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
fill(255, 0, 0);
rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
}
``````

`````` menHeight, (width - 180)/12,
``````

you can use

`data.getRowCount()`

like here:

``````    // Draw the stacks
fill(0, 0, 255);
rect(map(year, xMin, xMax, 59, width - 100), height - 50 - menHeight, (width - 180)/data.getRowCount(), menHeight);  // Decrease the width of the columns to make room for the right padding
fill(255, 0, 0);
rect(map(year, xMin, xMax, 59, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/data.getRowCount(), womenHeight);  // Decrease the width of the columns to make room for the right padding
``````
1 Like

The solution to all my life problems was just too easy to solve… Too bad this isn’t Reddit, otherwise I would habe already given you gold.

2 Likes