XForms/Pie Chart

Motivation
You want to use range controls to interactively change a drawing such as a pie chart. In this case we use a JavaScript library that modifies an SVG image. The data for the pie chart is kept in an instance in the model.

Link to Working XForms Application
XForms Example of Dynamic Labels

Discussion
This example a nice clean way to interactively change a value just using the mouse. No keyboard required. Here is the sample for the first range control:

This is an example of how an instance document can be used as the interface to an external component in a form. You just have to put the data in the instance and tell the application to get the data.

Credits
This example was originally inspired by the 1040 tax form example on the Mozilla web site. The JavaScript for drawing the pie chart was taken from that example.