Trick - Dynamic Bar Graph

#1 · January 24, 2020, 7:00 am

I found an older project and thought it might be useful. I added some notes to it today to help make sense of it. Its not complicated but its my hope that it may be of help to someone someday maybe.

The graph is only partially dynamic. It is dynamic in the way it represent the data. The numbers can be anything and they will be represented in the graph as a percentage. But in this project there are only 8 bars. So it represents 8 dynamic numbers. The graph does not dynamically make more bars however. But you can see the code and add or remove bars to meet your own needs.

I added an animation to the bars to give it a "growing" effect.

The height of the container doesn't matter, the code will calculate its height and fit the bars into it. It does not adjust the width. I may extrapolate the code to calculate the width and auto fit the bars into the container width accordingly... maybe one day.

Hope someone finds this useful

Uploaded files:

You need to login to have access to uploads.

luishp, Vadim and 4 other users have reacted to this post.

#2 · January 24, 2020, 2:58 pm

I added some numbers to the bars that display just under the top of each bar. Occasionally you get a number so small that the bar is too low for the number to be visible. I added an argument to handle that situation and put the number above the bar when tht happens so numbers will always be visible.

I also added a button to generate random numbers so you don't have to type them in to test it out.

Here is the updated .pub file

Uploaded files:

You need to login to have access to uploads.

luishp, Vadim and 3 other users have reacted to this post.

Trick - Dynamic Bar Graph - Forum

Trick - Dynamic Bar Graph