XForms/Venn Diagram

From Wikibooks, open books for an open world
Jump to navigation Jump to search


You want to interactively change Venn Diagram parameters.


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]

XForms User Interface for Venn Diagram

Output of Call to Google Charts[edit]

Output of XForms REST call to Google Charts

Link to Executable Example[edit]

Load Example Form

Program Code[edit]

<html  xmlns="http://www.w3.org/1999/xhtml"
        <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}
            <xf:instance id="chart-params" xmlns="">
            <!-- temp variables that are concated together to create the parameter -->                 
            <xf:instance xmlns="" id="tmp">
            <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, ',',
                <xf:bind nodeset="instance('chart-params')/chdl" calculate="concat(
                    instance('tmp')/la, '|',

            <xf:submission id="get-chart" action="http://chart.apis.google.com/chart" method="get" 
                separator="&amp;" 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"/>
        <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 ref="instance('tmp')/sb" start="2" end="30" incremental="true">
            <xf:label>Size B: </xf:label>
        <xf:range ref="instance('tmp')/sc" start="2" end="30" incremental="true">
            <xf:label>Size C: </xf:label>
        <xf:range ref="instance('tmp')/ab" start="0" end="20" incremental="true">
            <xf:label>AB Distance: </xf:label>
        <xf:range ref="instance('tmp')/ac" start="0" end="20" incremental="true">
            <xf:label>AC Distance: </xf:label>
        <xf:range ref="instance('tmp')/bc" start="0" end="20" incremental="true">
            <xf:label>BC Distance: </xf:label>
        <xf:range ref="instance('tmp')/abc" start="0" end="20" incremental="true">
            <xf:label>ABC Overlap: </xf:label>
        <xf:output ref="chd">
        <xf:input ref="instance('tmp')//la">
            <xf:label>Label A: </xf:label>
        <xf:input ref="instance('tmp')/lb">
            <xf:label>Label B: </xf:label>
        <xf:input ref="instance('tmp')/lc">
            <xf:label>Label C: </xf:label>
        <xf:output ref="instance('chart-params')/chd">
            <xf:label>Distance Data:</xf:label>
        <xf:output ref="instance('chart-params')/chdl">
        <xf:submit submission="get-chart">
            <xf:label>Create Venn Diagram</xf:label>


Next Page: Supply and Demand | Previous Page: Google Charts

Home: XForms