SVG Charts

An XSLT program to render numerical data as SVG charts.

How does it work?

Put your numbers in a simple XML structure and run svgchart.xslt on your XML file to get an SVG graphic.

svgchart.xslt was tested with Saxon 6.5.3. Currently only one kind of chart is supported:

Pie Charts

1. To render percentages as a pie chart, you have to generate an XML instance like pie.xml. It looks like this:

   <lw:chart xmlns:lw="http://www.linkwerk.com/namespaces/2005-06-09/svg/charts/">

   <lw:pie width="10cm" height="10cm">

   <!-- Sum of segment values equals 100 (%) -->

   <lw:segment color="red">

   30

   </lw:segment>

   <lw:segment color="#00ff00">

   14

   </lw:segment>

   <lw:segment color="blue">

   20

   </lw:segment>

   <lw:segment color="yellow">

   17

   </lw:segment>

   <lw:segment color="black">

   19

   </lw:segment>

   </lw:pie>

   </lw:chart>

   <!-- Generated with xml2html.xslt, Linkwerk.com -->

2. Run svgchart.xslt on your XML and you get pie.svg.

3. View the SVG in your favourite SVG viewer or rasterize it as a bitmap. For example, using Batik:

       java -jar batik-rasterizer.jar pie.svg

   The resulting pie.png:

   

What's next?

SVG Charts is just a tiny demonstration project. I'd like it to support more chart types (i.e. bar charts and more), 3D charts, animations etc., but since I don't get money from the project I can't spend too much time. If you're interested in other chart types, you should (a) implement them on yourself or (b) check back every few month; BTW: I will post updates in our News.

I will add an XML and Relax NG schema for the input XML. For now, here's a DTD, that does not care about the Namespace. Use the DTD just for your information, not to validate the input XML:

<!ELEMENT chart     (pie)>
<!ELEMENT pie       (segment+)>
<!ATTLIST pie       width CDATA #REQUIRED
                    height CDATA #REQUIRED>
<!ELEMENT segment   (#PCDATA)>
<!ATTLIST segment   color CDATA #REQUIRED>

Legal information

Last, but not least: The program was written by me, Stefan Mintert. It's copyrighted. If you want to use it, read the licence.

Acknowledgments

Thanks to Thomas Meinike for fixing a bug with segments greater 180 degrees. More about segments of circles with JavaScript on Thomas' SVG site.