JavaScript Bargraph With Auto Balance
Project ID: 1327650729
Project Details
- Status: Closed (Chosen Programmer: greatmogul; Paid + bonus; Rated 10 out of 10)
- Posted: 1/27/2012 at 2:52 EST
- Closed: 1/27/2012 at 17:23 EST
- Project Creator:
- Budget: N/A
- Description: I need a script written in JavaScript that creates an adjustable bar graph. The user should be able to change the size of each of the bars by clicking the top of the bar and dragging it to the desired height. The bar should move smoothly as the user is dragging it.
Below each bar, there should be an INPUT field that shows the current percentage of that bar. A bar that is dragged all the way to the top would show 100 and one that is dragged to the bottom would show 0. The field should adjust automatically each time the user resizes the bar.
The attached image graph1.jpg is an example of what the script should look like.
There should be an "Auto Balance" feature that can be toggled on and off using a radio button at the top of the graph. When "Auto Balance" is turned on, the script should ensure that the bars total 100%. So, if one of the bars is increased by the user then the other bars should be decreased equally.
The image graph2.jpg shows the user increasing the first bar from 40% to 50%. As a result, the other three bars have been decreased evenly so that the total is still 100%.
Keep in mind that sometimes the change cannot be evenly distributed, so an extra value will need to be added or subtracted from one of the bars. In the graph2.jpg example, 10 points total had to be subtracted from the remaining 3 bars, so it removed 3 points from the black and green bars, and removed 4 points from the orange bar. It does not matter which bar the extra point is added or subtracted from, as long as all of the bars are always equal to 100%.
The image graph3.jpg shows the user increasing the first bar by another 30 points. In this example, 30 points total need to be subtracted from the remaining bars so that everything still equals 100%. However, the second bar didn't have enough points to subtract so it was set to 0. The remaining balance was then distributed to the last two bars. When automatically balancing the bars, no single bar should be less than 0 or greater than 100.
The script should receive the data input as arrays, and support between 2 and 10 bars. Each array should contain the hex color of the bar, and the starting value.
The input to create the graph in graph1.jpg would be:
input_data = new Array(
new Array('#3F6AAF', '40'),
new Array('#000000', '10'),
new Array('#409C2D', '20'),
new Array('#9A6600', '30')
)
I will need to have exclusive ownership and copyright of the code created for this project. - Attached Files:
- Tags:
| Project Bids |
| Programmer | Bid |
Delivery Time | Time of Bid | Rating | |
| players90 | $10 | Immediately | 1/27/2012 at 3:37 EST | (No Feedback Yet) | |
| We need to discuss further so that we could start the project as soon as possible. Waiting for your chat invitation and further communication on project requirements. Thanks and regards. | |||||
| abhijeet11 |
$40 | 6 hours | 1/27/2012 at 5:13 EST | (1 review) |
|
| Check pmb | |||||
| esolo2 | $40 | 2 days | 1/27/2012 at 8:48 EST | (No Feedback Yet) | |
| Hi,iam interested in this job... | |||||
| mamun0002 |
$48 | 1 day | 1/27/2012 at 3:25 EST | (66 reviews) |
|
| Hi, I am highly interested and ready to start now. Thanks | |||||
| greatmogul |
$55 | 1 day | 1/27/2012 at 2:59 EST | (208 reviews) |
|
| Sir, I can create this script for you. It will be dependable on jQuery fot user interface interactions. Best regards. | |||||






