Visualize Events On A Timeline Using Canvas - Ironsys Timeline

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.