Re: 25 Complete XForms Examples (Non-Normative)

I'm thinking of replacing the SVG example from this section with one that  
is more obviously useful.

Something like this (hope the indentation is kept):

<html xmlns="http://www.w3.org/1999/xhtml"  
xmlns:h="http://www.w3.org/1999/xhtml"
       xmlns:xf="http://www.w3.org/2002/xforms"  
xmlns:svg="http://www.w3.org/2000/svg"
       xmlns:ev="http://www.w3.org/2001/xml-events"  
xmlns:math="http://exslt.org/math"
>
<head>
     <title>Barchart</title>
     <style type="text/css">
         .histogram  { border: thin black solid; text-anchor:middle; }
 .box    { fill: blue; stroke: black; stroke-width:1; }
 .title  { fill: gray;  }
     </style>
     <model xmlns="http://www.w3.org/2002/xforms">
         <instance id="data" src="http://example.com/data.xml"/>
         <bind id="histdata" ref="instance('data')/y"/>

         <instance id="chart">
             <barchart xmlns="">
  <title>Values</title>
  <n/><miny/><maxy/><depth/><height/><range/><vscale/><hscale/>
             </barchart>
         </instance>
         <bind ref="n"      calculate="count(bind('histdata'))"/>
         <bind ref="maxy"   calculate="max(bind('histdata'))"/>
         <bind ref="miny"   calculate="min(bind('histdata'))"/>

         <bind ref="height" calculate="if(../maxy &gt; 0, ../maxy, 0)"/>
         <bind ref="depth"  calculate="if(../miny &lt; 0, 0 - ../miny, 0)"/>
         <bind ref="range"  calculate="../height + ../depth"/>
         <bind ref="vscale" calculate="100 div ../range" type="double"/>
         <bind ref="hscale" calculate="100 div ../n"     type="double"/>
     </model>
</head>
<body>
     <h1>Bar chart</h1>
     <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 200  
200" height="400" width="400" class="histogram">
         <g transform="translate(50,150)">
             <xf:repeat bind="histdata">
                 <rect x="{count(preceding-sibling::*) *  
instance('chart')/hscale}"
                       y="{(0 - (if(. &lt; 0, 0, .) +  
instance('chart')/depth)) * instance('chart')/vscale}"
                       height="{math:abs(.) * instance('chart')/vscale}"
                       width="{instance('chart')/hscale}" class="box"/>
             </xf:repeat>
             <!-- Title -->
             <text x="50" y="20" class="title"><xf:output  
ref="title"/></text>
         </g>
     </svg>
</body>
</html>

You can see (a version of) this running at  
https://homepages.cwi.nl/~steven/forms/examples/barchart2.xml

Steven

Received on Wednesday, 1 November 2017 16:10:08 UTC