| | xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> |
| | |
| | - <xsl:include href="math.xsl" /> |
| | - |
| | - <xsl:variable name="base_colour" select="'46A5E5'" /> |
| | - <xsl:variable name="stroke_colour" select="'white'" /> |
| | - <xsl:variable name="width" select="200" /> |
| | - <xsl:variable name="height" select="$width" /> |
| | - |
| | - <xsl:template match="title" mode="piechart"> |
| | - <div class="title"><xsl:apply-templates /></div> |
| | - </xsl:template> |
| | +<xsl:include href="math.xsl" /> |
| | |
| | - <!-- Convert XML data into a pie chart. --> |
| | - <xsl:template match="dataset" mode="piechart"> |
| | +<xsl:variable name="base_colour" select="'46A5E5'" /> |
| | +<xsl:variable name="stroke_colour" select="'white'" /> |
| | +<xsl:variable name="width" select="200" /> |
| | +<xsl:variable name="height" select="$width" /> |
| | |
| | - <!-- Number of pie pieces. --> |
| | - <xsl:variable name="pieces" select="count(data)" /> |
| | +<xsl:template match="title" mode="piechart"> |
| | + <div class="title"><xsl:apply-templates /></div> |
| | +</xsl:template> |
| | |
| | - <!-- Calculate the total value for all pieces (for percentages). --> |
| | - <xsl:variable name="total" select="sum(//value)" /> |
| | +<!-- Convert XML data into a pie chart. --> |
| | +<xsl:template match="dataset" mode="piechart"> |
| | + <!-- Number of wedges. --> |
| | + <xsl:variable name="wedges" select="count(data)" /> |
| | |
| | - <div class="chart"> |
| | - <div class="graph"> |
| | - <svg width="{$width}" height="{$height}" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
| | - <xsl:for-each select="data"> |
| | - <xsl:apply-templates select="value" mode="piechart"> |
| | - <xsl:with-param name="colour"> |
| | - <xsl:call-template name="fill"> |
| | - <xsl:with-param name="piece" select="position()" /> |
| | - <xsl:with-param name="pieces" select="$pieces" /> |
| | - <xsl:with-param name="colour" select="$base_colour" /> |
| | - </xsl:call-template> |
| | - </xsl:with-param> |
| | - <xsl:with-param name="total" select="$total" /> |
| | - <xsl:with-param name="runningTotal" select="sum(preceding-sibling::data/value)" /> |
| | - <xsl:with-param name="radius" select="$width * 0.5" /> |
| | - </xsl:apply-templates> |
| | - </xsl:for-each> |
| | - </svg> |
| | - </div> |
| | - <!-- SVG 1.1 has no text flow abilities: legend is plain HTML. --> |
| | - <div class="legend"> |
| | - <xsl:for-each select="//name"> |
| | - <xsl:variable name="colour"> |
| | - <xsl:call-template name="fill"> |
| | - <xsl:with-param name="piece" select="position()" /> |
| | - <xsl:with-param name="pieces" select="$pieces" /> |
| | - <xsl:with-param name="colour" select="$base_colour" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <!-- Calculate the total value for all wedges (for percentages). --> |
| | + <xsl:variable name="total" select="sum(//value)" /> |
| | |
| | - <xsl:variable name="percent" select="concat(.,' (',format-number(../value div $total, '0.00%'),')')" /> |
| | - |
| | - <div class="piece"> |
| | - <div class="bullet" style="background-color:{$colour}" /> |
| | - <xsl:value-of select="$percent" /> |
| | - </div> |
| | + <div class="chart"> |
| | + <div class="graph"> |
| | + <svg width="{$width}" height="{$height}" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
| | + <xsl:for-each select="data"> |
| | + <xsl:apply-templates select="value" mode="piechart"> |
| | + <xsl:with-param name="colour"> |
| | + <xsl:call-template name="fill"> |
| | + <xsl:with-param name="wedge" select="position()" /> |
| | + <xsl:with-param name="wedges" select="$wedges" /> |
| | + <xsl:with-param name="colour" select="$base_colour" /> |
| | + </xsl:call-template> |
| | + </xsl:with-param> |
| | + <xsl:with-param name="total" select="$total" /> |
| | + <xsl:with-param name="runningTotal" select="sum(preceding-sibling::data/value)" /> |
| | + <xsl:with-param name="radius" select="$width * 0.5" /> |
| | + </xsl:apply-templates> |
| | </xsl:for-each> |
| | - </div> |
| | + </svg> |
| | </div> |
| | - </xsl:template> |
| | + <!-- SVG 1.1 has no text flow abilities: legend is plain HTML. --> |
| | + <div class="legend"> |
| | + <xsl:for-each select="//name"> |
| | + <xsl:variable name="colour"> |
| | + <xsl:call-template name="fill"> |
| | + <xsl:with-param name="wedge" select="position()" /> |
| | + <xsl:with-param name="wedges" select="$wedges" /> |
| | + <xsl:with-param name="colour" select="$base_colour" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + |
| | + <xsl:variable name="percent" select="concat(.,' (',format-number(../value div $total, '0.00%'),')')" /> |
| | + |
| | + <div class="piece"> |
| | + <div class="bullet" style="background-color:{$colour}" /> |
| | + <xsl:value-of select="$percent" /> |
| | + </div> |
| | + </xsl:for-each> |
| | + </div> |
| | + </div> |
| | +</xsl:template> |
| | + |
| | +<!-- http://www.svgopen.org/2003/papers/CreatingSVGPieChartsThroughWebService/ --> |
| | +<!-- http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ --> |
| | +<!-- http://www.codestore.net/store.nsf/unid/epsd-5dtt4l --> |
| | +<xsl:template match="value" mode="piechart"> |
| | + <xsl:param name="colour" /> |
| | + <xsl:param name="total" /> |
| | + <xsl:param name="runningTotal" /> |
| | + <xsl:param name="radius" /> |
| | |
| | - <!-- http://www.svgopen.org/2003/papers/CreatingSVGPieChartsThroughWebService/ --> |
| | - <!-- http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ --> |
| | - <!-- http://www.codestore.net/store.nsf/unid/epsd-5dtt4l --> |
| | - <xsl:template match="value" mode="piechart"> |
| | - <xsl:param name="colour" /> |
| | - <xsl:param name="total" /> |
| | - <xsl:param name="runningTotal" /> |
| | - <xsl:param name="radius" /> |
| | - |
| | - <xsl:variable name="title" select="concat(../name,' (',format-number(. div $total, '0.00%'),')')" /> |
| | - <xsl:variable name="r" select="$radius" /> |
| | - |
| | - <!-- Set the start and ending angles. --> |
| | - <xsl:variable name="sa" select="360.0 * ($runningTotal div $total)" /> |
| | - <xsl:variable name="ea" select="360.0 * (($runningTotal + .) div $total)" /> |
| | - |
| | - <xsl:variable name="x1"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="degrees" select="-$sa" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="y1"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="degrees" select="(-$sa - 90)" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="x2"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="degrees" select="-$ea" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="y2"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="degrees" select="(-$ea - 90)" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <xsl:variable name="title" select="concat(../name,' (',format-number(. div $total, '0.00%'),')')" /> |
| | + <xsl:variable name="r" select="$radius" /> |
| | + |
| | + <!-- Set the start and ending angles. --> |
| | + <xsl:variable name="sa" select="360.0 * ($runningTotal div $total)" /> |
| | + <xsl:variable name="ea" select="360.0 * (($runningTotal + .) div $total)" /> |
| | + |
| | + <xsl:variable name="x1"> |
| | + <xsl:call-template name="sine"> |
| | + <xsl:with-param name="degrees" select="-$sa" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="y1"> |
| | + <xsl:call-template name="sine"> |
| | + <xsl:with-param name="degrees" select="(-$sa - 90)" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="x2"> |
| | + <xsl:call-template name="sine"> |
| | + <xsl:with-param name="degrees" select="-$ea" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="y2"> |
| | + <xsl:call-template name="sine"> |
| | + <xsl:with-param name="degrees" select="(-$ea - 90)" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | |
| | - <xsl:variable name="sweep"> |
| | - <xsl:choose> |
| | - <xsl:when test="($ea - $sa > 180)">1</xsl:when> |
| | - <xsl:otherwise>0</xsl:otherwise> |
| | - </xsl:choose> |
| | - </xsl:variable> |
| | - |
| | - <path xmlns="http://www.w3.org/2000/svg" |
| | - fill="{$colour}" |
| | - title="{$title}" |
| | - stroke="{$stroke_colour}" |
| | - transform="translate({$radius},{$radius})" |
| | - d="{concat('M 0 0 L ', $x1 * $r, ' ', $y1 * $r, ' A ', $r, ' ', $r, ' 0 ', $sweep, ' 0 ', $x2 * $r, ' ', $y2 * $r, ' Z' )}" /> |
| | - </xsl:template> |
| | + <xsl:variable name="sweep"> |
| | + <xsl:choose> |
| | + <xsl:when test="($ea - $sa > 180)">1</xsl:when> |
| | + <xsl:otherwise>0</xsl:otherwise> |
| | + </xsl:choose> |
| | + </xsl:variable> |
| | + |
| | + <path xmlns="http://www.w3.org/2000/svg" |
| | + fill="{$colour}" |
| | + title="{$title}" |
| | + stroke="{$stroke_colour}" |
| | + transform="translate({$radius},{$radius})" |
| | + d="{concat('M 0 0 L ', $x1 * $r, ' ', $y1 * $r, ' A ', $r, ' ', $r, ' 0 ', $sweep, ' 0 ', $x2 * $r, ' ', $y2 * $r, ' Z' )}" /> |
| | +</xsl:template> |
| | |
| | - <!-- http://en.wikipedia.org/wiki/HSL_and_HSV --> |
| | - <xsl:template name="fill"> |
| | - <xsl:param name="piece" /> |
| | - <xsl:param name="pieces" /> |
| | - <xsl:param name="colour" /> |
| | +<!-- http://en.wikipedia.org/wiki/HSL_and_HSV --> |
| | +<xsl:template name="fill"> |
| | + <xsl:param name="wedge" /> |
| | + <xsl:param name="wedges" /> |
| | + <xsl:param name="colour" /> |
| | |
| | - <xsl:variable name="r"> |
| | - <xsl:call-template name="hex2dec"> |
| | - <xsl:with-param name="hex" select="substring( $colour, 1, 2 )" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="g"> |
| | - <xsl:call-template name="hex2dec"> |
| | - <xsl:with-param name="hex" select="substring( $colour, 3, 2 )" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="b"> |
| | - <xsl:call-template name="hex2dec"> |
| | - <xsl:with-param name="hex" select="substring( $colour, 5, 2 )" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - |
| | - <xsl:variable name="alpha" select="(2 * $r - $g - $b) * 0.5" /> |
| | - <xsl:variable name="beta" select="0.86602540378 * ($g - $b)" /> |
| | - |
| | - <xsl:variable name="base_hue"> |
| | - <xsl:call-template name="atan2"> |
| | - <xsl:with-param name="x" select="$alpha" /> |
| | - <xsl:with-param name="y" select="$beta" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <xsl:variable name="r"> |
| | + <xsl:call-template name="hex2dec"> |
| | + <xsl:with-param name="hex" select="substring( $colour, 1, 2 )" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="g"> |
| | + <xsl:call-template name="hex2dec"> |
| | + <xsl:with-param name="hex" select="substring( $colour, 3, 2 )" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="b"> |
| | + <xsl:call-template name="hex2dec"> |
| | + <xsl:with-param name="hex" select="substring( $colour, 5, 2 )" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + |
| | + <xsl:variable name="alpha" select="(2 * $r - $g - $b) * 0.5" /> |
| | + <xsl:variable name="beta" select="0.86602540378 * ($g - $b)" /> |
| | + |
| | + <xsl:variable name="base_hue"> |
| | + <xsl:call-template name="atan2"> |
| | + <xsl:with-param name="x" select="$alpha" /> |
| | + <xsl:with-param name="y" select="$beta" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | |
| | - <xsl:variable name="chroma"> |
| | - <xsl:call-template name="sqrt"> |
| | - <xsl:with-param name="n" select="($alpha * $alpha) + ($beta * $beta)" /> |
| | + <xsl:variable name="chroma"> |
| | + <xsl:call-template name="sqrt"> |
| | + <xsl:with-param name="n" select="($alpha * $alpha) + ($beta * $beta)" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + |
| | + <xsl:variable name="value"> |
| | + <xsl:variable name="max_rg"> |
| | + <xsl:call-template name="max"> |
| | + <xsl:with-param name="a" select="$r" /> |
| | + <xsl:with-param name="b" select="$g" /> |
| | </xsl:call-template> |
| | </xsl:variable> |
| | - |
| | - <xsl:variable name="value"> |
| | - <xsl:variable name="max_rg"> |
| | - <xsl:call-template name="max"> |
| | - <xsl:with-param name="a" select="$r" /> |
| | - <xsl:with-param name="b" select="$g" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="max_gb"> |
| | - <xsl:call-template name="max"> |
| | - <xsl:with-param name="a" select="$g" /> |
| | - <xsl:with-param name="b" select="$b" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <xsl:variable name="max_gb"> |
| | <xsl:call-template name="max"> |
| | - <xsl:with-param name="a" select="$max_rg" /> |
| | - <xsl:with-param name="b" select="$max_gb" /> |
| | + <xsl:with-param name="a" select="$g" /> |
| | + <xsl:with-param name="b" select="$b" /> |
| | </xsl:call-template> |
| | </xsl:variable> |
| | - |
| | - <xsl:variable name="h_rotate" select="($base_hue + ((240 div $pieces) * $piece) mod 240)"></xsl:variable> |
| | - <xsl:variable name="h_prime" select="$h_rotate div 60.0" /> |
| | - <xsl:variable name="h_mod" select="$h_prime mod 2 - 1" /> |
| | - <xsl:variable name="h_abs" select="($h_mod >= 0) * $h_mod - not($h_mod >= 0) * $h_mod" /> |
| | - |
| | - <xsl:variable name="x" select="$chroma * (1 - $h_abs)" /> |
| | - <xsl:variable name="m" select="$value - $chroma" /> |
| | - <xsl:variable name="c" select="$chroma" /> |
| | - |
| | - <xsl:variable name="cm" select="round( $c + $m )" /> |
| | - <xsl:variable name="xm" select="round( $x + $m )" /> |
| | - <xsl:variable name="zm" select="round( 0 + $m )" /> |
| | + <xsl:call-template name="max"> |
| | + <xsl:with-param name="a" select="$max_rg" /> |
| | + <xsl:with-param name="b" select="$max_gb" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + |
| | + <xsl:variable name="h_rotate" select="($base_hue + ((240 div $wedges) * $wedge) mod 240)"></xsl:variable> |
| | + <xsl:variable name="h_prime" select="$h_rotate div 60.0" /> |
| | + <xsl:variable name="h_mod" select="$h_prime mod 2 - 1" /> |
| | + <xsl:variable name="h_abs" select="($h_mod >= 0) * $h_mod - not($h_mod >= 0) * $h_mod" /> |
| | + |
| | + <xsl:variable name="x" select="$chroma * (1 - $h_abs)" /> |
| | + <xsl:variable name="m" select="$value - $chroma" /> |
| | + <xsl:variable name="c" select="$chroma" /> |
| | + |
| | + <xsl:variable name="cm" select="round( $c + $m )" /> |
| | + <xsl:variable name="xm" select="round( $x + $m )" /> |
| | + <xsl:variable name="zm" select="round( 0 + $m )" /> |
| | |
| | - <xsl:choose> |
| | - <xsl:when test="0 <= $h_prime and $h_prime < 1"> |
| | - <xsl:value-of select="concat('rgb(', $cm, ',', $xm, ',', $zm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:when test="1 <= $h_prime and $h_prime < 2"> |
| | - <xsl:value-of select="concat('rgb(', $xm, ',', $cm, ',', $zm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:when test="2 <= $h_prime and $h_prime < 3"> |
| | - <xsl:value-of select="concat('rgb(', $zm, ',', $cm, ',', $xm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:when test="3 <= $h_prime and $h_prime < 4"> |
| | - <xsl:value-of select="concat('rgb(', $zm, ',', $xm, ',', $cm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:when test="4 <= $h_prime and $h_prime < 5"> |
| | - <xsl:value-of select="concat('rgb(', $xm, ',', $zm, ',', $cm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:when test="5 <= $h_prime and $h_prime < 6"> |
| | - <xsl:value-of select="concat('rgb(', $cm, ',', $zm, ',', $xm, ')' )" /> |
| | - </xsl:when> |
| | - <xsl:otherwise> |
| | - <xsl:value-of select="concat('rgb(', $r, ',', $g, ',', $b, ')' )" /> |
| | - </xsl:otherwise> |
| | - </xsl:choose> |
| | - </xsl:template> |
| | + <xsl:choose> |
| | + <xsl:when test="0 <= $h_prime and $h_prime < 1"> |
| | + <xsl:value-of select="concat('rgb(', $cm, ',', $xm, ',', $zm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:when test="1 <= $h_prime and $h_prime < 2"> |
| | + <xsl:value-of select="concat('rgb(', $xm, ',', $cm, ',', $zm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:when test="2 <= $h_prime and $h_prime < 3"> |
| | + <xsl:value-of select="concat('rgb(', $zm, ',', $cm, ',', $xm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:when test="3 <= $h_prime and $h_prime < 4"> |
| | + <xsl:value-of select="concat('rgb(', $zm, ',', $xm, ',', $cm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:when test="4 <= $h_prime and $h_prime < 5"> |
| | + <xsl:value-of select="concat('rgb(', $xm, ',', $zm, ',', $cm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:when test="5 <= $h_prime and $h_prime < 6"> |
| | + <xsl:value-of select="concat('rgb(', $cm, ',', $zm, ',', $xm, ')' )" /> |
| | + </xsl:when> |
| | + <xsl:otherwise> |
| | + <xsl:value-of select="concat('rgb(', $r, ',', $g, ',', $b, ')' )" /> |
| | + </xsl:otherwise> |
| | + </xsl:choose> |
| | +</xsl:template> |
| | </xsl:stylesheet> |
| | |