You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

5812 lines
126 KiB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="JsDoc Toolkit" />
<title>JsDoc Reference - links.Timeline</title>
<style type="text/css">
/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
}
.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}
h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index
{
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content
{
margin-left: 190px;
width: 600px;
}
.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li
{
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle
{
font-size:170%;
line-height:130%;
}
h2 { font-size: 110%; }
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont
{
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription
{
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description
{
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading
{
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited
{
color: #777;
font-style: italic;
}
.fineprint
{
text-align: right;
font-size: 10px;
}
</style>
</head>
<body>
<!-- ============================== header ================================= -->
<!-- begin static/header.html -->
<div id="header">
</div>
<!-- end static/header.html -->
<!-- ============================== classes index ============================ -->
<div id="index">
<!-- begin publish.classesIndex -->
<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
<li><a href="../symbols/Array.html">Array</a></li>
<li><a href="../symbols/links.Timeline.html">links.Timeline</a></li>
<li><a href="../symbols/links.Timeline.ClusterGenerator.html">links.Timeline.ClusterGenerator</a></li>
<li><a href="../symbols/links.Timeline.Item.html">links.Timeline.Item</a></li>
<li><a href="../symbols/links.Timeline.ItemBox.html">links.Timeline.ItemBox</a></li>
<li><a href="../symbols/links.Timeline.ItemDot.html">links.Timeline.ItemDot</a></li>
<li><a href="../symbols/links.Timeline.ItemFloatingRange.html">links.Timeline.ItemFloatingRange</a></li>
<li><a href="../symbols/links.Timeline.ItemRange.html">links.Timeline.ItemRange</a></li>
<li><a href="../symbols/links.Timeline.StepDate.html">links.Timeline.StepDate</a></li>
</ul>
<hr />
<!-- end publish.classesIndex -->
</div>
<div id="content">
<!-- ============================== class title ============================ -->
<h1 class="classTitle">
Class links.Timeline
</h1>
<!-- ============================== class summary ========================== -->
<p class="description">
<br /><i>Defined in: </i> <a href="../symbols/src/timeline.js.html">timeline.js</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class links.Timeline.">
<caption>Class Summary</caption>
<thead>
<tr>
<th scope="col">Constructor Attributes</th>
<th scope="col">Constructor Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription" >
<div class="fixedFont">
<b><a href="../symbols/links.Timeline.html#constructor">links.Timeline</a></b>(container, options)
</div>
<div class="description"></div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== properties summary ===================== -->
<!-- ============================== methods summary ======================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class links.Timeline.">
<caption>Method Summary</caption>
<thead>
<tr>
<th scope="col">Method Attributes</th>
<th scope="col">Method Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.addClassName">addClassName</a></b>(elem, className)
</div>
<div class="description">Adds one or more className's to the given elements style</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.addEventListener">addEventListener</a></b>(element, action, listener, useCapture)
</div>
<div class="description">Add and event listener.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#addItem">addItem</a></b>(itemData, preventRender)
</div>
<div class="description">Add a new item.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#addItems">addItems</a></b>(itemsData, preventRender)
</div>
<div class="description">Add new items.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#addItemType">addItemType</a></b>(typeName, typeFactory)
</div>
<div class="description">Add new type of items</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#applyRange">applyRange</a></b>(start, end, zoomAroundDate)
</div>
<div class="description">Apply a visible range.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#cancelAdd">cancelAdd</a></b>()
</div>
<div class="description">Cancel creation of a new item
This method can be called insed an event listener which catches the "new"
event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#cancelChange">cancelChange</a></b>()
</div>
<div class="description">Cancel a change item
This method can be called insed an event listener which catches the "change"
event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#cancelDelete">cancelDelete</a></b>()
</div>
<div class="description">Cancel deletion of an item
This method can be called insed an event listener which catches the "delete"
event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#changeItem">changeItem</a></b>(index, itemData, preventRender)
</div>
<div class="description">Edit an item</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#checkResize">checkResize</a></b>()
</div>
<div class="description">Check if the timeline is resized, and if so, redraw the timeline.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#clearItems">clearItems</a></b>()
</div>
<div class="description">This method clears the (internal) array this.items in a safe way: neatly
cleaning up the DOM, and accompanying arrays this.renderedItems and
the created clusters.</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.clone">clone</a></b>(object)
</div>
<div class="description">Shallow clone an object</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#clusterItems">clusterItems</a></b>()
</div>
<div class="description">Cluster the events</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#collision">collision</a></b>(item1, item2, margin)
</div>
<div class="description">Test if the two provided items collide
The items must have parameters left, right, top, and bottom.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#confirmDeleteItem">confirmDeleteItem</a></b>(index)
</div>
<div class="description">Delete an item after a confirmation.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#createItem">createItem</a></b>(itemData)
</div>
<div class="description">Create an item object, containing all needed parameters</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#deleteAllItems">deleteAllItems</a></b>()
</div>
<div class="description">Delete all items</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#deleteGroups">deleteGroups</a></b>()
</div>
<div class="description">Delete all groups</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#deleteItem">deleteItem</a></b>(index, preventRender)
</div>
<div class="description">Delete an item</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#draw">draw</a></b>(data, options)
</div>
<div class="description">Main drawing logic.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#filterItems">filterItems</a></b>()
</div>
<div class="description">Filter the visible events</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#finalItemsPosition">finalItemsPosition</a></b>(items, groupBase, group)
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.getAbsoluteLeft">getAbsoluteLeft</a></b>(elem)
</div>
<div class="description">Retrieve the absolute left value of a DOM element</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.getAbsoluteTop">getAbsoluteTop</a></b>(elem)
</div>
<div class="description">Retrieve the absolute top value of a DOM element</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getCluster">getCluster</a></b>(index)
</div>
<div class="description">Retrieve the properties of a cluster.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getClusterIndex">getClusterIndex</a></b>(element)
</div>
<div class="description">Find the cluster index from a given HTML element
If no cluster index is found, undefined is returned</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getCurrentTime">getCurrentTime</a></b>()
</div>
<div class="description">Get current time.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getCustomTime">getCustomTime</a></b>()
</div>
<div class="description">Retrieve the current custom time.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getData">getData</a></b>()
</div>
<div class="description">Return the original data table.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getDataRange">getDataRange</a></b>(withMargin)
</div>
<div class="description">Get the date range of the items.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getGroup">getGroup</a></b>(groupName)
</div>
<div class="description">Get a group by the group name.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getGroupFromHeight">getGroupFromHeight</a></b>(height)
</div>
<div class="description">Find the group from a given height in the timeline</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getGroupName">getGroupName</a></b>(groupObj)
</div>
<div class="description">Get the group name from a group object.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getItem">getItem</a></b>(index)
</div>
<div class="description">Retrieve the properties of an item.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getItemIndex">getItemIndex</a></b>(element)
</div>
<div class="description">Find the item index from a given HTML element
If no item index is found, undefined is returned</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getItemsByGroup">getItemsByGroup</a></b>(items)
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getOptions">getOptions</a></b>()
</div>
<div class="description">Get options for the timeline.</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.getPageX">getPageX</a></b>(event)
</div>
<div class="description">Get the absolute, horizontal mouse position from an event.</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.getPageY">getPageY</a></b>(event)
</div>
<div class="description">Get the absolute, vertical mouse position from an event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getSelection">getSelection</a></b>()
</div>
<div class="description">Retrieve the currently selected event</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.getTarget">getTarget</a></b>(event)
</div>
<div class="description">Get HTML element which is the target of the event</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getVisibleChartRange">getVisibleChartRange</a></b>()
</div>
<div class="description">Retrieve the current visible range in the timeline.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#getVisibleItems">getVisibleItems</a></b>(start, end)
</div>
<div class="description">Find all elements within the start and end range
If no element is found, returns an empty array</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#initialItemsPosition">initialItemsPosition</a></b>(items, groupBase)
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.isArray">isArray</a></b>(obj)
</div>
<div class="description">Check if given object is a Javascript Array</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#isEditable">isEditable</a></b>(item)
</div>
<div class="description">Check whether a given item is editable</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#isSelected">isSelected</a></b>(index)
</div>
<div class="description">Check if an item is currently selected</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.mapColumnIds">mapColumnIds</a></b>(dataTable)
</div>
<div class="description">Retrieve a map with the column indexes of the columns by column name.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#move">move</a></b>(moveFactor)
</div>
<div class="description">Move the timeline the given movefactor to the left or right.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onDblClick">onDblClick</a></b>(event)
</div>
<div class="description">Double click event occurred for an item</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onMouseDown">onMouseDown</a></b>(event)
</div>
<div class="description">Start a moving operation inside the provided parent element</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onMouseMove">onMouseMove</a></b>(event)
</div>
<div class="description">Perform moving operating.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onMouseUp">onMouseUp</a></b>(event)
</div>
<div class="description">Stop moving operating.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onMouseWheel">onMouseWheel</a></b>(event)
</div>
<div class="description">Event handler for mouse wheel event, used to zoom the timeline
Code from http://adomas.org/javascript-mouse-wheel/</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onTouchEnd">onTouchEnd</a></b>(event)
</div>
<div class="description">Event handler for touchend event on mobile devices</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onTouchMove">onTouchMove</a></b>(event)
</div>
<div class="description">Event handler for touchmove event on mobile devices</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#onTouchStart">onTouchStart</a></b>(event)
</div>
<div class="description">Event handler for touchstart event on mobile devices</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.parseJSONDate">parseJSONDate</a></b>(date)
</div>
<div class="description">parse a JSON date</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.preventDefault">preventDefault</a></b>(event)
</div>
<div class="description">Cancels the event if it is cancelable, without stopping further propagation of the event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#recalcConversion">recalcConversion</a></b>()
</div>
<div class="description">Calculate the factor and offset to convert a position on screen to the
corresponding date and vice versa.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#recalcItems">recalcItems</a></b>()
</div>
<div class="description">Recalculate item properties:
- the height of each group.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#redraw">redraw</a></b>()
</div>
<div class="description">Redraw the timeline
Reloads the (linked) data table and redraws the timeline when resized.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#reflowAxis">reflowAxis</a></b>()
</div>
<div class="description">Reflow the timeline axis.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#reflowFrame">reflowFrame</a></b>()
</div>
<div class="description">Reflow the timeline frame</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#reflowGroups">reflowGroups</a></b>()
</div>
<div class="description">Reflow the size of the groups</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#reflowItems">reflowItems</a></b>()
</div>
<div class="description">Reflow all items, retrieve their actual size</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.removeClassName">removeClassName</a></b>(elem, className)
</div>
<div class="description">Removes one or more className's from the given elements style</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.removeEventListener">removeEventListener</a></b>(element, action, listener, useCapture)
</div>
<div class="description">Remove an event listener from an element</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#render">render</a></b>(options)
</div>
<div class="description">Re-render (reflow and repaint) all components of the Timeline: frame, axis,
items, .</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaint">repaint</a></b>()
</div>
<div class="description">Repaint all components of the Timeline</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxis">repaintAxis</a></b>()
</div>
<div class="description">Redraw the timeline axis with minor and major labels</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisCharacters">repaintAxisCharacters</a></b>()
</div>
<div class="description">Create characters used to determine the size of text on the axis</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisEndOverwriting">repaintAxisEndOverwriting</a></b>()
</div>
<div class="description">End of overwriting HTML DOM elements of the axis.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisHorizontal">repaintAxisHorizontal</a></b>()
</div>
<div class="description">Repaint the horizontal line and background of the axis</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisMajorLine">repaintAxisMajorLine</a></b>(x)
</div>
<div class="description">Create a Major line for the axis at position x</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisMajorText">repaintAxisMajorText</a></b>(x, text)
</div>
<div class="description">Create a Major label for the axis at position x</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisMinorLine">repaintAxisMinorLine</a></b>(x)
</div>
<div class="description">Create a minor line for the axis at position x</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisMinorText">repaintAxisMinorText</a></b>(x, text)
</div>
<div class="description">Create a minor label for the axis at position x</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintAxisStartOverwriting">repaintAxisStartOverwriting</a></b>()
</div>
<div class="description">Initialize redraw of the axis.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintCurrentTime">repaintCurrentTime</a></b>()
</div>
<div class="description">Redraw the current time bar</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintCustomTime">repaintCustomTime</a></b>()
</div>
<div class="description">Redraw the custom time bar</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintDeleteButton">repaintDeleteButton</a></b>()
</div>
<div class="description">Redraw the delete button, on the top right of the currently selected item
if there is no item selected, the button is hidden.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintDragAreas">repaintDragAreas</a></b>()
</div>
<div class="description">Redraw the drag areas.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintFrame">repaintFrame</a></b>()
</div>
<div class="description">repaint the Timeline frame</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintGroups">repaintGroups</a></b>()
</div>
<div class="description">Redraw the group labels</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintItems">repaintItems</a></b>()
</div>
<div class="description">Repaint all items</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#repaintNavigation">repaintNavigation</a></b>()
</div>
<div class="description">Create the navigation buttons for zooming and moving</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#screenToTime">screenToTime</a></b>(x)
</div>
<div class="description">Convert a position on screen (pixels) to a datetime
Before this method can be used, the method calcConversionFactor must be
executed once.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#selectCluster">selectCluster</a></b>(index)
</div>
<div class="description">Select an cluster by its index</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#selectItem">selectItem</a></b>(index)
</div>
<div class="description">Select an item by its index</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setAutoScale">setAutoScale</a></b>(enable)
</div>
<div class="description">Enable or disable autoscaling</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setCurrentTime">setCurrentTime</a></b>(time)
</div>
<div class="description">Set current time.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setCustomTime">setCustomTime</a></b>(time)
</div>
<div class="description">Set custom time.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setData">setData</a></b>(data)
</div>
<div class="description">Set data for the timeline</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setOptions">setOptions</a></b>(options)
</div>
<div class="description">Set options for the timeline.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setScale">setScale</a></b>(scale, step)
</div>
<div class="description">Set a custom scale.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setSelection">setSelection</a></b>(selection)
</div>
<div class="description">Select an event.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setSize">setSize</a></b>(width, height)
</div>
<div class="description">Set a new size for the timeline</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setVisibleChartRange">setVisibleChartRange</a></b>(start, end, redraw)
</div>
<div class="description">Set a new value for the visible range int the timeline.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setVisibleChartRangeAuto">setVisibleChartRangeAuto</a></b>()
</div>
<div class="description">Change the visible chart range such that all items become visible</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#setVisibleChartRangeNow">setVisibleChartRangeNow</a></b>()
</div>
<div class="description">Adjust the visible range such that the current time is located in the center
of the timeline</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackCalculateFinal">stackCalculateFinal</a></b>(items)
</div>
<div class="description">Adjust vertical positions of the events such that they don't overlap each
other.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackCancelAnimation">stackCancelAnimation</a></b>()
</div>
<div class="description">Cancel any running animation</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackItems">stackItems</a></b>(animate)
</div>
<div class="description">Stack the items such that they don't overlap.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackItemsCheckOverlap">stackItemsCheckOverlap</a></b>(items, itemIndex, itemStart, itemEnd)
</div>
<div class="description">Check if the destiny position of given item overlaps with any
of the other items from index itemStart to itemEnd.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackMoveOneStep">stackMoveOneStep</a></b>(currentItems, finalItems)
</div>
<div class="description">Move the events one step in the direction of their final positions</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackMoveToFinal">stackMoveToFinal</a></b>(currentItems, finalItems)
</div>
<div class="description">Move the events from their current position to the final position</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#stackOrder">stackOrder</a></b>(items)
</div>
<div class="description">Order the items in the array this.items.</div>
</td>
</tr>
<tr>
<td class="attributes">&lt;static&gt; &nbsp;</td>
<td class="nameDescription">
<div class="fixedFont">links.Timeline.<b><a href="../symbols/links.Timeline.html#.stopPropagation">stopPropagation</a></b>(event)
</div>
<div class="description">Stop event propagation</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#timeToScreen">timeToScreen</a></b>(time)
</div>
<div class="description">Convert a datetime (Date object) into a position on the screen
Before this method can be used, the method calcConversionFactor must be
executed once.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#trigger">trigger</a></b>(event)
</div>
<div class="description">fire an event</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#unselectItem">unselectItem</a></b>()
</div>
<div class="description">Unselect the currently selected event (if any)</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#updateData">updateData</a></b>(index, values)
</div>
<div class="description">Update the original data with changed start, end or group.</div>
</td>
</tr>
<tr>
<td class="attributes">&nbsp;</td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/links.Timeline.html#zoom">zoom</a></b>(zoomFactor, zoomAroundDate)
</div>
<div class="description">Zoom the timeline the given zoomfactor in or out.</div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== events summary ======================== -->
<!-- ============================== constructor details ==================== -->
<div class="details"><a name="constructor"> </a>
<div class="sectionTitle">
Class Detail
</div>
<div class="fixedFont">
<b>links.Timeline</b>(container, options)
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>container</b>
</dt>
<dd>The DOM element in which the Timeline will
be created. Normally a div element.</dd>
<dt>
<span class="light fixedFont">{Object}</span> <b>options</b>
</dt>
<dd>A name/value map containing settings for the
timeline. Optional.</dd>
</dl>
</div>
<!-- ============================== field details ========================== -->
<!-- ============================== method details ========================= -->
<div class="sectionTitle">
Method Detail
</div>
<a name=".addClassName"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>addClassName</b>(elem, className)
</div>
<div class="description">
Adds one or more className's to the given elements style
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>elem</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{String}</span> <b>className</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name=".addEventListener"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>addEventListener</b>(element, action, listener, useCapture)
</div>
<div class="description">
Add and event listener. Works for all browsers
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>element</b>
</dt>
<dd>An html element</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>action</b>
</dt>
<dd>The action, for example "click",
without the prefix "on"</dd>
<dt>
<span class="light fixedFont">{function}</span> <b>listener</b>
</dt>
<dd>The callback function to be executed</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>useCapture</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="addItem"> </a>
<div class="fixedFont">
<b>addItem</b>(itemData, preventRender)
</div>
<div class="description">
Add a new item.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>itemData</b>
</dt>
<dd>Object containing item properties:<br>
{Date} start (required),
{Date} end (optional),
{String} content (required),
{String} group (optional)
{String} className (optional)
{Boolean} editable (optional)
{String} type (optional)</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>preventRender</b>
<i>Optional, Default: false</i>
</dt>
<dd>Do not re-render timeline if true</dd>
</dl>
<hr />
<a name="addItems"> </a>
<div class="fixedFont">
<b>addItems</b>(itemsData, preventRender)
</div>
<div class="description">
Add new items.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>itemsData</b>
</dt>
<dd>An array containing Objects.
The objects must have the following parameters:
{Date} start,
{Date} end,
{String} content with text or HTML code,
{String} group (optional)
{String} className (optional)
{String} editable (optional)
{String} type (optional)</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>preventRender</b>
<i>Optional, Default: false</i>
</dt>
<dd>Do not re-render timeline if true</dd>
</dl>
<hr />
<a name="addItemType"> </a>
<div class="fixedFont">
<b>addItemType</b>(typeName, typeFactory)
</div>
<div class="description">
Add new type of items
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{String}</span> <b>typeName</b>
</dt>
<dd>Name of new type</dd>
<dt>
<span class="light fixedFont">{<a href="../symbols/links.Timeline.Item.html">links.Timeline.Item</a>}</span> <b>typeFactory</b>
</dt>
<dd>Constructor of items</dd>
</dl>
<hr />
<a name="applyRange"> </a>
<div class="fixedFont">
<b>applyRange</b>(start, end, zoomAroundDate)
</div>
<div class="description">
Apply a visible range. The range is limited to feasible maximum and minimum
range.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date}</span> <b>start</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{Date}</span> <b>end</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{Date}</span> <b>zoomAroundDate</b>
</dt>
<dd>Optional. Date around which will be zoomed.</dd>
</dl>
<hr />
<a name="cancelAdd"> </a>
<div class="fixedFont">
<b>cancelAdd</b>()
</div>
<div class="description">
Cancel creation of a new item
This method can be called insed an event listener which catches the "new"
event. Creation of the new the event will be undone.
</div>
<hr />
<a name="cancelChange"> </a>
<div class="fixedFont">
<b>cancelChange</b>()
</div>
<div class="description">
Cancel a change item
This method can be called insed an event listener which catches the "change"
event. The changed event position will be undone.
</div>
<hr />
<a name="cancelDelete"> </a>
<div class="fixedFont">
<b>cancelDelete</b>()
</div>
<div class="description">
Cancel deletion of an item
This method can be called insed an event listener which catches the "delete"
event. Deletion of the event will be undone.
</div>
<hr />
<a name="changeItem"> </a>
<div class="fixedFont">
<b>changeItem</b>(index, itemData, preventRender)
</div>
<div class="description">
Edit an item
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{Object}</span> <b>itemData</b>
</dt>
<dd>Object containing item properties:<br>
{Date} start (required),
{Date} end (optional),
{String} content (required),
{String} group (optional)</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>preventRender</b>
<i>Optional, Default: false</i>
</dt>
<dd>Do not re-render timeline if true</dd>
</dl>
<hr />
<a name="checkResize"> </a>
<div class="fixedFont">
<b>checkResize</b>()
</div>
<div class="description">
Check if the timeline is resized, and if so, redraw the timeline.
Useful when the webpage is resized.
</div>
<hr />
<a name="clearItems"> </a>
<div class="fixedFont">
<b>clearItems</b>()
</div>
<div class="description">
This method clears the (internal) array this.items in a safe way: neatly
cleaning up the DOM, and accompanying arrays this.renderedItems and
the created clusters.
</div>
<hr />
<a name=".clone"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Object}</span>
<span class="light">links.Timeline.</span><b>clone</b>(object)
</div>
<div class="description">
Shallow clone an object
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>object</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> clone</dd>
</dl>
<hr />
<a name="clusterItems"> </a>
<div class="fixedFont">
<b>clusterItems</b>()
</div>
<div class="description">
Cluster the events
</div>
<hr />
<a name="collision"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>collision</b>(item1, item2, margin)
</div>
<div class="description">
Test if the two provided items collide
The items must have parameters left, right, top, and bottom.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>item1</b>
</dt>
<dd>The first item</dd>
<dt>
<span class="light fixedFont">{Element}</span> <b>item2</b>
</dt>
<dd>The second item</dd>
<dt>
<span class="light fixedFont">{Number}</span> <b>margin</b>
</dt>
<dd>A minimum required margin. Optional.
If margin is provided, the two items will be
marked colliding when they overlap or
when the margin between the two is smaller than
the requested margin.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> true if item1 and item2 collide, else false</dd>
</dl>
<hr />
<a name="confirmDeleteItem"> </a>
<div class="fixedFont">
<b>confirmDeleteItem</b>(index)
</div>
<div class="description">
Delete an item after a confirmation.
The deletion can be cancelled by executing .cancelDelete() during the
triggered event 'delete'.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{int}</span> <b>index</b>
</dt>
<dd>Index of the item to be deleted</dd>
</dl>
<hr />
<a name="createItem"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>createItem</b>(itemData)
</div>
<div class="description">
Create an item object, containing all needed parameters
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>itemData</b>
</dt>
<dd>Object containing parameters start, end
content, group.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> item</dd>
</dl>
<hr />
<a name="deleteAllItems"> </a>
<div class="fixedFont">
<b>deleteAllItems</b>()
</div>
<div class="description">
Delete all items
</div>
<hr />
<a name="deleteGroups"> </a>
<div class="fixedFont">
<b>deleteGroups</b>()
</div>
<div class="description">
Delete all groups
</div>
<hr />
<a name="deleteItem"> </a>
<div class="fixedFont">
<b>deleteItem</b>(index, preventRender)
</div>
<div class="description">
Delete an item
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{int}</span> <b>index</b>
</dt>
<dd>Index of the item to be deleted</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>preventRender</b>
<i>Optional, Default: false</i>
</dt>
<dd>Do not re-render timeline if true
(optimization for multiple delete)</dd>
</dl>
<hr />
<a name="draw"> </a>
<div class="fixedFont">
<b>draw</b>(data, options)
</div>
<div class="description">
Main drawing logic. This is the function that needs to be called
in the html page, to draw the timeline.
A data table with the events must be provided, and an options table.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{google.visualization.DataTable}</span> <b>data</b>
</dt>
<dd>The data containing the events for the timeline.
Object DataTable is defined in
google.visualization.DataTable</dd>
<dt>
<span class="light fixedFont">{Object}</span> <b>options</b>
</dt>
<dd>A name/value map containing settings for the
timeline. Optional. The use of options here
is deprecated. Pass timeline options in the
constructor or use setOptions()</dd>
</dl>
<hr />
<a name="filterItems"> </a>
<div class="fixedFont">
<b>filterItems</b>()
</div>
<div class="description">
Filter the visible events
</div>
<hr />
<a name="finalItemsPosition"> </a>
<div class="fixedFont">
<b>finalItemsPosition</b>(items, groupBase, group)
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>items</b>
</dt>
<dd></dd>
<dt>
<b>groupBase</b>
</dt>
<dd></dd>
<dt>
<b>group</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name=".getAbsoluteLeft"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{number}</span>
<span class="light">links.Timeline.</span><b>getAbsoluteLeft</b>(elem)
</div>
<div class="description">
Retrieve the absolute left value of a DOM element
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>elem</b>
</dt>
<dd>A dom element, for example a div</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{number}</span> left The absolute left position of this element
in the browser page.</dd>
</dl>
<hr />
<a name=".getAbsoluteTop"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{number}</span>
<span class="light">links.Timeline.</span><b>getAbsoluteTop</b>(elem)
</div>
<div class="description">
Retrieve the absolute top value of a DOM element
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>elem</b>
</dt>
<dd>A dom element, for example a div</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{number}</span> top The absolute top position of this element
in the browser page.</dd>
</dl>
<hr />
<a name="getCluster"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>getCluster</b>(index)
</div>
<div class="description">
Retrieve the properties of a cluster.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> clusterdata Object containing cluster properties:<br>
{Date} start (required),
{String} type (optional)
{Array} array with item data as is in getItem()</dd>
</dl>
<hr />
<a name="getClusterIndex"> </a>
<div class="fixedFont">
<span class="light">{Number | undefined}</span>
<b>getClusterIndex</b>(element)
</div>
<div class="description">
Find the cluster index from a given HTML element
If no cluster index is found, undefined is returned
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>element</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Number | undefined}</span> index</dd>
</dl>
<hr />
<a name="getCurrentTime"> </a>
<div class="fixedFont">
<span class="light">{Date}</span>
<b>getCurrentTime</b>()
</div>
<div class="description">
Get current time. The time can have an offset from the real time, when
the current time has been changed via the method setCurrentTime.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Date}</span> time</dd>
</dl>
<hr />
<a name="getCustomTime"> </a>
<div class="fixedFont">
<span class="light">{Date}</span>
<b>getCustomTime</b>()
</div>
<div class="description">
Retrieve the current custom time.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Date}</span> customTime</dd>
</dl>
<hr />
<a name="getData"> </a>
<div class="fixedFont">
<span class="light">{google.visualization.DataTable | Array}</span>
<b>getData</b>()
</div>
<div class="description">
Return the original data table.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{google.visualization.DataTable | Array}</span> data</dd>
</dl>
<hr />
<a name="getDataRange"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>getDataRange</b>(withMargin)
</div>
<div class="description">
Get the date range of the items.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{boolean}</span> <b>withMargin</b>
<i>Optional</i>
</dt>
<dd>If true, 5% of whitespace is added to the
left and right of the range. Default is false.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> range An object with parameters min and max.
- {Date} min is the lowest start date of the items
- {Date} max is the highest start or end date of the items
If no data is available, the values of min and max
will be undefined</dd>
</dl>
<hr />
<a name="getGroup"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>getGroup</b>(groupName)
</div>
<div class="description">
Get a group by the group name. When the group does not exist,
it will be created.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{String}</span> <b>groupName</b>
</dt>
<dd>the name of the group</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> groupObject</dd>
</dl>
<hr />
<a name="getGroupFromHeight"> </a>
<div class="fixedFont">
<span class="light">{Object | undefined}</span>
<b>getGroupFromHeight</b>(height)
</div>
<div class="description">
Find the group from a given height in the timeline
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>height</b>
</dt>
<dd>Height in the timeline</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object | undefined}</span> group The group object, or undefined if out
of range</dd>
</dl>
<hr />
<a name="getGroupName"> </a>
<div class="fixedFont">
<span class="light">{String}</span>
<b>getGroupName</b>(groupObj)
</div>
<div class="description">
Get the group name from a group object.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>groupObj</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{String}</span> groupName the name of the group, or undefined when group
was not provided</dd>
</dl>
<hr />
<a name="getItem"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>getItem</b>(index)
</div>
<div class="description">
Retrieve the properties of an item.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> itemData Object containing item properties:<br>
{Date} start (required),
{Date} end (optional),
{String} content (required),
{String} group (optional),
{String} className (optional)
{boolean} editable (optional)
{String} type (optional)</dd>
</dl>
<hr />
<a name="getItemIndex"> </a>
<div class="fixedFont">
<span class="light">{Number | undefined}</span>
<b>getItemIndex</b>(element)
</div>
<div class="description">
Find the item index from a given HTML element
If no item index is found, undefined is returned
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>element</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Number | undefined}</span> index</dd>
</dl>
<hr />
<a name="getItemsByGroup"> </a>
<div class="fixedFont">
<b>getItemsByGroup</b>(items)
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>items</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="getOptions"> </a>
<div class="fixedFont">
<b>getOptions</b>()
</div>
<div class="description">
Get options for the timeline.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd>the options object</dd>
</dl>
<hr />
<a name=".getPageX"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Number}</span>
<span class="light">links.Timeline.</span><b>getPageX</b>(event)
</div>
<div class="description">
Get the absolute, horizontal mouse position from an event.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Number}</span> pageX</dd>
</dl>
<hr />
<a name=".getPageY"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Number}</span>
<span class="light">links.Timeline.</span><b>getPageY</b>(event)
</div>
<div class="description">
Get the absolute, vertical mouse position from an event.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Number}</span> pageY</dd>
</dl>
<hr />
<a name="getSelection"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Array.html">Array</a>}</span>
<b>getSelection</b>()
</div>
<div class="description">
Retrieve the currently selected event
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> sel An array with a column row, containing the row number
of the selected event. If there is no selection, an
empty array is returned.</dd>
</dl>
<hr />
<a name=".getTarget"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Element}</span>
<span class="light">links.Timeline.</span><b>getTarget</b>(event)
</div>
<div class="description">
Get HTML element which is the target of the event
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Element}</span> target element</dd>
</dl>
<hr />
<a name="getVisibleChartRange"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>getVisibleChartRange</b>()
</div>
<div class="description">
Retrieve the current visible range in the timeline.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> An object with start and end properties</dd>
</dl>
<hr />
<a name="getVisibleItems"> </a>
<div class="fixedFont">
<b>getVisibleItems</b>(start, end)
</div>
<div class="description">
Find all elements within the start and end range
If no element is found, returns an empty array
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>start</b>
</dt>
<dd>time</dd>
<dt>
<b>end</b>
</dt>
<dd>time</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd>Array itemsInRange</dd>
</dl>
<hr />
<a name="initialItemsPosition"> </a>
<div class="fixedFont">
<b>initialItemsPosition</b>(items, groupBase)
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>items</b>
</dt>
<dd></dd>
<dt>
<b>groupBase</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name=".isArray"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Boolean}</span>
<span class="light">links.Timeline.</span><b>isArray</b>(obj)
</div>
<div class="description">
Check if given object is a Javascript Array
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{*}</span> <b>obj</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Boolean}</span> isArray true if the given object is an array</dd>
</dl>
<hr />
<a name="isEditable"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>isEditable</b>(item)
</div>
<div class="description">
Check whether a given item is editable
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/links.Timeline.Item.html">links.Timeline.Item</a>}</span> <b>item</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> editable</dd>
</dl>
<hr />
<a name="isSelected"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>isSelected</b>(index)
</div>
<div class="description">
Check if an item is currently selected
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> true if row is selected, else false</dd>
</dl>
<hr />
<a name=".mapColumnIds"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{map}</span>
<span class="light">links.Timeline.</span><b>mapColumnIds</b>(dataTable)
</div>
<div class="description">
Retrieve a map with the column indexes of the columns by column name.
For example, the method returns the map
{
start: 0,
end: 1,
content: 2,
group: undefined,
className: undefined
editable: undefined
type: undefined
}
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{google.visualization.DataTable}</span> <b>dataTable</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="move"> </a>
<div class="fixedFont">
<b>move</b>(moveFactor)
</div>
<div class="description">
Move the timeline the given movefactor to the left or right. Start and end
date will be adjusted, and the timeline will be redrawn.
For example, try moveFactor = 0.1 or -0.1
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>moveFactor</b>
</dt>
<dd>Moving amount. Positive value will move right,
negative value will move left</dd>
</dl>
<hr />
<a name="onDblClick"> </a>
<div class="fixedFont">
<b>onDblClick</b>(event)
</div>
<div class="description">
Double click event occurred for an item
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="onMouseDown"> </a>
<div class="fixedFont">
<b>onMouseDown</b>(event)
</div>
<div class="description">
Start a moving operation inside the provided parent element
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd>The event that occurred (required for
retrieving the mouse position)</dd>
</dl>
<hr />
<a name="onMouseMove"> </a>
<div class="fixedFont">
<b>onMouseMove</b>(event)
</div>
<div class="description">
Perform moving operating.
This function activated from within the funcion links.Timeline.onMouseDown().
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd>Well, eehh, the event</dd>
</dl>
<hr />
<a name="onMouseUp"> </a>
<div class="fixedFont">
<b>onMouseUp</b>(event)
</div>
<div class="description">
Stop moving operating.
This function activated from within the funcion links.Timeline.onMouseDown().
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{event}</span> <b>event</b>
</dt>
<dd>The event</dd>
</dl>
<hr />
<a name="onMouseWheel"> </a>
<div class="fixedFont">
<b>onMouseWheel</b>(event)
</div>
<div class="description">
Event handler for mouse wheel event, used to zoom the timeline
Code from http://adomas.org/javascript-mouse-wheel/
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Event}</span> <b>event</b>
</dt>
<dd>The event</dd>
</dl>
<hr />
<a name="onTouchEnd"> </a>
<div class="fixedFont">
<b>onTouchEnd</b>(event)
</div>
<div class="description">
Event handler for touchend event on mobile devices
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="onTouchMove"> </a>
<div class="fixedFont">
<b>onTouchMove</b>(event)
</div>
<div class="description">
Event handler for touchmove event on mobile devices
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="onTouchStart"> </a>
<div class="fixedFont">
<b>onTouchStart</b>(event)
</div>
<div class="description">
Event handler for touchstart event on mobile devices
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name=".parseJSONDate"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">{Date}</span>
<span class="light">links.Timeline.</span><b>parseJSONDate</b>(date)
</div>
<div class="description">
parse a JSON date
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date | String | Number}</span> <b>date</b>
</dt>
<dd>Date object to be parsed. Can be:
- a Date object like new Date(),
- a long like 1356970529389,
an ISO String like "2012-12-31T16:16:07.213Z",
or a .Net Date string like
"\/Date(1356970529389)\/"</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Date}</span> parsedDate</dd>
</dl>
<hr />
<a name=".preventDefault"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>preventDefault</b>(event)
</div>
<div class="description">
Cancels the event if it is cancelable, without stopping further propagation of the event.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="recalcConversion"> </a>
<div class="fixedFont">
<b>recalcConversion</b>()
</div>
<div class="description">
Calculate the factor and offset to convert a position on screen to the
corresponding date and vice versa.
After the method calcConversionFactor is executed once, the methods screenToTime and
timeToScreen can be used.
</div>
<hr />
<a name="recalcItems"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>recalcItems</b>()
</div>
<div class="description">
Recalculate item properties:
- the height of each group.
- the actualHeight, from the stacked items or the sum of the group heights
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> resized returns true if any of the items properties is
changed</dd>
</dl>
<hr />
<a name="redraw"> </a>
<div class="fixedFont">
<b>redraw</b>()
</div>
<div class="description">
Redraw the timeline
Reloads the (linked) data table and redraws the timeline when resized.
See also the method checkResize
</div>
<hr />
<a name="reflowAxis"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>reflowAxis</b>()
</div>
<div class="description">
Reflow the timeline axis. Calculate its height, width, positioning, etc...
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> resized returns true if the axis is resized</dd>
</dl>
<hr />
<a name="reflowFrame"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>reflowFrame</b>()
</div>
<div class="description">
Reflow the timeline frame
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> resized Returns true if any of the frame elements
have been resized.</dd>
</dl>
<hr />
<a name="reflowGroups"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>reflowGroups</b>()
</div>
<div class="description">
Reflow the size of the groups
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> resized Returns true if any of the frame elements
have been resized.</dd>
</dl>
<hr />
<a name="reflowItems"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>reflowItems</b>()
</div>
<div class="description">
Reflow all items, retrieve their actual size
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> resized returns true if any of the items is resized</dd>
</dl>
<hr />
<a name=".removeClassName"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>removeClassName</b>(elem, className)
</div>
<div class="description">
Removes one or more className's from the given elements style
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>elem</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{String}</span> <b>className</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name=".removeEventListener"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>removeEventListener</b>(element, action, listener, useCapture)
</div>
<div class="description">
Remove an event listener from an element
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Element}</span> <b>element</b>
</dt>
<dd>An html dom element</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>action</b>
</dt>
<dd>The name of the event, for example "mousedown"</dd>
<dt>
<span class="light fixedFont">{function}</span> <b>listener</b>
</dt>
<dd>The listener function</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>useCapture</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="render"> </a>
<div class="fixedFont">
<b>render</b>(options)
</div>
<div class="description">
Re-render (reflow and repaint) all components of the Timeline: frame, axis,
items, ...
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>options</b>
<i>Optional</i>
</dt>
<dd>Available options:
{boolean} renderTimesLeft Number of times the
render may be repeated
5 times by default.
{boolean} animate takes options.animate
as default value</dd>
</dl>
<hr />
<a name="repaint"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>repaint</b>()
</div>
<div class="description">
Repaint all components of the Timeline
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> needsReflow Returns true if the DOM is changed such that
a reflow is needed.</dd>
</dl>
<hr />
<a name="repaintAxis"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>repaintAxis</b>()
</div>
<div class="description">
Redraw the timeline axis with minor and major labels
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> needsReflow Returns true if the DOM is changed such
that a reflow is needed.</dd>
</dl>
<hr />
<a name="repaintAxisCharacters"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>repaintAxisCharacters</b>()
</div>
<div class="description">
Create characters used to determine the size of text on the axis
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> needsReflow Returns true if the DOM is changed such that
a reflow is needed.</dd>
</dl>
<hr />
<a name="repaintAxisEndOverwriting"> </a>
<div class="fixedFont">
<b>repaintAxisEndOverwriting</b>()
</div>
<div class="description">
End of overwriting HTML DOM elements of the axis.
remaining elements will be removed
</div>
<hr />
<a name="repaintAxisHorizontal"> </a>
<div class="fixedFont">
<b>repaintAxisHorizontal</b>()
</div>
<div class="description">
Repaint the horizontal line and background of the axis
</div>
<hr />
<a name="repaintAxisMajorLine"> </a>
<div class="fixedFont">
<b>repaintAxisMajorLine</b>(x)
</div>
<div class="description">
Create a Major line for the axis at position x
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>x</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="repaintAxisMajorText"> </a>
<div class="fixedFont">
<b>repaintAxisMajorText</b>(x, text)
</div>
<div class="description">
Create a Major label for the axis at position x
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>x</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{String}</span> <b>text</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="repaintAxisMinorLine"> </a>
<div class="fixedFont">
<b>repaintAxisMinorLine</b>(x)
</div>
<div class="description">
Create a minor line for the axis at position x
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>x</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="repaintAxisMinorText"> </a>
<div class="fixedFont">
<b>repaintAxisMinorText</b>(x, text)
</div>
<div class="description">
Create a minor label for the axis at position x
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>x</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{String}</span> <b>text</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="repaintAxisStartOverwriting"> </a>
<div class="fixedFont">
<b>repaintAxisStartOverwriting</b>()
</div>
<div class="description">
Initialize redraw of the axis. All existing labels and lines will be
overwritten and reused.
</div>
<hr />
<a name="repaintCurrentTime"> </a>
<div class="fixedFont">
<b>repaintCurrentTime</b>()
</div>
<div class="description">
Redraw the current time bar
</div>
<hr />
<a name="repaintCustomTime"> </a>
<div class="fixedFont">
<b>repaintCustomTime</b>()
</div>
<div class="description">
Redraw the custom time bar
</div>
<hr />
<a name="repaintDeleteButton"> </a>
<div class="fixedFont">
<b>repaintDeleteButton</b>()
</div>
<div class="description">
Redraw the delete button, on the top right of the currently selected item
if there is no item selected, the button is hidden.
</div>
<hr />
<a name="repaintDragAreas"> </a>
<div class="fixedFont">
<b>repaintDragAreas</b>()
</div>
<div class="description">
Redraw the drag areas. When an item (ranges only) is selected,
it gets a drag area on the left and right side, to change its width
</div>
<hr />
<a name="repaintFrame"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>repaintFrame</b>()
</div>
<div class="description">
repaint the Timeline frame
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> needsReflow Returns true if the DOM is changed such that
a reflow is needed.</dd>
</dl>
<hr />
<a name="repaintGroups"> </a>
<div class="fixedFont">
<b>repaintGroups</b>()
</div>
<div class="description">
Redraw the group labels
</div>
<hr />
<a name="repaintItems"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>repaintItems</b>()
</div>
<div class="description">
Repaint all items
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> needsReflow Returns true if the DOM is changed such that
a reflow is needed.</dd>
</dl>
<hr />
<a name="repaintNavigation"> </a>
<div class="fixedFont">
<b>repaintNavigation</b>()
</div>
<div class="description">
Create the navigation buttons for zooming and moving
</div>
<hr />
<a name="screenToTime"> </a>
<div class="fixedFont">
<span class="light">{Date}</span>
<b>screenToTime</b>(x)
</div>
<div class="description">
Convert a position on screen (pixels) to a datetime
Before this method can be used, the method calcConversionFactor must be
executed once.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{int}</span> <b>x</b>
</dt>
<dd>Position on the screen in pixels</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Date}</span> time The datetime the corresponds with given position x</dd>
</dl>
<hr />
<a name="selectCluster"> </a>
<div class="fixedFont">
<b>selectCluster</b>(index)
</div>
<div class="description">
Select an cluster by its index
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="selectItem"> </a>
<div class="fixedFont">
<b>selectItem</b>(index)
</div>
<div class="description">
Select an item by its index
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="setAutoScale"> </a>
<div class="fixedFont">
<b>setAutoScale</b>(enable)
</div>
<div class="description">
Enable or disable autoscaling
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{boolean}</span> <b>enable</b>
</dt>
<dd>If true or not defined, autoscaling is enabled.
If false, autoscaling is disabled.</dd>
</dl>
<hr />
<a name="setCurrentTime"> </a>
<div class="fixedFont">
<b>setCurrentTime</b>(time)
</div>
<div class="description">
Set current time. This function can be used to set the time in the client
timeline equal with the time on a server.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date}</span> <b>time</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="setCustomTime"> </a>
<div class="fixedFont">
<b>setCustomTime</b>(time)
</div>
<div class="description">
Set custom time.
The custom time bar can be used to display events in past or future.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date}</span> <b>time</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="setData"> </a>
<div class="fixedFont">
<b>setData</b>(data)
</div>
<div class="description">
Set data for the timeline
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{google.visualization.DataTable | Array}</span> <b>data</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="setOptions"> </a>
<div class="fixedFont">
<b>setOptions</b>(options)
</div>
<div class="description">
Set options for the timeline.
Timeline must be redrawn afterwards
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Object}</span> <b>options</b>
</dt>
<dd>A name/value map containing settings for the
timeline. Optional.</dd>
</dl>
<hr />
<a name="setScale"> </a>
<div class="fixedFont">
<b>setScale</b>(scale, step)
</div>
<div class="description">
Set a custom scale. Autoscaling will be disabled.
For example setScale(SCALE.MINUTES, 5) will result
in minor steps of 5 minutes, and major steps of an hour.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{links.Timeline.StepDate.SCALE}</span> <b>scale</b>
</dt>
<dd>A scale. Choose from SCALE.MILLISECOND,
SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
SCALE.YEAR.</dd>
<dt>
<span class="light fixedFont">{int}</span> <b>step</b>
</dt>
<dd>A step size, by default 1. Choose for
example 1, 2, 5, or 10.</dd>
</dl>
<hr />
<a name="setSelection"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>setSelection</b>(selection)
</div>
<div class="description">
Select an event. The visible chart range will be moved such that the selected
event is placed in the middle.
For example selection = [{row: 5}];
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>selection</b>
</dt>
<dd>An array with a column row, containing the row
number (the id) of the event to be selected.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> true if selection is succesfully set, else false.</dd>
</dl>
<hr />
<a name="setSize"> </a>
<div class="fixedFont">
<b>setSize</b>(width, height)
</div>
<div class="description">
Set a new size for the timeline
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>width</b>
</dt>
<dd>Width in pixels or percentage (for example "800px"
or "50%")</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>height</b>
</dt>
<dd>Height in pixels or percentage (for example "400px"
or "30%")</dd>
</dl>
<hr />
<a name="setVisibleChartRange"> </a>
<div class="fixedFont">
<b>setVisibleChartRange</b>(start, end, redraw)
</div>
<div class="description">
Set a new value for the visible range int the timeline.
Set start undefined to include everything from the earliest date to end.
Set end undefined to include everything from start to the last date.
Example usage:
myTimeline.setVisibleChartRange(new Date("2010-08-22"),
new Date("2010-09-13"));
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date}</span> <b>start</b>
</dt>
<dd>The start date for the timeline. optional</dd>
<dt>
<span class="light fixedFont">{Date}</span> <b>end</b>
</dt>
<dd>The end date for the timeline. optional</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>redraw</b>
</dt>
<dd>Optional. If true (default) the Timeline is
directly redrawn</dd>
</dl>
<hr />
<a name="setVisibleChartRangeAuto"> </a>
<div class="fixedFont">
<b>setVisibleChartRangeAuto</b>()
</div>
<div class="description">
Change the visible chart range such that all items become visible
</div>
<hr />
<a name="setVisibleChartRangeNow"> </a>
<div class="fixedFont">
<b>setVisibleChartRangeNow</b>()
</div>
<div class="description">
Adjust the visible range such that the current time is located in the center
of the timeline
</div>
<hr />
<a name="stackCalculateFinal"> </a>
<div class="fixedFont">
<span class="light">{Object[]}</span>
<b>stackCalculateFinal</b>(items)
</div>
<div class="description">
Adjust vertical positions of the events such that they don't overlap each
other.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{timeline.Item[]}</span> <b>items</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object[]}</span> finalItems</dd>
</dl>
<hr />
<a name="stackCancelAnimation"> </a>
<div class="fixedFont">
<b>stackCancelAnimation</b>()
</div>
<div class="description">
Cancel any running animation
</div>
<hr />
<a name="stackItems"> </a>
<div class="fixedFont">
<b>stackItems</b>(animate)
</div>
<div class="description">
Stack the items such that they don't overlap. The items will have a minimal
distance equal to options.eventMargin.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{boolean | undefined}</span> <b>animate</b>
</dt>
<dd>if animate is true, the items are
moved to their new position animated
defaults to false.</dd>
</dl>
<hr />
<a name="stackItemsCheckOverlap"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>stackItemsCheckOverlap</b>(items, itemIndex, itemStart, itemEnd)
</div>
<div class="description">
Check if the destiny position of given item overlaps with any
of the other items from index itemStart to itemEnd.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>items</b>
</dt>
<dd>Array with items</dd>
<dt>
<span class="light fixedFont">{int}</span> <b>itemIndex</b>
</dt>
<dd>Number of the item to be checked for overlap</dd>
<dt>
<span class="light fixedFont">{int}</span> <b>itemStart</b>
</dt>
<dd>First item to be checked.</dd>
<dt>
<span class="light fixedFont">{int}</span> <b>itemEnd</b>
</dt>
<dd>Last item to be checked.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> colliding item, or undefined when no collisions</dd>
</dl>
<hr />
<a name="stackMoveOneStep"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>stackMoveOneStep</b>(currentItems, finalItems)
</div>
<div class="description">
Move the events one step in the direction of their final positions
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>currentItems</b>
</dt>
<dd>Array with the real items and their current
positions</dd>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>finalItems</b>
</dt>
<dd>Array with objects containing the final
positions of the items</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> arrived True if all items have reached their final
location, else false</dd>
</dl>
<hr />
<a name="stackMoveToFinal"> </a>
<div class="fixedFont">
<b>stackMoveToFinal</b>(currentItems, finalItems)
</div>
<div class="description">
Move the events from their current position to the final position
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>currentItems</b>
</dt>
<dd>Array with the real items and their current
positions</dd>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>finalItems</b>
</dt>
<dd>Array with objects containing the final
positions of the items</dd>
</dl>
<hr />
<a name="stackOrder"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Array.html">Array</a>}</span>
<b>stackOrder</b>(items)
</div>
<div class="description">
Order the items in the array this.items. The default order is determined via:
- Ranges go before boxes and dots.
- The item with the oldest start time goes first
If a custom function has been provided via the stackorder option, then this will be used.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> <b>items</b>
</dt>
<dd>Array with items</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Array.html">Array</a>}</span> sortedItems Array with sorted items</dd>
</dl>
<hr />
<a name=".stopPropagation"> </a>
<div class="fixedFont">&lt;static&gt;
<span class="light">links.Timeline.</span><b>stopPropagation</b>(event)
</div>
<div class="description">
Stop event propagation
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>event</b>
</dt>
<dd></dd>
</dl>
<hr />
<a name="timeToScreen"> </a>
<div class="fixedFont">
<span class="light">{int}</span>
<b>timeToScreen</b>(time)
</div>
<div class="description">
Convert a datetime (Date object) into a position on the screen
Before this method can be used, the method calcConversionFactor must be
executed once.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Date}</span> <b>time</b>
</dt>
<dd>A date</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{int}</span> x The position on the screen in pixels which corresponds
with the given date.</dd>
</dl>
<hr />
<a name="trigger"> </a>
<div class="fixedFont">
<b>trigger</b>(event)
</div>
<div class="description">
fire an event
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{String}</span> <b>event</b>
</dt>
<dd>The name of an event, for example "rangechange" or "edit"</dd>
</dl>
<hr />
<a name="unselectItem"> </a>
<div class="fixedFont">
<b>unselectItem</b>()
</div>
<div class="description">
Unselect the currently selected event (if any)
</div>
<hr />
<a name="updateData"> </a>
<div class="fixedFont">
<b>updateData</b>(index, values)
</div>
<div class="description">
Update the original data with changed start, end or group.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>index</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{Object}</span> <b>values</b>
</dt>
<dd>An object containing some of the following parameters:
{Date} start,
{Date} end,
{String} content,
{String} group</dd>
</dl>
<hr />
<a name="zoom"> </a>
<div class="fixedFont">
<b>zoom</b>(zoomFactor, zoomAroundDate)
</div>
<div class="description">
Zoom the timeline the given zoomfactor in or out. Start and end date will
be adjusted, and the timeline will be redrawn. You can optionally give a
date around which to zoom.
For example, try zoomfactor = 0.1 or -0.1
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Number}</span> <b>zoomFactor</b>
</dt>
<dd>Zooming amount. Positive value will zoom in,
negative value will zoom out</dd>
<dt>
<span class="light fixedFont">{Date}</span> <b>zoomAroundDate</b>
</dt>
<dd>Date around which will be zoomed. Optional</dd>
</dl>
<!-- ============================== event details ========================= -->
<hr />
</div>
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.2 on Wed Mar 04 2015 09:58:28 GMT+0100 (CET)
</div>
</body>
</html>