Drawing A Simple Horizontal Timeline with jQuery and SVG - timeframe.js

timeframe.js is an easy-to-use jQuery plugin that draws a simple, horizontal, intuitive and SVG based timeline in your web project.

How to use it:

1. Load jQuery JavaScript library and the jQuery timeframe.js script in the project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="lib/timeframe.js"></script>

2. Create an empty element that will serve as the container for your timeline.

<div id="timeframe"></div>

3. Add your custom events for the timeline.

var starWarsFilms = {
  name: "Star Wars Films",
  color: "#000000",
  events: [
    {
      name: "A New Hope",
      date: "1977-05-25"
    },
    {
      name: "The Empire Strikes Back",
      date: "1980-05-21"
    },
    {
      name: "Return of the Jedi",
      date: "1983-05-25"
    }
  ]
};

4. Set the start/end date and draw a timeline inside the empty container you just created.

var t = Timeframe("#timeframe")
  .addCategory(starWarsFilms)
  .start("1975-01-01")
  .end("1985-01-01")
  .draw();

5. Default options.

tickHeight: 8,
extHeight: 10

---

This awesome jQuery plugin is developed by andrewjensen. For more Advanced Usages, please check the demo page or visit the official website.