Drawing graphs using SVG and XML

Right, Just after a little bit of input here really on what the best way to go about this is. I have an XML file like so:

<Projects>
    <project>
        <ID>1234</ID>
        <DATE>17/05/2011</DATE>
        <TYPE>STAGE</TYPE>
    </project>
    <project>
         <ID>1234</ID>
         <DATE>19/05/2011</DATE>
         <TYPE>HOLDING</TYPE>
    </project>
 </Projects>

From this XML I need to generate a bar graph, with an SVG rectangle for each 'TYPE' going horizontally with the date. If the ID is the same (as above) the second rectangle for 'holding' would site next to the first rectangle for 'STAGE'. The length of the rectangle will be decided by the difference in dates. Each different project (by ID) will have a new line. The graph will need to have IDs up the y axis and date along the x axis.

I am new to SVG a开发者_开发技巧nd would like to know what people would suggest to build such a graph?

Thanks

---

Are you planning on this SVG being displayed in a web browser?

If so, would a browser-based Javascript library such as Raphael (or it's graphing-specific add-on gRaphael) be of any use?

Raphael allows you to generate SVG dynamically in the browser.

Failing that, the next best solution I can think of would be using XSL to transform the input XML into SVG, but that's going to be hard work.