# 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
**URL:** https://discourse.processing.org/t/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/40480
**Category:** Coding Questions
**Created:** [January 6, 2023, 3:12am UTC](https://discourse.processing.org/t/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/40480 "2023-01-06T03:12:10Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@sabisiiuuu](https://discourse.processing.org/u/sabisiiuuu)
#### Post date: [January 6, 2023, 3:12am UTC](https://discourse.processing.org/t/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/40480/1 "2023-01-06T03:12:10Z")
Hello there!
So, this is the code:
```auto
// 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:
```auto
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.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 6, 2023, 3:19am UTC](https://discourse.processing.org/t/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/40480/2 "2023-01-06T03:19:18Z")
> **[draw() / Reference](https://processing.org/reference/draw_.html)**
>
> Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw()…
---
### Author:  [@sabisiiuuu](https://discourse.processing.org/u/sabisiiuuu)
#### Post date: [January 6, 2023, 1:25pm UTC](https://discourse.processing.org/t/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/40480/3 "2023-01-06T13:25:18Z")
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.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 6, 2023, 1:30pm UTC](https://discourse.processing.org/t/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/40480/4 "2023-01-06T13:30:29Z")
Yeah, without draw() mousePressed won’t work because you don’t have a loop in your Sketch
😀
---
### Author:  [@sabisiiuuu](https://discourse.processing.org/u/sabisiiuuu)
#### Post date: [January 6, 2023, 1:54pm UTC](https://discourse.processing.org/t/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/40480/5 "2023-01-06T13:54:17Z")
```auto
void draw(){
loop();
}
```
---
### Author:  [@svan](https://discourse.processing.org/u/svan)
#### Post date: [January 6, 2023, 3:09pm UTC](https://discourse.processing.org/t/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/40480/6 "2023-01-06T15:09:20Z")
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
```auto
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.
---
### Author:  [@sabisiiuuu](https://discourse.processing.org/u/sabisiiuuu)
#### Post date: [January 7, 2023, 5:53pm UTC](https://discourse.processing.org/t/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/40480/7 "2023-01-07T17:53:31Z")
Adding the axis labels is another question that I had. Thank you very much!