Create SVG bar charts from XML with XSLT

Question

I'm using XSLT to transform XML to SVG. I want to create horizontal bar charts with one value to left and the bar chart value to the right. The XML looks like this:

<value1 name="something">
  <value2>13</value2>
</value1>
<value1 name="something else">
  <value2>45</value2>
</value1>

And this is what I got so far, creating horizontal bar charts from value2.

<xsl:template match="/" mode="svg">
    <svg width="500px" height="500px" xmlns="http://www.w3.org/2000/svg">
      <g id="bar" transform="translate(50,50) rotate(90 90 90)">
        <xsl:for-each select=".../value1">
        <xsl:variable name="val" select="value2"/>
      <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;">
      </text>
    </xsl:for-each>
  </g>
</svg>

The problem I'm having is getting the text and the charts together. Am I thinking wrong? I want the output to look like this:

value1     bar chart  value2
value1     longer bar chart  value2

I'm really stuck so any help is appreciated!

Answer 1

Use XSLT utility templates to generate an SVG bar chart, such as the following:

• XSLT Cookbook Examples
• Simple SVG Chart Generation with XSLT
• Generating SVG with XSLT
• XSLT Graphtools
• Using XSLT to Generate SVG Content
• SVG Coordinate Transformations