XForms/Venn Diagram

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

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]

XForms User Interface for Venn Diagram

Output of Call to Google Charts[edit | edit source]

Output of XForms REST call to Google Charts

Link to Executable Example[edit | edit source]

Load Example Form

Program Code[edit | edit source]

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

Discussion[edit | edit source]

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