Generating SVG with XSLT

---

Generating Bar Charts with XSLT

The next example involves an XML file whose first element consists of the maximum of a set of bar heights, followed by the set of elements that correspond to the vertical bars in a bar graph. We will use this information in order to 'map' the vertical bars to a set of SVG rect elements by means of an XSL stylesheet. Keep in mind that each bar element contains the height and width of the rectangle; thus, our code needs to determine the correct values for the upper-left vertex of the vertical bar in order to generate the correct attributes for the corresponding SVG rect element.

Listing 17.15 contains the sample XML document  xsltGraph1.xml, which specifies a rectangle, a polygon, and an ellipse by means of standard XML tags, and Listing 17.16 contains the XSL stylesheet  xsltGraph1.xsl that can be applied to  xsltGraph1.xml in order to generate an SVG document.

Listing 17.15 xsltGraph1.xml

<?xml version="1.0"?>  <objects>    <maxValue>250</maxValue>    <object>      <width>40</width>      <height>100</height>      <style>fill:red</style>    </object>    <object>      <width>40</width>      <height>150</height>      <style>fill:green</style>    </object>    <object>      <width>40</width>      <height>175</height>      <style>fill:blue</style>    </object>    <object>      <width>40</width>      <height>195</height>      <style>fill:yellow</style>    </object>    <object>      <width>40</width>      <height>125</height>      <style>fill:blue</style>    </object>    <object>      <width>40</width>      <height>50</height>      <style>fill:red</style>    </object>    <object>      <width>40</width>      <height>120</height>      <style>fill:cyan</style>    </object>    <object>      <width>40</width>      <height>180</height>      <style>fill:magenta</style>    </object>    <object>      <width>40</width>      <height>90</height>      <style>fill:green</style>    </object> </objects>

Listing 17.16 xsltGraph1.xsl

<?xml version="1.0"?>  <xsl:stylesheet       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"       version="1.0"> <xsl:variable name="maxValue"               select="/objects/maxValue"/> <xsl:variable name="count"               select="0"/> <xsl:template match="/">   <svg>     <g>       <xsl:apply-templates/>     </g>   </svg> </xsl:template> <xsl:template match="objects">   <xsl:for-each select="./object">     <xsl:call-template name="createRectangle">       <xsl:with-param name="count"                       select="position()"/>     </xsl:call-template>   </xsl:for-each> </xsl:template> <xsl:template name="createRectangle">   <xsl:param    name="count"/>   <xsl:variable name="width"  select="./width"/>   <xsl:variable name="height" select="./height"/>   <xsl:variable name="style"  select="./style"/>   <rect x="{$count*$width}"         y="{$maxValue - $height}"         width="{$width}" height="{$height}"         style="{$style}"/> </xsl:template> </xsl:stylesheet>

Remarks

The essence of Listing 17.16 involves a for-each loop that invokes the createRectangle template in order to generate a rectangle associated with each object element in the file  xsltGraph1.xml. The actual SVG rect element is generated in the createRectangle template by the following code block:

<rect x="{$count*$width}"       y="{$maxValue - $height}"       width="{$width}" height="{$height}"       style="{$style}"/>

Notice the fact that the y attribute of the rectangle requires the value of maxValue from the XML  xsltGraph1.xml in order to render the rectangle with the correct height. The inclusion of the maxValue element made it possible to write an XSL stylesheet that leveraged the presence of this element; however, the likelier scenario is that your XML document does not contain such a value, which means that you need to add code to the XSL stylesheet in order to compute this maximum value. You can find an example of such a computation in one of the XSL stylesheets that accompany the XSL appendix that is at the end of this book.

---