Quantcast
Channel: Don't call me DOM » Web development
Viewing all articles
Browse latest Browse all 15

Timeline in SVGs

$
0
0

I wrote a year ago an XSLT style sheet that can be handy in creating graphical timelines: it takes a simple XML file describing the said timeline, and turns it into an SVG image.

The XML file should look like:

<timeline>
  <start>2009-01-01</start>
  <end>2009-12-31</end>
  <line>
   <bar><start>2009-01</start><end>2009-05</end><name>Task A.1</name></bar>
   <bar><start>2009-07</start><end>2009-10</end><name>Task A.2</name></bar>

  </line>
  <line>
   <bar><start>2009-01</start><end>2009-08</end><name>Task B</name></bar>
  </line>

</timeline>

And turns it into an SVG timeline that looks like:

Rendering of the XML timeline above

It could use some graphical enhancements, a better SVG markup, and many other improvements, but since I already had a couple of occasions to use it for my own purposes, I’m assuming it might serve as useful inspiration for others who would need something similar.


Viewing all articles
Browse latest Browse all 15

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>