Home | | Service Oriented Architecture | Defining the XSL to Transform XML Content to SVG Presentation

Chapter: XML and Web Services : Building XML-Based Applications : Interactive Graphical Visualizations with SVG

Defining the XSL to Transform XML Content to SVG Presentation

One of the advantages SVG has over other vector graphics formats is that it is both a well-formed and valid XML format. This enables developers to leverage many other powerful XML technologies to automatically create SVG visualizations.

Defining the XSL to Transform XML Content to SVG Presentation

 

One of the advantages SVG has over other vector graphics formats is that it is both a well-formed and valid XML format. This enables developers to leverage many other powerful XML technologies to automatically create SVG visualizations. XSL is one such technology that enables the creation of style sheets that, together with an XSLT engine, automatically transform XML data into SVG presentations. Listing 12.6 shows an XSL style sheet that transforms any XML loan document into an SVG loan visualization in the format shown in Listing 12.4. Furthermore, the SVG result of this transformation also uses the CSS document shown in Listing 12.5, so not only are we able to generate SVG visualizations automatically for all loans, but we can do so with consistent and eas-ily maintainable styles. Following Listing 12.6, some of the XSL aspects specifically related to SVG are discussed. For more information on XSL, see Chapter 9, “Transforming XML.”

 

 

LISTING 12.6  Loan.xsl—Sample Loan XSL

 

<?xml  version=”1.0”?>

 

<xsl:stylesheet version=”1.0” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:xlink=”http://www.w3.org/1999/xlink”>

 

<xsl:output  method=”xml”  version=”1.0”  encoding=”iso-8859-1”  indent=”yes”

doctype-public=”-//W3C//DTD  SVG  1.0//EN”  doctype-system=

”http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd”/>

 

<xsl:param name=”plotTopLeftX”>68.5</xsl:param> <xsl:param name=”plotTopLeftY”>11.7</xsl:param> <xsl:param name=”plotWidth”>384</xsl:param> <xsl:param name=”plotHeight”>224</xsl:param>

 

<xsl:template  match=”/loan”>

 

<xsl:processing-instruction name=”xml-stylesheet”>href=”Loan.css” type=”text/css”</xsl:processing-instruction>

 

<svg  width=”485”  height=”290”>

 

<rect  x=”0”  y=”0”  width=”485”  height=”290”  class=”border”/>

 

<rect  x=”68.5”  y=”11.7”  width=”384”  height=”224”  class=”plotbox”/>

 

<line x1=”67” y1=”58.8” x2=”451” y2=”58.8” class=”axisvalue”/> <line x1=”67” y1=”103.6” x2=”451” y2=”103.6” class=”axisvalue”/> <line x1=”67” y1=”148.4” x2=”451” y2=”148.4” class=”axisvalue”/> <line x1=”67” y1=”193.2” x2=”451” y2=”193.2” class=”axisvalue”/> <line x1=”143.8” y1=”14” x2=”143.8” y2=”238” class=”axisvalue”/> <line x1=”220.6” y1=”14” x2=”220.6” y2=”238” class=”axisvalue”/> <line x1=”297.4” y1=”14” x2=”297.4” y2=”238” class=”axisvalue”/> <line x1=”374.2” y1=”14” x2=”374.2” y2=”238” class=”axisvalue”/>

 

<text x=”10px” y=”155px” transform=”rotate(-90) translate(-220,-115)” class=”axis”>Principal Dollars</text>

 

<text x=”227.08px” y=”283.289px” class=”axis”>Month</text> <text x=”67px” y=”258.072px” class=”axisvalue”>0</text>

 

<text x=”55px” y=”238px” text-anchor=”end” class=”axisvalue”>0.00</text> <text x=”451px” y=”258.072px” class=”axisvalue”><xsl:value-of

select=”@termInMonths”/></text>

 

<text x=”55px” y=”14px” text-anchor=”end” class=”axisvalue”><xsl:value-of select=”@principal”/></text>

 

<polyline class=”data”> <xsl:attribute name=”points”>

 

<xsl:for-each  select=”payment”>

 

<xsl:variable name=”paymentX”><xsl:value-of select=”( @monthIndex * $plotWidth div ../@termInMonths ) + $plotTopLeftX”/></xsl:variable>

LISTING 12.6  continued

 

<xsl:variable  name=”paymentY”><xsl:value-of  select=”$plotHeight  *  (1  -

 

( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> </xsl:variable>

 

<xsl:value-of select=”$paymentX”/>,<xsl:value-of select=”$paymentY”/><xsl:text> </xsl:text>

 

</xsl:for-each> </xsl:attribute>

 

</polyline>

 

<xsl:for-each  select=”payment”>

 

<xsl:variable name=”paymentX”><xsl:value-of select=”( @monthIndex * $plotWidth div ../@termInMonths ) + $plotTopLeftX”/></xsl:variable>

 

<xsl:variable  name=”paymentY”><xsl:value-of  select=”$plotHeight  *  (1  -

 

( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> </xsl:variable>

 

<circle  r=”4”  class=”datapoint”>

 

<xsl:attribute name=”cx”><xsl:value-of select=”$paymentX”/> </xsl:attribute>

 

<xsl:attribute name=”cy”><xsl:value-of select=”$paymentY”/> </xsl:attribute>

 

</circle> </xsl:for-each>

 

</svg>

 

</xsl:template>

 

</xsl:stylesheet>

 

To simplify the maintenance of the XSL, it is a good idea to put any constants at the top of the document in the form of xsl:param variables, as shown here:

 

<xsl:param  name=”plotTopLeftX”>68.5</xsl:param>

 

These constants are referred to from xsl:value-of elements elsewhere in the XSL. For example, the following code shows how the value of the parameter named plotTopLeftX

 

is used in a formula to compute the value of a new XSL variable named

 

<xsl:variable name=”paymentX”><xsl:value-of select=”( @monthIndex * $plotWidth div ../@termInMonths ) + $plotTopLeftX”/></xsl:variable>

 

The CSS document in Listing 12.5 is referenced from the SVG result of the transforma-tion using the following xsl:processing-instruction:

 

<xsl:processing-instruction name=”xml-stylesheet”>href=”Loan.css” type=”text/css”</xsl:processing-instruction>

For each payment in the XML loan document being transformed with the XSL in Listing 12.6, the following code adds a point to the polyline element used to visualize the loan plot:

 

<polyline class=”data”> <xsl:attribute name=”points”>

 

<xsl:for-each  select=”payment”>

 

<xsl:variable name=”paymentX”><xsl:value-of select=”( @monthIndex * $plotWidth div ../@termInMonths ) + $plotTopLeftX”/></xsl:variable>

 

<xsl:variable  name=”paymentY”><xsl:value-of  select=”$plotHeight  *  (1  -

 

( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> </xsl:variable>

 

<xsl:value-of select=”$paymentX”/>,<xsl:value-of select=”$paymentY”/><xsl:text> </xsl:text>

 

</xsl:for-each> </xsl:attribute>

 

</polyline>

 

The formulas in this XSL use the location and dimensions of the loan plot, as defined in the xsl:param elements earlier in the XSL document, together with a knowledge of the SVG coordinate system shown in Figure 12.3 to determine the x and y coordinates of each payment point and to store them in the variables paymentX and paymentY. The val-ues of these variables are then output to the value of the points attribute of the SVG polyline element.

 

Similarly, the following XSL code creates the SVG circle elements that represent each of the payment data points in the loan plot:

 

<xsl:for-each  select=”payment”>

 

<xsl:variable name=”paymentX”><xsl:value-of select=”( @monthIndex * $plotWidth div ../@termInMonths ) + $plotTopLeftX”/></xsl:variable>

 

<xsl:variable  name=”paymentY”><xsl:value-of  select=”$plotHeight  *  (1  -

 

( @principalOutstanding div ../@principal )) + $plotTopLeftY”/> </xsl:variable>

 

<circle  r=”4”  class=”datapoint”>

 

<xsl:attribute name=”cx”><xsl:value-of select=”$paymentX”/> </xsl:attribute>

 

<xsl:attribute name=”cy”><xsl:value-of select=”$paymentY”/> </xsl:attribute>

 

</circle> </xsl:for-each>

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
XML and Web Services : Building XML-Based Applications : Interactive Graphical Visualizations with SVG : Defining the XSL to Transform XML Content to SVG Presentation |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.