|
|
<!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"> </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"><static> </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"><static> </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"> </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"> </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"> </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"> </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"> </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 itemThis method can be called insed an event listener which catches the "new"event.</div> </td> </tr> <tr> <td class="attributes"> </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 itemThis method can be called insed an event listener which catches the "change"event.</div> </td> </tr> <tr> <td class="attributes"> </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 itemThis method can be called insed an event listener which catches the "delete"event.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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: neatlycleaning up the DOM, and accompanying arrays this.renderedItems andthe created clusters.</div> </td> </tr> <tr> <td class="attributes"><static> </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"> </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"> </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 collideThe items must have parameters left, right, top, and bottom.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"><static> </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"><static> </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"> </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"> </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 elementIf no cluster index is found, undefined is returned</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 elementIf no item index is found, undefined is returned</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"><static> </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"><static> </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"> </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"><static> </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"> </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"> </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 rangeIf no element is found, returns an empty array</div> </td> </tr> <tr> <td class="attributes"> </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"><static> </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"> </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"> </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"><static> </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"> </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"> </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"> </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"> </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"> </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"> </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 timelineCode from http://adomas.org/javascript-mouse-wheel/</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"><static> </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"><static> </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"> </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 thecorresponding date and vice versa.</div> </td> </tr> <tr> <td class="attributes"> </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"> </td> <td class="nameDescription"> <div class="fixedFont"><b><a href="../symbols/links.Timeline.html#redraw">redraw</a></b>() </div> <div class="description">Redraw the timelineReloads the (linked) data table and redraws the timeline when resized.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"><static> </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"><static> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 itemif there is no item selected, the button is hidden.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"> </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"> </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 datetimeBefore this method can be used, the method calcConversionFactor must beexecuted once.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 centerof the timeline</div> </td> </tr> <tr> <td class="attributes"> </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 eachother.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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 anyof the other items from index itemStart to itemEnd.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"><static> </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"> </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 screenBefore this method can be used, the method calcConversionFactor must beexecuted once.</div> </td> </tr> <tr> <td class="attributes"> </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"> </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"> </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"> </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"><static> <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"><static> <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 minimumrange. </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 itemThis 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 itemThis 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 itemThis 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: neatlycleaning up the DOM, and accompanying arrays this.renderedItems andthe created clusters. </div>
<hr /> <a name=".clone"> </a> <div class="fixedFont"><static> <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 collideThe 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 thetriggered 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 calledin 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"><static> <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"><static> <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 elementIf 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, whenthe 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 elementIf 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"><static> <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"><static> <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"><static> <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 rangeIf 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"><static> <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"><static> <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 enddate 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 timelineCode 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"><static> <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"><static> <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 thecorresponding date and vice versa.After the method calcConversionFactor is executed once, the methods screenToTime andtimeToScreen 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 timelineReloads 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"><static> <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"><static> <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 beoverwritten 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 itemif 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 datetimeBefore this method can be used, the method calcConversionFactor must beexecuted 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 clienttimeline 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 resultin 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 selectedevent 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 centerof 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 eachother. </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 minimaldistance 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 anyof 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 firstIf 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"><static> <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 screenBefore this method can be used, the method calcConversionFactor must beexecuted 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 willbe adjusted, and the timeline will be redrawn. You can optionally give adate 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>
|
