XForms, Venn Diagram

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

XForms User Interface for Venn Diagram (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Output of Call to Google Charts

Output of XForms REST call to Google Charts (Image: The original uploader was Dmccreary at English Wikibooks ., CC BY-SA 3.0)

Link to Executable Example

Load Example Form

Program Code

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">;

Google Venn Diagram
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}

id="chart-params" xmlns="">

v
400x400

xmlns="" id="tmp">

15
20
25
10
12
15
5
A
B
C

nodeset="instance('tmp')/sa" type="xs:integer"/>
nodeset="instance('tmp')/sb" type="xs:integer"/>
nodeset="instance('tmp')/sc" type="xs:integer"/>
nodeset="instance('tmp')/ab" type="xs:integer"/>
nodeset="instance('tmp')/ac" type="xs:integer"/>
nodeset="instance('tmp')/bc" type="xs:integer"/>
nodeset="instance('tmp')/abc" type="xs:integer"/>

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
)"/>

nodeset="instance('chart-params')/chdl" calculate="concat(
instance('tmp')/la, '|',
instance('tmp')/lb,'|',
instance('tmp')/lc
)"/>

id="get-chart" action="http://chart.apis.google.com/chart" method="get"
separator="&" ref="instance('chart-params')" replace="all"/>

ev:event="xforms-ready">
control="field-1"/>

Google Venn Diagram Demo

ref="instance('tmp')/sa" start="2" end="30" step="1" incremental="true">
Size A:

ref="instance('tmp')/sb" start="2" end="30" incremental="true">
Size B:

ref="instance('tmp')/sc" start="2" end="30" incremental="true">
Size C:

ref="instance('tmp')/ab" start="0" end="20" incremental="true">
AB Distance:

ref="instance('tmp')/ac" start="0" end="20" incremental="true">
AC Distance:

ref="instance('tmp')/bc" start="0" end="20" incremental="true">
BC Distance:

ref="instance('tmp')/abc" start="0" end="20" incremental="true">
ABC Overlap:

ref="chd">
Data:

ref="instance('tmp')//la">
Label A:

ref="instance('tmp')/lb">
Label B:

ref="instance('tmp')/lc">
Label C:

ref="instance('chart-params')/chd">
Distance Data:

ref="instance('chart-params')/chdl">
Labels:

submission="get-chart">
Create Venn Diagram

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.