I'll think of a good title later

Edit: thanks to a lead from Jeff I've fixed the mime-type issue for FireFox, the chart is now viewable direct from the server (although positioning is still out). Still broken in Opera though

My pet project for the past few days has I have to say ended in disappointment.

The idea was simple: Take an XML document, transform it using XSL into an XHTML document that contains a block (or blocks) of SVG that calls a javascript function which further transforms the SVG via the DOM with values calculated using the Math object. Then we bounce the signal back into the aerosphere up to COMSAT 6, beam it back to SATCOM 2 transmitter number 137 and down on the dish on the back of Mr. Big's limo... It's almost too easy.

Well, it started off simple then mutated into the above. In more practical terms I wanted to take name+value pairs from an xml file & use XSL to create a pie chart drawn using SVG.

This guy did it back in 2003 but that solution uses java to calculate the coordinates for each slice which I thought could be done just as easily in javascript & I don't really like the look of the resulting chart. I wanted a much sharper diagram with proper labels. There are a number of other attempts at using svg as a charting tool on the web dating around 2003-2005 but they all seem to go so far, then stop. I found this odd, XML & SVG are ideally suited for the task surely?

You can take a look at my results here. What? you can't see anything? Well I did say I was disappointed, but I think I have found out why XML+SVG charting has only gone so far - browser inconsistancies.

Opera handles the whole thing fine when it is hosted on your local machine where the XML can be served as text/xml. Grab the xml, xsl, css & js files & save them all in the same directory (right click & save as to ensure you get the correct filenames - Opera & other browsers will change the .xsl extension to .xml (another bug?)). Load the xml file in Opera to behold my masterpiece. Load the XML file in your text editor of choice & change the values, add new data, change the mergevaluesunder value, save & refresh. The xsl & js files will sort, calculate & draw all the segments & reposition all the labels with reasonable intelligence. It also supports multiple pie charts one after the other by having multiple <bands> (although if you scroll down then refresh the page Opera draws the SVG & XHTML over the top of each other (scroll up & refresh to magically fix it), I'll try & build a simpler test case for a bug report later in the week).

Sadly though when the XML is served as application/xml (as it is from the MyOpera servers) it doesn't work & at the moment seems to be a likely candidate for another bug report.

Even on a local machine Firefox & IE throw back XSL processing errors because they can't handle XHTML as an output type.

Changing:

<xsl:output method="xhtml"/>

to:

<xsl:output method="html"/>

in the XSL file sort of solves the problem in that FireFox now displays the chart albeit with the positioning borked to the left somewhat (Edit: in FireFox getComputedTextLength() always returns 0). IE stops returning the XSLT processing error & returns the HTML but not the SVG. It unfortunately also breaks Opera which (correctly) won't display SVG inline inside an HTML document (because HTML isn't actually XML), the SVG Wiki & the Mozilla developer pages say that Moz should behave this way too, but evidently it doesn't.

Those in the know will be able to pick up from the source of the files that I was intending to add more templates for different & more useful charts. But I suppose XML, XSL & SVG are still in their infancy & implementation inconsistancies are only to be expected. Still, I've learnt a lot & I think there are some useful bits of code that others might find interesting which is why I throw it out into the interweb.

Looks like this is something I'll come back to.