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.

Screen Image

XForms Pie Chart (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Link to Working XForms Application

XForms Example of Dynamic Labels

Sample Program

xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude">;

rel="stylesheet" href="pie-chart.css" type="text/css" />
Pie Chart with XForms Range Controls
type="text/javascript" src="pie-chart.js" />
id="theModel">
id="theData">
xmlns="">

120
120
120
0.00

nodeset="/charts/piechart/wedge01" type="xsd:decimal" />
nodeset="/charts/piechart/wedge02" type="xsd:decimal" />
nodeset="/charts/piechart/wedge03" type="xsd:decimal" />
nodeset="/charts/piechart/wedge04" type="xsd:decimal" />
nodeset="/charts/piechart/wedge04" calculate="/charts/piechart/wedge01 + /charts/piechart/wedge02 + /charts/piechart/wedge03" />

onload="showChart('chart')">
Pie Chart with XForms Range Controls
id="chart">

/>
ref="/charts/piechart/wedge01" id="s2l1" start="0" end="360" incremental="true">
Red:
ev:event="xforms-value-changed">
resource="javascript:updateChart('chart')" />

ref="/charts/piechart/wedge02" start="0" end="360" incremental="true">
Orange:
ev:event="xforms-value-changed">
resource="javascript:updateChart('chart')" />

ref="/charts/piechart/wedge03" start="0" end="360" incremental="true">
Yellow:
ev:event="xforms-value-changed">
resource="javascript:updateChart('chart')" />

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:

ref="/charts/piechart/wedge01" start="0" end="360" incremental="true">
Red:
ev:event="xforms-value-changed">
resource="javascript:updateChart('chart')" />

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.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.