Files used

Right-click, save ...
data1.xml
stylesheet1.xsl
output1.svg

Technical Details

In order to apply a XSLT stylesheet to XML data, a XSLT processor is required. For these examples I used the instant-saxon (vers. 6.5.2) command line application (saxon.sourceforge.net). It is just a cut-down version of the full Saxon package for machines running on Windows. Both versions are implementing the W3C XSLT 1.0 specification. A transformation can be forced by using the following commandline:

saxon -o output1.svg data1.xml stylesheet1.xsl

The command "saxon" is calling the instant-saxon commandline application. The option "-o" is defining the output which is called "output1.svg". "data1.xml" is the input file and "stylesheet1.xsl" the corresponding XSLT stylesheet. Make sure, that alls files including instant-saxon are in the same folder and the dos prompt is located there too.
Instead of Saxon, one could use the Microsoft's commandline XSLT processor as well (msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/htm/xslt_starter_7cf8.asp).

XML Data

<?xml version="1.0"?>
<dataSet>
  <bar fill="rgb(255,100,75)">
    <value>71</value>
    <desc>01</desc>
  </bar>
  <bar fill="rgb(0,225,0)">
    <value>89</value>
    <desc>02</desc>
  </bar>
  <bar fill="rgb(75,100,245)">
    <value>23</value>
    <desc>03</desc>
  </bar>
  <bar fill="rgb(200,200,200)">
    <value>108</value>
    <desc>04</desc>
  </bar>
  <bar fill="rgb(245,245,25)">
    <value>93</value>
    <desc>05</desc>
  </bar>
</dataSet>

This example is showing just one possiblity to structure bar chart information in a XML conform way. Each bar element is symbolizing one bar. The content of its attribute "fill" can be used to define the colour of the bar. Furthermore, each bar has two children, the <value> and <descr> element. The first one is containing the value. The second one a description of this value.

XSLT Stylesheet

<?xml version="1.0" encoding="utf-8"?>
<xsl:transform xmlns:xsl="https://www.w3.org/1999/XSL/Transform" version="1.0" >
  <xsl:template match="dataSet">
    <svg width="200px" height="250px" xmlns="https://www.w3.org/2000/svg">
      <g id="bar" transform="translate(0,200)">
        <xsl:for-each select="bar">
          <xsl:variable name="val" select="value"/>
          <rect x="{position()*25}" y="-{$val*1.5}" height="{$val*1.5}" width="15" style="fill:{@fill};"/>
          <text x="{position()*25 + 7.5}" y="0" style="font-family:arial;text-anchor:middle;baseline-shift:-15;">
            <xsl:value-of select="desc"/>
          </text>
        </xsl:for-each>
      </g>
    </svg>
  </xsl:template>
</xsl:transform>

As you can see, XSLT syntax is XML as well. Elements are containing start- and end-tags. Each element has different attributes and so on. Because of that, a stylesheet only has one root element, which can be <xsl:template> or <xsl:transform>. In this example, straight SVG syntax can be used within the stylesheet, too.
In order to access the XML data within data1.xml, a template is pointing to the root element of the corresponding file. In this example the string "dataSet" is achieving that (line 3). In order to expand the functionality of such strings, a "sublanguage" called XPath (www.w3.org/TR/xpath) was created by the W3C. XPath is offering an easy to understand syntax for navigating within a XML tree (e.g. children, descendants, ...). In this example, the understanding of XPath is not necessary.
To access every <bar> element, XSLT provides different possibilities. Here, for-each is looping through each <bar> element. Within this loop a variable called "val" is declared. It graps the "value" and saves it. Next, a rectangle is drawn. The height is calculated by multiplicating the value with a constant factor. This rectangle is representing one bar. Due to the differing coordinate systems, it has to be translated by manipulating the "y" attribute, too. The rectangle is filled by picking the colour of the "fill" attribute.
In order to label each bar, a <text> element is created. The value-of element is picking the "description" of the data <desc> element.
To complete the stylesheet, each element which is still open has to be closed.

File used

Technical Details

Syntax

File used

Technical Details

Syntax