XForms/Venn Diagram

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

Motivation[edit]

You want to interactively change Venn Diagram parameters.

Method[edit]

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"
    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="&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"/>
            </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[edit]

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

Home: XForms