Drawing A Simple Horizontal Timeline with jQuery and SVG - timeframe.js
File Size: | 6.71 KB |
---|---|
Views Total: | 19851 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.