# A question about coding (bar chart race)
**URL:** https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319
**Category:** Coding Questions
**Created:** [October 4, 2020, 12:47am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319 "2020-10-04T00:47:49Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 12:47am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/1 "2020-10-04T00:47:49Z")
So I’m new to Processing 3, and would love to know how to make a bar chart race similar to this one: [https://www.youtube.com/watch?v=ZkcaANwCrMQ](https://www.youtube.com/watch?v=ZkcaANwCrMQ)
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [October 4, 2020, 3:42am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/2 "2020-10-04T03:42:07Z")
hey, welcome to this forum !
that is a bit of an all-encompassing question… do you have experience with writing code ?
the most basic thing to do imho is to draw a rect() and use a variable to change its width.
next step would be to use a FloatList or IntList, if you have a timeline where that value changes and use that.
pseudo:
```auto
float barLength;
//in draw()
recht(0,0,barLength,15);
```
```auto
FloatList lengthValue= new FloatList (0,2.2,13,24.7,32,56.1,66);
int count = 0;
//in draw()
recht(0,0, lengthValue.get(count),15);
count++;
```
that’s a bit oversimplified, you need to make sure that you don’t exceed the numbers of items in the list when count gets too big.
but that is just a really most basic pattern to show what I mean.
if you have one bar, then you can - of course - draw more, either working with arrays or lists. finally it would be probably worth having a class 🙂
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 4:28am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/3 "2020-10-04T04:28:27Z")
I used the code, but it says “The local variable barLength may not have been initialized”
---
### Author:  [@Hyperion65](https://discourse.processing.org/u/Hyperion65)
#### Post date: [October 4, 2020, 5:00am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/4 "2020-10-04T05:00:19Z")
haha yes, you need to do it more “processing” style 🙂
int x; “declares” a variable -\> it tells processing: “hey, I exist”
x = 0; initializes it - at. some point you need to tell what’s inside x
then you can access that value in your code.
if you’re lazy you can do the first two steps at once:
int x = 0; // outside of setup() or draw()
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 4, 2020, 11:41am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/5 "2020-10-04T11:41:56Z")
You need data foremost
Like a list of days and for every day who got how many votes or whatever
So the graph can change over time
Do you have a csv file like this?
Then please post it. It’s more about reading and showing the file content
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 3:20pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/6 "2020-10-04T15:20:30Z")
 This is my code.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 4, 2020, 3:30pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/7 "2020-10-04T15:30:53Z")
Look at the hello mouse section here
See [https://processing.org/tutorials/overview/](https://processing.org/tutorials/overview/)
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 3:35pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/8 "2020-10-04T15:35:56Z")
it says “count cannot be resolved to variable”
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 4, 2020, 3:37pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/9 "2020-10-04T15:37:00Z")
`int count = 0;` must be before `setup()` to make count a global variable, known everywhere
Please understand what setup() and draw() are
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 3:46pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/10 "2020-10-04T15:46:30Z")
It still doesn’t work.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 4, 2020, 3:52pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/11 "2020-10-04T15:52:42Z")
Yes. Please post your entire code.
And also tell us what exactly doesn’t work
By the way that’s not as easy as you think.
Do you have data that you want to show in the animation?
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 4, 2020, 3:58pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/12 "2020-10-04T15:58:36Z")
int count = 0;
setup();
rect(30, 20, 55, 55, 7);
float barLength;
rect(0,0,barLength,15);
FloatList lengthValue= new FloatList (0,2.2,13,24.7,32,56.1,66);
rect(0,0, lengthValue.get(count),15);
count++;
There’s no data I want to show.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 4, 2020, 4:02pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/13 "2020-10-04T16:02:43Z")
The code is not correct.
You are attempting something difficult too early.
Please go back to the tutorial I mentioned above (with the Hello mouse section) and check out the examples for the mouse there.
Then go to the examples section on the website and check out the examples in the section “Motion”.
Then come back here and get more help.
Thank you!
Warmest Regards,
Chrisir
P.S.
You must be able to work with `setup()` and `draw()` and {…}
Can you please explain what you want to achieve in your animation?
The bars changing length or also move up and down?
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 4, 2020, 5:38pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/15 "2020-10-04T17:38:46Z")
> [@DubTheGamer](#):
>
> I’m new to Processing 3
There is a learning curve to all of this.
A short list of resources to peruse:
> **Resources \< Click here to expand !**
>
> Explore the resources available here:
>
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.
> [https://processing.org/](https://processing.org/)
>
> - The Processing PDE (IDE) has lots to offer!
> An exploration of the menu bar will reveal what is available there;
> libraries, tools, local examples, and other goodies are in there.
>
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman
> [https://shiffman.net/](https://shiffman.net/)
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
>
> - Happy Coding
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
>
> - The source code can give insight if you are adventurous:
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
>
> - Explore Processing on GitHub:
> [Processing Foundation · GitHub](https://github.com/processing)
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
>
> - The Processing Foundation
> [https://processingfoundation.org/](https://processingfoundation.org/)
> Check out the menu.
> In the education menu, there is a reference to the Coding Train.
>
> - And the Internet. `:)`
`:)`
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 6, 2020, 9:48am UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/16 "2020-10-06T09:48:47Z")
See also [How to do this video?](https://discourse.processing.org/t/how-to-do-this-video/17019/40)
---
### Author:  [@DubTheGamer](https://discourse.processing.org/u/DubTheGamer)
#### Post date: [October 6, 2020, 7:06pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/17 "2020-10-06T19:06:46Z")
> [@Chrisir](#):
>
> Can you please explain what you want to achieve in your animation?
>
> The bars changing length or also move up and down?
I would like to make them change length.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 6, 2020, 7:28pm UTC](https://discourse.processing.org/t/a-question-about-coding-bar-chart-race/24319/18 "2020-10-06T19:28:16Z")
I talked about that you should look at the examples in the mouse section.
Can you please show your attempt now?