I tried making this stack column chart interactive by making the values of the columns appear at the up left corner with pressing the mouse over the column, but it is only appearing the first row of data

Processing Coding Questions
1

Hello there!

So, this is the code:

// Import the CSV file
Table data;

void setup() {
  size(850, 600);  // Increase the width to 850
  background(255);
  data = loadTable("data.csv", "header");
  
  // Find the maximum number of students
  int maxStudents = 0;
  for (int i = 0; i < data.getRowCount(); i++) {
    int students = data.getInt(i, "students");
    if (students > maxStudents) {
      maxStudents = students;
    }
  }
  
  // Set the y axis range
  int yMin = 0;
  int yMax = maxStudents + 1000;
  int yStep = 2000;
  
  // Set the x axis range
  int xMin = 2011;
  int xMax = 2022;
  int xStep = 1;
  
  // Draw the x and y axis
  drawAxis(xMin, xMax, xStep, yMin, yMax, yStep, 30, 30);
  
  // 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 - 60);
    float womenHeight = map(women, yMin, yMax, 0, height - 60);
    
    // Draw the stacks
    fill(0, 0, 255);
    rect(map(year, xMin, xMax, 30, width - 80), height - 30 - menHeight, (width - 110)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
    fill(255, 0, 0);
    rect(map(year, xMin, xMax, 30, width - 80), height - 30 - menHeight - womenHeight, (width - 110)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
  }
}

void drawAxis(int xMin, int xMax, int xStep, int yMin, int yMax, int yStep, int paddingX, int paddingY) {
  // Draw the x axis
  stroke(0);
  line(paddingX, height - paddingY, width - paddingX - 50, height - paddingY);  // Decrease the length of the x axis to make room for the right padding
  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
    line(xPos, height - paddingY, xPos, height - paddingY + 5);
    text(x, xPos, height - paddingY + 20);
  }
  // Draw the y axis
  stroke(0);
  line(paddingX, paddingY, paddingX, height - paddingY);
  for (int y = yMin; y <= yMax; y += yStep) {
    float yPos = map(y, yMin, yMax, height - paddingY, paddingY);
    line(paddingX - 5, yPos, paddingX, yPos);
    text(y, paddingX - 30, yPos);
  }
}

// Display a tool tip with the data for the column under the mouse
void mouseMoved() {
  // Find the column under the mouse
  int column = -1;
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    float xPos = map(year, 2011, 2022, 30, width - 80);  // Decrease the range of the x axis to make room for the right padding
    if (mouseX > xPos && mouseX < xPos + (width - 110)/12) {  // Decrease the width of the columns to make room for the right padding
      column = i;
      break;
    }
  }
  
  // Display the tool tip
  if (column != -1) {
    int year = data.getInt(column, "year");
    int students = data.getInt(column, "students");
    int men = data.getInt(column, "men");
    int women = data.getInt(column, "women");
    
    // Clear the background
    fill(255);
    noStroke();
    rect(0, 0, 200, 50);
    
    // Draw the tool tip
    fill(0);
    text("Year: " + year, 10, 20);
    text("Students: " + students, 10, 40);
    text("Men: " + men, 110, 20);
    text("Women: " + women, 110, 40);
  }
}

and this is the csv data table 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

My problem is already explained in the question. I have the latest version of processing in case that helps, 4.1.1.

2 Likes
2
1 Like
3

Not trying to sound ungrateful but what exactly do you want me to do? I was thinking that my problem lies in the mouseMoved function and not the lack of not having a draw function.

4

Yeah, without draw() mousePressed won’t work because you don’t have a loop in your Sketch

:grinning:

2 Likes
5 
void draw(){
  loop();
}
6

It should work with an empty draw(); don’t need the loop(); draw() {}is a loop all by itself.

If you want to see the axis labels, add

fill(0);
textSize(12);

right before you draw the x axis label in the drawAxis() function, ie before text(x, xPos, height - paddingY + 20);

It’s nice code and demonstrates that graphics can be created outside of Processing’s draw() loop.

2 Likes
7

Adding the axis labels is another question that I had. Thank you very much!