I need to represent allocation of 100% of some resource between 3 owners in GUI - any recommendations?

Question

For 2 owners the answer is easy - use a slider with one owner on the left, the other on the right, and slide to control the percentage of each.

How do I do it with 3 or more owners?

Specifically I'm talking about JAVA Swing-based GUI, but am mainly looking for the design idea.

Thanks!

Answer 1

How about you have three sliders, each from 0% to 100%.
Increasing any one slider by X% decreases the other two by X/2%.
You could have a radio button for each slider as well, of which only zero or one can be selected at a time. If the radio button for a given slider is selected, that slider is locked and increasing one of the other sliders by X% reduces the remaining slider by X%.

Kinda clumsy.

You could also have a pie chart with three slices and you can just drag the divider lines around.

Answer 2

How about a pie chart where you have one segment per owner and the user can directly manipulate (drag with the mouse) the boundaries between segments or select a segment and type its percentage.

Alternatively you could extend the slider to have more nobs on it, so for splitting between 3 people it'd look like this:

|-------O-----O-----------|

Answer 3

It sounds as though you need to create a new Component to effectively enable this functionality.

One possible solution would be sub-classing JSlider and allowing multiple "thumbs" (I think that's the correct term) that you can't slide past each other. In this simple diagram the "-" represents units of the track and the "|" represents a thumb on the slider:

--------|--------|--------

Here each of the three user's has an equal allocation of the resource.

Rather than have a thumb represent the value for a user, it would represent the upper or lower limit of that user's allocation and the distance between two thumbs (or one thumb and the end of the track) would be representational of the user's allocation. You can support any number of users by simply adding additional thumbs.

Answer 4

Perhaps the easiest to implement would be this:

• 3 sliders, one for each owner.
• Each owner gets assigned their_slider_value / total_of_all_slider_values.

Some examples:

If A is set to 0, B is set to 1/2 and C is set to full, A gets 0%, B gets 33.3% and C gets 66.6%

   A = A_slider / (A_slider + B_slider + C_slider) 
     = 0        / (0        + 1/2      + 1)        = 0   =  0.0%
   B = B_slider / (A_slider + B_slider + C_slider) 
     = (1/2)    / (0        + 1/2      + 1)        = 1/3 = 33.3% 
   C = C_slider / (A_slider + B_slider + C_slider) = 
       (1)      / (0        + 1/2      + 1)        = 2/3 = 66.6%

If A, B, and C are all set at max value (or to the min value), they each get 1/3

Advantages:

• It should be intuitive (the relative values are the same; if A_slider is twice as full as B_slider, it gets twice an many resources)
• You can use existing controls (i.e. it doesn't invent new controls)
• It's easy to represent 0% (you don't have to worry about sliders overlapping)
• It is easy to extend to 4 or 5 or an many owners as you need.

Disadvantages:

• There are many ways to represent the same allocation

If you wanted to put in a little more effort, you could accompany the sliders with text (percentages) or a graphical representation (not something the user could manipulate) of the actual allocations that the sliders represented (either a bar filled in with the allocations, or a pie chart, etc)

Answer 5

To separate the display and input, what about spin controls that update, say, a pie chart? Each spin control movement up or down is 2, the other two controls then go down or up 1.

Answer 6

Create a triangle control, where you can move a single point around. If it's in one of the corners it means 100% to that corner. If it's in the middle it means 33% to each.