# GraffitiTimeline
Class Inherits GraffitiWebUIControl
## About
GraffitiTimeline is a powerful timeline display component designed to allow your users to view tasks in a time-oriented mechanism.
Features:
*
Locale support
*
Grouping
*
Orientation customization
*
Major and minor labels
*
Custom Styling
*
Rolling mode to track current time
*
User editing
*
Zoom
*
Point, Box, and Line item types
## Preview
Previous
Next
## Warnings
### Linux Support
Support varies by Linux distribution and installed libwebkit library and version.
### Windows Support
Requires the presence of an HTMLViewer on a window or container within the project.
## Compatibility
### Framework API Version
| 1.0 | 2.0 |
| :---: | :---: |
| True | True |
### Desktop
| 32-Bit | 64-Bit |
| :---: | :---: |
| True | True |
## Attributes
| Name | Value |
| --- | --- |
| DefaultEvent | "Shown" |
## Enumerations
| Name | Value | Description |
| --- | :---: | --- |
| Alignments | Default <br> Center <br> Left <br> Right | Supported text alignments. |
| AxisOrientations | Bottom <br> Top <br> Both <br> None | Supported data axes orientations. |
| HeightModes | Auto <br> Fixed <br> FitItems | Supported height models. |
| ItemOrientations | Bottom <br> Top | Support item orientation models. |
| SupportedLocales | en <br> en_US <br> en_GB <br> it <br> it_IT <br> it_CH <br> nl <br> nl_NL <br> nl_BE <br> de <br> de_DE <br> fr <br> fr_FR <br> fr_CA <br> fr_BE <br> uk <br> uk_UA <br> ru <br> ru_RU <br> pl <br> pl_PL | Supported locales. |
| TimeScales | None <br> Year <br> Month <br> Week <br> Weekday <br> Day <br> Hour <br> Minute <br> Second <br> Millisecond | Supported timescales. |
## Event Definitions
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| AxisRightClick | atDate as DateTime <br> X as Integer <br> Y as Integer | (None) | Raised when the user right-clicks one of the axes. |
| BarMoved | bar as GraffitiTimelineBar | (None) | Raised when the user drags a bar to a new position. |
| GroupBackgroundRightClick | group as GraffitiTimelineGroup <br> atDate as DateTime <br> pageX as Integer <br> pageY as Integer | (None) | Raised when use right-clicks the background of a group. |
| GroupLabelRightClick | group as GraffitiTimelineGroup <br> X as Integer <br> Y as Integer | (None) | Raised when the user right-clicks a group label. |
| GroupsOrderChange | (None) | (None) | Raised when the user has reordered groups. |
| ItemAction | item as GraffitiTimelineItem | (None) | Raised when the user clicks on an item. |
| ItemMoved | item as GraffitiTimelineItem | (None) | Raised when the user has moved an item on the timeline. |
| ItemRemoved | item as GraffitiTimelineItem | (None) | Raised when the user removes an item by clicking the X button. |
| ItemRightClick | item as GraffitiTimelineItem <br> pageX as Integer <br> pageY as Integer | (None) | Raised when user right-clicks an item on the timeline. |
| ItemSelectionChange | selectedItems() as GraffitiTimelineItem | (None) | Raised when the user has altered the selected items in the display. |
| RightClick | atDate as DateTime <br> pageX as Integer <br> pageY as Integer | (None) | Raised when the user right-clicked a part of the timeline that does not contain a group or item. |
| Shown | (None) | (None) | |
| TimeAction | atDate as DateTime <br> toGroup as GraffitiTimelineGroup | (None) | Raised when user clicks an area of the timeline that does not contain an item. |
| ViewChanged | (None) | (None) | Raised when the user has change the viewable area range by scrolling, dragging, or zooming. |
## Methods
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| Sub | AddBar | (None) | Adds a new bar to the timeline. |
| Sub | AddGroup | (None) | Adds a new group to the timeline. |
| Sub | AddItem | (None) | Adds a new item to the timeline. |
| Sub | AddRestriction | (None) | Adds a new restriction to the timeline. |
| Function | BarAt | As | Returns the bar at the specified index. |
| Sub | DeslectAll | (None) | Deselects all selected events. |
| Function | GroupAt | As | Returns the group at the specified index. |
| Function | ItemAt | As | Returns the item at the specified index. |
| Function | LastBarIndex | As | Returns the index of the final bar added. |
| Function | LastGroupIndex | As | Returns the index of the final group added. |
| Function | LastItemIndex | As | Returns the index of the final item added. |
| Function | LastRestrictionIndex | As | Returns the index of the final restriction added. |
| Sub | Redraw | (None) | Force a UI update. |
| Sub | RemoveAllBars | (None) | Removes all bars from the component. |
| Sub | RemoveAllGroups | (None) | Removes all groups from the component. |
| Sub | RemoveAllItems | (None) | Removes all items from the component. |
| Sub | RemoveAllRestrictions | (None) | Removes all restrictions from the component. |
| Sub | RemoveBar | (None) | Removes the specified bar. |
| Sub | RemoveGroup | (None) | Removes the specified group. |
| Sub | RemoveItem | (None) | Removes the specified item. |
| Sub | RemoveRestriction | (None) | Removes the specified restriction. |
| Function | RestrictionAt | As | Returns the restriction at the specified index. |
| Sub | ShowAll | (None) | Scroll and Zoom the display to fit all items. |
| Sub | ShowItem | (None) | Scroll and Zoom the display to show the specified item. |
| Sub | ShowTime | (None) | Scroll and Zoom the display to show the specified date object's value. |
| Attributes | Hidden = True | UpdateProperty | |
| Attributes | Hidden = True | UpdatePropertyMultiple | |
| Sub | ZoomIn | (None) | Zoom the display in by the supplied percentage value. |
| Sub | ZoomOut | (None) | Zoom the display out by the supplied percentage value. |
## Properties
| Name | Type | Default Value | Description |
| --- | :---: | :---: | --- |
| Alignment | Alignments | Nil | Alignment of items with type 'box', 'range', and 'background'. |
| CanAddItem | Boolean | Nil | When True, users are able to add items by interacting with the component. |
| CanChangeItemGroup | Boolean | Nil | When True, users can drag items from one group to another. |
| CanChangeItemTime | Boolean | Nil | When True, users can drag items to change their value. |
| CanMove | Boolean | Nil | Specifies whether the Timeline can be moved and zoomed by dragging the window. |
| CanMultiselect | Boolean | Nil | When True, users can select multiple items. |
| CanMultiselectGroup | Boolean | Nil | When True, users can select multiple groups. |
| CanOrderGroups | Boolean | Nil | When True users can drag groups to reorder them. |
| CanRemoveGroup | Boolean | Nil | When True, users can remove groups by interacting with the UI. |
| CanRemoveItem | Boolean | Nil | When True, users can remove items by interacting with the UI. |
| CanSelect | Boolean | Nil | When True, users can select items by clicking on them. |
| CanZoom | Boolean | Nil | When True, users can zoom the display by interacting with it. |
| CanZoomMouse | Boolean | Nil | When True, users can zoom the display using the mouse wheel. |
| CustomStyling | String | Nil | When True, default styling is overridden. |
| DateMaximum | DateTime | Nil | The maximum date and time that can be displayed. |
| DateMinimum | DateTime | Nil | The minimum date and time that can be displayed. |
| DisplayLocale | SupportedLocales | Nil | Current display locale. |
| FormatMajorDay | String | Nil | Moment.js Formatting value. |
| FormatMajorHour | String | Nil | Moment.js Formatting value. |
| FormatMajorMillisecond | String | Nil | Moment.js Formatting value. |
| FormatMajorMinute | String | Nil | Moment.js Formatting value. |
| FormatMajorMonth | String | Nil | Moment.js Formatting value. |
| FormatMajorSecond | String | Nil | Moment.js Formatting value. |
| FormatMajorWeek | String | Nil | Moment.js Formatting value. |
| FormatMajorWeekday | String | Nil | Moment.js Formatting value. |
| FormatMajorYear | String | Nil | Moment.js Formatting value. |
| FormatMinorDay | String | Nil | Moment.js Formatting value. |
| FormatMinorHour | String | Nil | Moment.js Formatting value. |
| FormatMinorMillisecond | String | Nil | Moment.js Formatting value. |
| FormatMinorMinute | String | Nil | Moment.js Formatting value. |
| FormatMinorMonth | String | Nil | Moment.js Formatting value. |
| FormatMinorSecond | String | Nil | Moment.js Formatting value. |
| FormatMinorWeek | String | Nil | Moment.js Formatting value. |
| FormatMinorWeekday | String | Nil | Moment.js Formatting value. |
| FormatMinorYear | String | Nil | Moment.js Formatting value. |
| HeightMode | HeightModes | Nil | Vertical sizing of the timeline display within the component. |
| MarginAxis | Integer | Nil | Distance between axis points. |
| MarginItemHorizontal | Integer | Nil | Margin for horizontal item display. |
| MarginItemVertical | Integer | Nil | Margin for vertical item display. |
| OrientationAxis | AxisOrientations | Nil | Orientation of axis display. |
| OrientationItem | ItemOrientations | Nil | Orientation of items relative to the axis. |
| OverrideItemEdit | Boolean | Nil | When True, item edit properties are overridden in favor of those on the Timeline instance. |
| Private | | GraffitiTimelineBar | |
| Private | | GraffitiTimelineGroup | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | Nil | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | Nil | |
| Private | | GraffitiTimelineRestriction | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | Nil | |
| Private | As | Nil | |
| Private | As | Nil | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | Nil | |
| Private | As | = | |
| Private | As | Nil | |
| Private | | GraffitiTimelineItem | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| Private | As | = | |
| RollingMode | Boolean | Nil | When True, the timeline display will shift continuously to display the current date/time at center. |
| RollingModeOffset | Integer | Nil | Set how far from the left the rolling mode is implemented from. Percentage value (0-100). |
| ShowCurrentTime | Boolean | Nil | When True, displays a bar at the current date/time that the user cannot interact with. |
| ShowHelpTags | Boolean | Nil | When the mouse is hovered of an item with a helptag, it will be displayed if this value is true. |
| ShowMajorLabels | Boolean | Nil | Determines whether major labels, such as the day, are displayed. |
| ShowMinorLabels | Boolean | Nil | Determines whether minor labels, such as seconds, are displayed. |
| TimeAxisScale | TimeScales | Nil | Granularity of the time display. |
| TimeAxisStep | Integer | Nil | Interval used for the TimeAxisScale. |
| ViewEnd | DateTime | Nil | The current maximum viewable date in the display. |
| ViewStart | DateTime | Nil | The current minimum viewable date in the display. |
