Following on from Christian's comment, I had a look at the [Superfund ring-chart][1]. Each segment goes live when the mouse hovers over or near it. By clicking and dragging the mouse up or down, the value of that sector increases or decreases respectively.

Using [Raphael JS][2], I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

<a href="https://i.sstatic.net/zuPrr.png" title="click to supersize the doughtnut"><img src="https://i.sstatic.net/zuPrr.png" width="250"></a>

But I haven't been wildly happy about it: it wasn't really that intuitive.

So I'm now working on a redesign using a [modified version][3] of the [Jquery multislider widget][4]:

![enter image description here][5]

Values can be changed by dragging the separator bars, by entering numbers in the text boxes, or by pressing up and down when the cursor is in one of the text boxes.


  [1]: http://www.superfund.com/tools/PortfolioTable/index-de-AT.html
  [2]: http://raphaeljs.com/
  [3]: https://github.com/energynumbers/multislider
  [4]: https://github.com/elussich/multislider
  [5]: https://i.sstatic.net/uQ6co.png