Using XSLT to create SVG



I have an XML file that stores data about classes at a school. I'm just starting to mess around with SVG, so made an SVG file to represent the enrollment numbers in each class. Here's a shrunken version of what I came up with:


enter image description here


The first bar represents the 25 students enrolled in the first class and so on.


Since I've also learned some basic XSLT, I'd like to see if I can pull in those enrollment numbers from the XML file posted below instead of just putting the numbers in manually (like I did to create the image above) since that is too easy. That is where I'm having trouble. I have most of the info correct I believe, but if you take a look at my XSLT file below, you'll see I have the height of each rectangle set to 15 and I would like to multiply that by the enrollment number (so the height of the first bar should be 15*25, with the 25 being pulled from the XML file via XSLT. The second bar should be 15*20, since the enrollment of the second class is 20, and so on). I started out well and I think I'm close, but after I started adding templates, the bars disappeared. Any help would be appreciated!


Current XSLT file:



<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://ift.tt/tCZ8VR">

<!-- main template -->
<xsl:template match="/">
<!-- root element is svg and its namespace -->
<svg version="1.0"
xmlns="http://ift.tt/nvqhV5">


<!-- Vertical red line -->
<line x1="30" y1="35" x2="30" y2="500"
style="stroke:rgb(255,0,0);stroke-width: 3" />
<!-- Horizontal red line -->
<line x1="30" y1="500" x2="500" y2="500"
style="stroke:rgb(255,0,0);stroke-width: 3" />

<!-- apply templates to display rectangle bars-->
<xsl:apply-templates select="courses/course/enrollment" />
</svg>
</xsl:template>

<!-- Rectangle 1 template -->
<xsl:template match="enrollment[1]">
<!-- Blue Rectangle 1 (341-01) -->
<rect x="40" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 2 template -->
<xsl:template match="enrollment[2]">
<!-- Blue Rectangle 2 (341-02) -->
<rect x="100" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 3 template -->
<xsl:template match="enrollment[3]">
<!-- Blue Rectangle 3 (341-03) -->
<rect x="160" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 4 template -->
<xsl:template match="enrollment[4]">
<!-- Blue Rectangle 4 (368-01) -->
<rect x="220" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 4 template -->
<xsl:template match="enrollment[4]">
<!-- Blue Rectangle 5 (375-01) -->
<rect x="280" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 4 template -->
<xsl:template match="enrollment[4]">
<!-- Blue Rectangle 6 (385-01) -->
<rect x="340" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>

<!-- Rectangle 5 template -->
<xsl:template match="enrollment[5]">
<!-- Blue Rectangle 7 (413-01) -->
<rect x="400" y="{500-@height}" width="30" height="{15*.}"
style="fill:rgb(255,0,0);stroke-width: 3;stroke:rgb(0,0,0)" />
</xsl:template>
</xsl:stylesheet>


XML file:



<?xml version="1.0" encoding="UTF-8"?>
<courses>
<course number="3221" credits="4.0">
<title>Physics</title>
<section number="01" delivery="Classroom">
<enrollment>25</enrollment>
<room>EA244</room>
<instructor>
<first>Herman</first>
<last>Johnson</last>
</instructor>
</section>
<section number="02" delivery="Online">
<enrollment>20</enrollment>
<instructor>
<first>Herman</first>
<last>Johnson</last>
</instructor>
<instructor>
<first>Mike</first>
<last>Miller</last>
</instructor>
</section>
<section number="03" delivery="Classroom">
<enrollment>12</enrollment>
<room>SH102</room>
<instructor>
<first>Allison</first>
<last>Sweeney</last>
</instructor>
</section>
</course>
<course number="1318" credits="4.0">
<title>Psychology</title>
<section number="01" delivery="Classroom">
<enrollment>9</enrollment>
<room>AT102</room>
<instructor>
<first>Mike</first>
<last>Miller</last>
</instructor>
<instructor>
<first>Alex</first>
<last>Holmquist</last>
</instructor>
</section>
</course>
<course number="3715" credits="4.0">
<title>Biology</title>
<section number="01" delivery="ITV">
<enrollment>18</enrollment>
<room>EA244</room>
<instructor>
<first>Mike</first>
<last>Miller</last>
</instructor>
</section>
</course>
<course number="3815" credits="3.0">
<title>Calculus</title>
<section number="01" delivery="Classroom">
<enrollment>16</enrollment>
<room>ST108</room>
<instructor>
<first>Herman</first>
<last>Johnson</last>
</instructor>
</section>
</course>
<course number="4113" credits="3.0">
<title>Chemistry</title>
<section number="01" delivery="Online">
<enrollment>20</enrollment>
<instructor>
<first>Mike</first>
<last>Miller</last>
</instructor>
</section>
</course>
</courses>

No comments:

Post a Comment