Visualize Events On A Timeline Using Canvas - Ironsys Timeline
File Size: | 8.68 KB |
---|---|
Views Total: | 3365 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.ironsys.timeline.js"></script>
2. Create a container to hold the canvas element on which the timeline will render.
<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:
var data = [ { "time": "2012-06-03 00:01:02", "entity": "jQuery", "value": "Event 1" }, { "time": "2018-06-03 00:01:02", "entity": "Script", "value": "Event 2" }, { "time": "2020-06-03 00:01:02", "entity": "Net", "value": "Event 3" }, // ... more events here ... ];
4. Initialize the plugin to render a basic timeline on your page.
$('#timeline').timeline({ data: data });
5. Determine whether to aggregate the sames values that comes from the same data source. Default: false.
$('#timeline').timeline({ data: data, aggregateValues: true });
6. Determine whether to aggregate the sames values that comes from the same data source. Default: false.
$('#timeline').timeline({ data: data, aggregateValues: true });
7. Determine the direction of the timeline. Default: 'down'.
$('#timeline').timeline({ data: data, direction: 'up' });
8. Determine whether or not to show entities and values. Default: true.
$('#timeline').timeline({ data: data, showEntities: false, showDates: false });
9. Customize the appearance of the timeline.
$('#timeline').timeline({ data: data, autoUnitSize: true, borderWidth: 2, colors: [ { "bgcolor": "#FF0000", "bordercolor": "#A60000" ,"fgcolor": "#FFFFFF" }, { "bgcolor": "#00AA00", "bordercolor": "#006F00" ,"fgcolor": "#FFFFFF" }, { "bgcolor": "#0086FF", "bordercolor": "#0057A6" ,"fgcolor": "#FFFFFF" }, { "bgcolor": "#FF8900", "bordercolor": "#A65900" ,"fgcolor": "#FFFFFF" }, { "bgcolor": "#FF0086", "bordercolor": "#A60057" ,"fgcolor": "#FFFFFF" }, { "bgcolor": "#8900FF", "bordercolor": "#5900A6" ,"fgcolor": "#FFFFFF" } ], cornerRadius: 10, dateColor: "#888888", dateFontSize: 10, dateMarginY: 2, dateMarginX: 8, entityCornerRadius: 5, entityFontSize: 14, entityPaddingX: 6, entityPaddingY: 3, fontFace: "Arial", fontSize: 16, lineColor: "#888888", lineWidth: 2, offset: 50, paddingX: 10, paddingY: 6, unitSize: 50 });
This awesome jQuery plugin is developed by alex-ironsys. For more Advanced Usages, please check the demo page or visit the official website.