411 REFERENCE · Wikibooks
XForms/Venn Diagram
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Motivation
You want to interactively change Venn Diagram parameters.
Method
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
frame|center|XForms User Interface for Venn Diagram
Output of Call to Google Charts
frame|center|Output of XForms REST call to Google Charts
Link to Executable Example
Load Example Form
Program Code
<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>
Discussion
Supply and Demand Google Charts