jQuery Plugin For Canvas Based Historical Timeline - YEARLINE

YEARLINE is a jQuery plugin which uses Html5 Canvas element to render a historical timeline from plain text.

How to use it:

1. Include jQuery JavaScript library and the jQuery Yearline plugin at the bottom of your web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="yearline.js"></script>

2. Create a DIV element and add your events separated by '***' to the timeline.

<div class="myYearline">
  ***
  2015
  Headline 1
  Event text. Importance 5.
  5
  
  ***
  2010
  Headline 2
  Event text. Importance 1.
  1
  
  ***
  2005
  Headline 3
  Event text. Importance 2.
  2
</div>

3. Call the function on the DIV element to generate a historical timeline based on year.

$('.myYearline').yearline({
    // options
});  

4. Add the primary CSS styles as displayed below to your CSS file.

.timelineEvent { margin-right: 5px; }

.timelineHeading {
  border-bottom: 1px solid black;
  text-transform: uppercase;
}

.timelineTitle { }

.timelineText {
  padding: 2px;
  border: 1px solid black;
  border-top: none;
}

.timelineHiddenObject { display: none; }

.timelineCat1 {
  background-color: #000;
  z-index: 99;
}

.timelineCat2 {
  z-index: 98;
  background-color: #333;
}

.timelineCat3 {
  z-index: 97;
  background-color: #666;
}

.timelineCat4 {
  z-index: 96;
  background-color: #888;
}

.timelineCat5 {
  z-index: 95;
  background-color: #999;
}

.timelineBringToFront { z-index: 100 !important; }

5. Plugin's default options.

// background color
backgroundColor: "white",

// width/height of the timeline
width: 400,
height: 300,

// google font
font: "Roboto",

// text color
dataText: "#e0e0e0",

// padding
padding: 4,

---

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