This time I will share jQuery Plugin and tutorial about Visualize Events On A Timeline Using Canvas – Ironsys Timeline, hope it will help you in programming stack.
Ironsys Timeline is a simple, customizable jQuery data visualization plugin to visualize time based events on a timeline using canvas.
How to use it:
1. Load the JavaScript jquery.ironsys.timeline.js
after loading the latest jQuery library.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/jquery.ironsys.timeline.js" ></ script > |
2. Create a container to hold the canvas element on which the timeline will render.
1 |
< div id = "timeline" ></ div > |
3. Prepare your events to be visualized on the time. Each event should have ‘time’, ‘entity’, and ‘value’ fields as follows:
2 |
{ "time" : "2012-06-03 00:01:02" , "entity" : "jQuery" , "value" : "Event 1" }, |
3 |
{ "time" : "2018-06-03 00:01:02" , "entity" : "Script" , "value" : "Event 2" }, |
4 |
{ "time" : "2020-06-03 00:01:02" , "entity" : "Net" , "value" : "Event 3" }, |
4. Initialize the plugin to render a basic timeline on your page.
1 |
$( '#timeline' ).timeline({ |
5. Determine whether to aggregate the sames values that comes from the same data source. Default: false.
1 |
$( '#timeline' ).timeline({ |
6. Determine whether to aggregate the sames values that comes from the same data source. Default: false.
1 |
$( '#timeline' ).timeline({ |
7. Determine the direction of the timeline. Default: ‘down’.
1 |
$( '#timeline' ).timeline({ |
8. Determine whether or not to show entities and values. Default: true.
1 |
$( '#timeline' ).timeline({ |
9. Customize the appearance of the timeline.
01 |
$( '#timeline' ).timeline({ |
06 |
{ "bgcolor" : "#FF0000" , "bordercolor" : "#A60000" , "fgcolor" : "#FFFFFF" }, |
07 |
{ "bgcolor" : "#00AA00" , "bordercolor" : "#006F00" , "fgcolor" : "#FFFFFF" }, |
08 |
{ "bgcolor" : "#0086FF" , "bordercolor" : "#0057A6" , "fgcolor" : "#FFFFFF" }, |
09 |
{ "bgcolor" : "#FF8900" , "bordercolor" : "#A65900" , "fgcolor" : "#FFFFFF" }, |
10 |
{ "bgcolor" : "#FF0086" , "bordercolor" : "#A60057" , "fgcolor" : "#FFFFFF" }, |
11 |
{ "bgcolor" : "#8900FF" , "bordercolor" : "#5900A6" , "fgcolor" : "#FFFFFF" } |
18 |
entityCornerRadius: 5, |
This awesome jQuery plugin is developed by alex-ironsys. For more Advanced Usages, please check the demo page or visit the official website.