XForms/Venn Diagram
< XForms
Motivation
[edit | edit source]You want to interactively change Venn Diagram parameters.
Method
[edit | edit source]Use XForms range controls to change values in a form. Use the bind to concatenate input parameters. Use the incremental attribute to allow the user to see the changes as the range controls change. Sending a submit will alter the Venn Diagram REST parameters.
Screen Image of User Interface
[edit | edit source]
Output of Call to Google Charts
[edit | edit source]
Link to Executable Example
[edit | edit source]Program Code
[edit | edit source]<html 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:xs="http://www.w3.org/2001/XMLSchema"> <head> <title>Google Venn Diagram</title> <style type="text/css"> @namespace xf url("http://www.w3.org/2002/xforms"); body {font-family: Helvetica, sans-serif} /* This line ensures all the separate input controls appear on their own lines */ xf|input, xf|range, xf|output {display:block; margin:5px 0;} /* this puts the labels in120px columns and right aligns them */ xf|input > xf|label, xf|range > xf|label, xf|output > xf|label {text-align:right; padding-right:10px; width:120px; float:left; text-align:right;} .xf-value {width: 150px} </style> <xf:model> <xf:instance id="chart-params" xmlns=""> <data> <cht>v</cht> <chs>400x400</chs> <chd/> <chdl/> </data> </xf:instance> <!-- temp variables that are concated together to create the parameter --> <xf:instance xmlns="" id="tmp"> <data> <sa>15</sa> <sb>20</sb> <sc>25</sc> <ab>10</ab> <ac>12</ac> <bc>15</bc> <abc>5</abc> <la>A</la> <lb>B</lb> <lc>C</lc> </data> </xf:instance> <xf:bind nodeset="instance('tmp')/sa" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/sb" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/sc" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/ab" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/ac" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/bc" type="xs:integer"/> <xf:bind nodeset="instance('tmp')/abc" type="xs:integer"/> <xf:bind nodeset="instance('chart-params')/chd" calculate="concat( 't:', instance('tmp')/sa, ',', instance('tmp')/sb, ',', instance('tmp')/sc, ',', instance('tmp')/ab, ',', instance('tmp')/ab, ',', instance('tmp')/bc, ',', instance('tmp')/abc )"/> <xf:bind nodeset="instance('chart-params')/chdl" calculate="concat( instance('tmp')/la, '|', instance('tmp')/lb,'|', instance('tmp')/lc )"/> <xf:submission id="get-chart" action="http://chart.apis.google.com/chart" method="get" separator="&" ref="instance('chart-params')" replace="all"/> <!-- put the cursor in the first field when the form becomes ready --> <xf:action ev:event="xforms-ready"> <xf:setfocus control="field-1"/> </xf:action> </xf:model> </head> <body> <h3>Google Venn Diagram Demo</h3> <xf:range ref="instance('tmp')/sa" start="2" end="30" step="1" incremental="true"> <xf:label>Size A: </xf:label> </xf:range> <xf:range ref="instance('tmp')/sb" start="2" end="30" incremental="true"> <xf:label>Size B: </xf:label> </xf:range> <xf:range ref="instance('tmp')/sc" start="2" end="30" incremental="true"> <xf:label>Size C: </xf:label> </xf:range> <xf:range ref="instance('tmp')/ab" start="0" end="20" incremental="true"> <xf:label>AB Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/ac" start="0" end="20" incremental="true"> <xf:label>AC Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/bc" start="0" end="20" incremental="true"> <xf:label>BC Distance: </xf:label> </xf:range> <xf:range ref="instance('tmp')/abc" start="0" end="20" incremental="true"> <xf:label>ABC Overlap: </xf:label> </xf:range> <xf:output ref="chd"> <xf:label>Data:</xf:label> </xf:output> <xf:input ref="instance('tmp')//la"> <xf:label>Label A: </xf:label> </xf:input> <xf:input ref="instance('tmp')/lb"> <xf:label>Label B: </xf:label> </xf:input> <xf:input ref="instance('tmp')/lc"> <xf:label>Label C: </xf:label> </xf:input> <xf:output ref="instance('chart-params')/chd"> <xf:label>Distance Data:</xf:label> </xf:output> <xf:output ref="instance('chart-params')/chdl"> <xf:label>Labels:</xf:label> </xf:output> <xf:submit submission="get-chart"> <xf:label>Create Venn Diagram</xf:label> </xf:submit> </body> </html>