# Bar chart - Display data when hovering
**URL:** https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571
**Category:** Coding Questions
**Tags:** homework
**Created:** [June 16, 2022, 9:24am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571 "2022-06-16T09:24:54Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [June 16, 2022, 9:24am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/1 "2022-06-16T09:24:54Z")
Hi all,
I’m trying to represent a very basic 1-column table as a bar chart. The .csv file reads as follows:
* * *
Value
50
100
150
200
250
300
350
400
450
500
* * *
My problem is I can’t manage to display each value on top of the bar when hovering over it. All values display at once and can’t figure out the algorithm for mouseX,Y. Below the code:
```auto
Bar[] bars;
//the data from the table will fill the array
Table table;
void setup() {
size(500,500,P2D);
loadData();
}
void draw() {
background(255);
//display all bars
for(int i = 0; i < bars.length; i++) {
bars[i].display();
bars[i].rollover();
}
}
void loadData() {
//load file into table; header indicates the file has a non-data 1st row
table = loadTable("data.csv", "header");
//the size of the array is determined by the number of rows in the table
bars = new Bar[table.getRowCount()];
for(int i = 0; i < table.getRowCount(); i++) {
TableRow row = table.getRow(i); //iterate over all the table rows
//access the fields via their table names
float Val = row.getInt("Value");
//make a rectangle out of the data from each row
float x = 50*i;
bars[i] = new Bar(x,Val);
}
}
class Bar {
float x;
float Val;
//by default the mouse is not over the bar
boolean inside = false;
//Create the bar
Bar(float tempX, float tempVal) {
x = tempX;
Val = tempVal;
}
//Checking if mouse is within the bar
void rollover() {
for(int i = 0; i < table.getRowCount(); i++) {
if(mouseX > x && mouseX < x+50 && mouseY > height - table.getInt(i,0)) {
inside = true;
} else {
inside = false;
}
}
}
//Display the bar
void display() {
stroke(255);
fill(0);
for(int i = 0; i < table.getRowCount(); i++) {
rect(50*i,height,50,-table.getInt(i,0));
}
if(inside) {
fill(255,0,0);
textSize(10);
textAlign(CENTER);
for(int i = 0; i < table.getRowCount(); i++) {
text(int(table.getInt(i,0)),25+50*i,height/2);
}
}
}
}
```
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 16, 2022, 10:03am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/2 "2022-06-16T10:03:41Z")
> Deleted … as full solutions for category homework not welcome.
---
### Author:  [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [June 16, 2022, 11:35am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/3 "2022-06-16T11:35:28Z")
Thanks @mnse! That was espectacular, and much simpler than my solution. 🕶👍
Now I’m trying to extrapolate the same code by loading a different table in which I’m only using the 3rd column (Data\_value) as the bar heights (divided by 1000 to fit in 500x500px):
The problem I’m finding when rendering is that some column widths look weird. Suspect that might be because of floating numbers? but I’ve tried to convert column width to integer to no avail.
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 16, 2022, 11:39am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/4 "2022-06-16T11:39:05Z")
How many rows are in the new table ?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 16, 2022, 11:54am UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/5 "2022-06-16T11:54:55Z")
Can you please show your code
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 16, 2022, 12:01pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/6 "2022-06-16T12:01:09Z")
It looks like you are still using your constant 50px width and not, what i showed you regarding bar width…
Means, do you still use this ?
```auto
rect(..,50,...)
```
Also if more than 500 rows it might also messing up as width gets \< 1 …
Cheers
— mnse
---
### Author:  [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [June 16, 2022, 12:15pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/8 "2022-06-16T12:15:26Z")
@Chrisir… the new table contains 44 rows.
@mnse
Here’s the new code:
```auto
Bar[] bars;
//the data from the table will fill the array
Table table;
void setup() {
size(500,500,P2D);
textSize(15);
textAlign(CENTER);
loadData();
}
void draw() {
background(255);
//display all rectangles
for(int i = 0; i < bars.length; i++) {
bars[i].display();
bars[i].rollover();
}
}
void loadData() {
//load file into table; header indicates the file has a non-data 1st row
table = loadTable("business-employment-data-mar-2022-quarter-AFF.csv", "header");
//the size of the array is determined by the number of rows in the table
bars = new Bar[table.getRowCount()];
for(int i = 0; i < table.getRowCount(); i++) {
//defining bar width
float w = width/table.getRowCount();
//make a rectangle out of the data from each row
bars[i] = new Bar(w*i,w,table.getRow(i).getFloat("Data_value")/1000);
}
}
class Bar {
float x;
float w;
float Val;
boolean inside; //determine if the mouse is within the bar
//Create the bar
Bar(float tempX, float tempW, float tempVal) {
x = tempX;
w = tempW;
Val = tempVal;
inside = false; //by default the mouse is not within the bar
}
//Checking if mouse if over the bar
void rollover() {
if(mouseX > x && mouseX < x+w && mouseY > height - Val) {
inside = true;
} else {
inside = false;
}
}
//Display the bar
void display() {
stroke(255);
fill(0);
rect(x,height-Val,x+w,Val);
if(inside) {
fill(255,0,0);
text(int(Val*1000),x+w/2,height-Val-10);
}
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 16, 2022, 12:37pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/9 "2022-06-16T12:37:44Z")
Thanks
In display ()
x+w is wrong
Just w
---
### Author:  [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [June 16, 2022, 12:43pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/10 "2022-06-16T12:43:05Z")
Thanks a lot @Chrisir!!!
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 16, 2022, 12:44pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/11 "2022-06-16T12:44:11Z")
sorry!
before my previous posting I’d removed to much 🙂
just put in setup…
> Correction added to the [here](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/2)
`rectMode(CORNERS);`
so this from my code would be correct
```auto
rect(x, height-Val, x+w, height);
```
Cheers
— mnse
PS: But @Chrisir would also work 😉
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 16, 2022, 12:47pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/12 "2022-06-16T12:47:03Z")
Really…?
I don’t know
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 16, 2022, 12:49pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/13 "2022-06-16T12:49:17Z")
Should work …
> **rectMode(CORNERS)** interprets the first two parameters of **rect()** as the location of one corner, and the third and fourth parameters as the location of the opposite corner.
---
### Author:  [@Erif](https://discourse.processing.org/u/Erif)
#### Post date: [June 16, 2022, 1:31pm UTC](https://discourse.processing.org/t/bar-chart-display-data-when-hovering/37571/14 "2022-06-16T13:31:55Z")
It works as well, yeah thanks both @Chrisir and @mnse!