2

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!

ana
  • 475
  • 4
  • 10
  • 21
  • 2
    It is not clear whether your question is about designing the right SVG to display a bar chart or about using XSLT to create a certain SVG from your input. So please clarify, if you know the SVG you want to create for your XML input then post that SVG and we can help with writing the XSLT to create it. – Martin Honnen Dec 13 '12 at 15:50
  • I agree with Martin, your question is a mixture of at least two subject areas. I've done quite a lot of work with respect to both your challenges, and it's a fairly large problem statement that is rather difficult to create a bullet-proofed, flexible, modular way of digesting XML data then creating attractive results while accommodating highly various inputs, "bad data," auto-ranging, etc. Good luck, ana! I can't comment much more specifically given the broad scope of what you are asking. – Dave Dec 13 '12 at 18:32
  • I guess your problem is properly aligning the text to the bar. Better compile an SVG by hand first, then give us a complete XML source file, a complete XSLT and the desired output. If there are sub-problems, better ask them as separate questions. – Thomas W Dec 05 '13 at 19:47

1 Answers1

0

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

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265