Skip to main content
User Experience

Return to Answer

added 172 characters in body
Source Link
410 gone
410 gone
  • 379
  • 2
  • 15

Following on from Christian's comment, I had a look at the Superfund ring-chart. 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, I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

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 of the Jquery multislider widget: (screenshot to follow shortly)

enter image description here

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.

Following on from Christian's comment, I had a look at the Superfund ring-chart. 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, I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

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 of the Jquery multislider widget: (screenshot to follow shortly)

Following on from Christian's comment, I had a look at the Superfund ring-chart. 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, I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

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 of the Jquery multislider widget:

enter image description here

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.

added 101 characters in body
Source Link
410 gone
410 gone
  • 379
  • 2
  • 15

Following on from Christian's comment, I had a look at the Superfund ring-chart. Below you can see it in action. 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. There's also a popup that appears next to the sector

Using Raphael JS, where you can click to delete the sector entirely. AndI produced something with similar behaviour, and with linked input text boxes, to the left of the ring-chart (and not shown in the images below) is a list of extra categories that you can addgive two ways to enter the ring chart. The linked ring-chart is done in Flash.data:

But I guesshaven't been wildly happy about it could be done with Canvas and Javascript too. There may already be a library out there for: it wasn't really that intuitive.

enter image description here

enter image description here So I'm now working on a redesign using a modified version of the Jquery multislider widget: (screenshot to follow shortly)

Following on from Christian's comment, I had a look at the Superfund ring-chart. Below you can see it in action. 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. There's also a popup that appears next to the sector, where you can click to delete the sector entirely. And to the left of the ring-chart (and not shown in the images below) is a list of extra categories that you can add to the ring chart. The linked ring-chart is done in Flash. I guess it could be done with Canvas and Javascript too. There may already be a library out there for it.

enter image description here

enter image description here

Following on from Christian's comment, I had a look at the Superfund ring-chart. 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, I produced something with similar behaviour, and with linked input text boxes, to give two ways to enter the data:

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 of the Jquery multislider widget: (screenshot to follow shortly)

Source Link
410 gone
410 gone
  • 379
  • 2
  • 15

Following on from Christian's comment, I had a look at the Superfund ring-chart. Below you can see it in action. 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. There's also a popup that appears next to the sector, where you can click to delete the sector entirely. And to the left of the ring-chart (and not shown in the images below) is a list of extra categories that you can add to the ring chart. The linked ring-chart is done in Flash. I guess it could be done with Canvas and Javascript too. There may already be a library out there for it.

enter image description here

enter image description here