XSLT

Main exercises

Get all Oasis hits as an XML file by typing into your browser:
```
http://edward/dfti/xmlhits.php?artist=Oasis
```
and save the result as an XML file.
Write an XSLT stylesheet to write out the songs as an HTML page.
Change your answer so that the songs are written out as a table.
Change your answer so that only songs which reached the top 5 (i.e. chart position is 1, 2, 3, 4 or 5) are shown.
Do the "templates" exercise in the "Advanced XSLT Topics" notes for this week.

Advanced exercise

Scalable Vector Graphics (SVG) is an XML based graphics format which uses tags to describe the graphics. For example:

<svg width="200px" height="400px" xmlns="http://www.w3.org/2000/svg">
<style type='text/css'>
rect{fill:red; stroke:blue}
</style>
<rect x="0" y="300" width="50" height="100" />
<rect x="50" y="200" width="50" height="200" />
<rect x="100" y="350" width="50" height="50" />
<rect x="150" y="250" width="50" height="150" />
</svg>

Write an XSLT stylesheet to convert this data to an SVG bar graph:

<?xml version='1.0'?>
<?xml-stylesheet type='text/xsl' href='toSVG1.xsl'?>
<sales>
<sale>1000</sale>
<sale>1500</sale>
<sale>2000</sale>
<sale>5000</sale>
</sales>

The bar graph should have a width of 200 pixels and height of 400 pixels. The attributes of each bar on the graph should be:

x: the column number * 50;
y: 400 - (the monthly sale divided by 20)
width: 50
height: (the monthly sale divided by 20)

You'll need to do some basic arithmetic for this, as well as use the techniques for reading and writing attributes discussed in the advanced notes. You'll need to know that:

You must use the keyword div for division;
The XSLT function position() will return the index of a child tag within the parent tag. So if you do:
```
<xsl:value-of select="position()" />
```
within a tag, you'll be able to get the index of the current <sale>tag, which you'll need for the column number.

You'll need to use a browser other than Internet Explorer to test this, as Internet Explorer is the only common browser that does not support SVG!