timeline canvas ironsys - Free Download Visualize Events On A Timeline Using Canvas - Ironsys Timeline

Free Download Visualize Events On A Timeline Using Canvas – Ironsys Timeline

Posted on

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.

timeline canvas ironsys - Free Download Visualize Events On A Timeline Using Canvas - Ironsys Timeline
File Size: 8.68 KB
Views Total: 1681
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.

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:

1 var data = [
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" },
5     // ... more events here ...
6 ];

4. Initialize the plugin to render a basic timeline on your page.

1 $('#timeline').timeline({
2   data: data
3 });

5. Determine whether to aggregate the sames values that comes from the same data source. Default: false.

1 $('#timeline').timeline({
2   data: data,
3   aggregateValues: true
4 });

6. Determine whether to aggregate the sames values that comes from the same data source. Default: false.

1 $('#timeline').timeline({
2   data: data,
3   aggregateValues: true
4 });

7. Determine the direction of the timeline. Default: ‘down’.

1 $('#timeline').timeline({
2   data: data,
3   direction: 'up'
4 });

8. Determine whether or not to show entities and values. Default: true.

1 $('#timeline').timeline({
2   data: data,
3   showEntities: false,
4   showDates: false
5 });

9. Customize the appearance of the timeline.

01 $('#timeline').timeline({
02   data: data,
03   autoUnitSize: true,
04   borderWidth: 2,
05   colors: [
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" }
12   ],
13   cornerRadius: 10,
14   <a href="https://www.jqueryscript.net/time-clock/">date</a>Color: "#888888",
15   dateFontSize: 10,
16   dateMarginY: 2,
17   dateMarginX: 8,
18   entityCornerRadius: 5,
19   entityFontSize: 14,
20   entityPaddingX: 6,
21   entityPaddingY: 3,
22   fontFace: "Arial",
23   fontSize: 16,
24   lineColor: "#888888",
25   lineWidth: 2,
26   offset: 50,
27   paddingX: 10,
28   paddingY: 6,
29   unitSize: 50
30 });

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