title: Using XSLT and SVG to create bar chart from XML - Scaling Bar Chart
body: <p>I'm new to XSLT and SVG and have already done a lot of research. I've seen some answers on here that look close to what I need help with but not quite working for me. Any help would be appreciated.</p>
  
  <p>I'm pulling an XML file from an SQL db that looks like this:</p>
  
  <pre><code>&lt;Report&gt;
    &lt;Title&gt;Step Status Sums Report&lt;/Title&gt;
    &lt;RESULTS&gt;
      &lt;ROW&gt;
        &lt;PASSED&gt;2784&lt;/PASSED&gt;
        &lt;FAILED&gt;73&lt;/FAILED&gt;
        &lt;CAUTION&gt;29&lt;/CAUTION&gt;
        &lt;BLOCKED&gt;27&lt;/BLOCKED&gt;
        &lt;NOTRUN&gt;3776&lt;/NOTRUN&gt;
      &lt;/ROW&gt;
    &lt;/RESULTS&gt;
  &lt;/Report&gt;
  </code></pre>
  
  <p>By an online Project Management tool I only have the capabilities of transforming this data using xslt version 1.0 and SVG. </p>
  
  <p><strong>What I want</strong>: a simple bar graph (this data will change with different projects by the way - so not THIS specific data necessarily).</p>
  
  <p>This is what I've tried and I know probably looks like a terrible construction because I'm trying to follow things that look similar online. </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
  xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;xsl:output method="xml" indent="yes"/&gt;
  &lt;xsl:template match="/RESULTS"&gt;
    &lt;svg width="650" height="500"&gt;
    &lt;g id="axis" transform="translate(0 500) scale(1 -1)"&gt;
    &lt;line id="axis-y" x1="30" y1="20" x2="30" y2="450" style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/&gt;
    &lt;line id="axis-x" x1="30" y1="20" x2="460" y2="20"  style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/&gt;
    &lt;/g&gt;  
    &lt;xsl:for-each select="ROW"&gt;
     &lt;g id="bars" transform="translate(30 479) scale(1 -430)"&gt;
      &lt;rect x="30" y="0" width="50" height="{PASSED}"  style="fill:rgb(81,223,13);stroke:rgb(0,0,0);stroke-width:0"/&gt;     
      &lt;rect x="100" y="0" width="50" height="{FAILED}"  style="fill:rgb(224,12,12);stroke:rgb(0,0,0);stroke-width:0"/&gt;  
      &lt;rect x="170" y="0" width="50" height="{CAUTION}"  style="fill:rgb(245,136,37);stroke:rgb(0,0,0);stroke-width:0"/&gt;  
      &lt;rect x="240" y="0" width="50" height="{BLOCKED}"  style="fill:rgb(248,241,7);stroke:rgb(0,0,0);stroke-width:0"/&gt;  
      &lt;rect x="310" y="0" width="50" height="{NOTRUN}"  style="fill:rgb(180,180,180);stroke:rgb(0,0,0);stroke-width:0"/&gt;  
    &lt;/g&gt; 
  
      &lt;g id="ROW"&gt;
        &lt;rect id="PASSED" x="430" y="80" width="25" height="15"  style="fill:rgb(81,223,13);stroke:rgb(0,0,0);stroke-width:1"/&gt;
        &lt;rect id="FAILED" x="430" y="100" width="25" height="15"  style="fill:rgb(224,12,12);stroke:rgb(0,0,0);stroke-width:1"/&gt;
        &lt;rect id="CAUTION" x="430" y="120" width="25" height="15"  style="fill:rgb(245,136,37);stroke:rgb(0,0,0);stroke-width:1"/&gt;
        &lt;rect id="BLOCKED" x="430" y="140" width="25" height="15"  style="fill:rgb(248,241,7);stroke:rgb(0,0,0);stroke-width:1"/&gt;
        &lt;rect id="NOTRUN" x="430" y="160" width="25" height="15"  style="fill:rgb(180,180,180);stroke:rgb(0,0,0);stroke-width:1"/&gt;
    &lt;/g&gt;
      &lt;text id="PASSED-text" x="465px" y="92px"  style="fill:rgb(0,0,0);font-size:18;font-family:Arial"&gt;  
          &lt;xsl:value-of select="PASSED"/&gt; - Passed  &lt;/text&gt;  
      &lt;text id="FAILED-text" x="465px" y="112px"  style="fill:rgb(0,0,0);font-size:18;font-family:Arial"&gt;  
          &lt;xsl:value-of select="FAILED"/&gt; - Failed &lt;/text&gt;  
      &lt;text id="key3-text" x="465px" y="132px"  style="fill:rgb(0,0,0);font-size:18;font-family:Arial"&gt;  
          &lt;xsl:value-of select="CAUTION"/&gt; - Caution &lt;/text&gt;  
      &lt;text id="key4-text" x="465px" y="152px"  style="fill:rgb(0,0,0);font-size:18;font-family:Arial"&gt;  
          &lt;xsl:value-of select="BLOCKED"/&gt; - Blocked &lt;/text&gt;  
      &lt;text id="key5-text" x="465px" y="172px"  style="fill:rgb(0,0,0);font-size:18;font-family:Arial"&gt;  
          &lt;xsl:value-of select="NOTRUN"/&gt; - Not Run &lt;/text&gt; 
    &lt;g id="title"&gt;
        &lt;text x="325px" y="20px"  style="text-anchor:middle;fill:rgb(0,0,0);font-size:24;font-family:Arial"&gt;
        &lt;xsl:value-of select="title"/&gt;  &lt;/text&gt;
    &lt;/g&gt;
   &lt;/xsl:for-each&gt;
   &lt;/svg&gt;
   &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>As the graph image show: <img src="https://i.stack.imgur.com/sKtCF.jpg" alt="enter image description here"> </p>
  
  <p>the bars aren't pulling in the correct height. Everything is clearly not scaled right and I just don't know how to do it.</p>