Class: ChartOptions

ChartOptions()

new ChartOptions()

The ChartOptions object holds options to apply on the control's chart. The Chart / GetChart() method gets the control's chart object.

Every option of the ChartOptions type has associated a property of the Chart object. For instance, the option:

levelCount {number}, specifies the number of levels in the chart's header
is associated with the property:
LevelCount {number}, specifies the number of levels in the chart's header
which means that the following statements are equivalent:
oChart.Options = {levelCount: 2}
oChart.SetOptions({levelCount: 2})
oChart.LevelCount = 2
oChart.SetLevelCount(2)
where oChart is an object of Chart type

Members

(static) adjustLevelsToBase :boolean

The adjustLevelsToBase field specifies whether the units of the levels are aligned with the units of the base level.
Type:
  • boolean
Example
true {boolean}, aligns the units of the level with units of the base-level

(static) allowOverviewZoom :boolean

The allowOverviewZoom field indicates whether the chart's overview shows the time-scales the user can zoom to
Type:
  • boolean
Example
false {boolean}, the overview displays no zooming time-scales
 true {boolean}, the overview displays the time-scales the user can zoom to

(static) allowSelectDate :exontrol.Tree.SingleSelEnum

The allowSelectDate field indicates whether the user can select single, multiple, toggle dates. The exontrol.Tree.SingleSelEnum type defines the following flags:
  • exDisableSel(0), specifies that the chart's date(s) selection is disabled (can not be combined with any other flags)
  • exEnableSel(1), specifies that the chart's date(s) selection is enabled (multiple-selection, unless the exSingleSel is set )
  • exSingleSel(2), specifies that the user can select a date/time period only
  • exToggleSel(4), specifies that the date/time period's selection state is toggled once the user clicks an date/time period.
  • exDisableCtrlSel(8), disables toggling the date/time period's selection state when user clicks an date/time period, while CTRL modifier key is pressed.
  • exDisableShiftSel(16), disables selecting date/time periods using the SHIFT key.
  • exDisableDrag(32), disables selecting date/time periods by drag.
Type:
  • exontrol.Tree.SingleSelEnum
Example
0 or exontrol.Tree.SingleSelEnum.exDisableSel {number}, disables selecting any date
 3 or exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel {number}, enables chart's date single selection, so only a single date can be selected
 6 or exontrol.Tree.SingleSelEnum.exToggleSel | exontrol.Tree.SingleSelEnum.exSingleSel {number}, enables chart's date single and toggle selection, which means that once a date is selected it gets unselected once it is clicked, or reverse, and only a single-date can be selected at once.

(static) bars :BarOptions

The bars field defines the predefined-bars of the control, as an object of BarOptions type
Type:
Example
"Task":
 {
   height: 12,
   shape:
   {
     frameColor: "rgb(0,0,255)",
     patternColor: "rgb(0,0,255)",
     pattern: 6, // exontrol.PatternEnum.exPatternBDiagonal
     primitive: "RoundRect"
   }
 }

(static) dateTickerLabel :string

The dateTickerLabel field specifies the format to display the bar's start and end margins while creating, moving or resizing it. The dateTickerLabel supports ex-HTLM tags such as (<b>, <i>, <fgcolor>, ...), <%DATE%> and <=FORMULA%> (@since 2.3) tags.

The <%=FORMULA%> tag (@since 2.3) holds an expression that supports the following keywords:

  • value, {Date} defines the DATE being displayed (could be the start or end)
  • start, {Date} defines the start-margin of the bar as a DATE type
  • end, {Date} defines the end-margin of the bar as a DATE type
The <%DATE%> tag can be any of the following:
  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed
Type:
  • string
Example
null {null}, no date-ticker(s) is shown while a bar is created, moved or resized
 "<%loc_sdate%>" {string} displays the bar's margins in short format
 "<c><b><%mmm%> <%d%></b><br><c><%hh%>:<%nn%>" {string}, displays the month and day on the first line, while the second shows the hour and minute
 "<%=shortdate(value=end?value-1:value)%>" {string}, displays the end-margin with one day before (@since 2.3)
 "<%mmm%> <%d%><fgcolor 808080><%=value=end?` (`+(end - start) + `)`:``%>" {string}, displays the month, the day and for the end-margin includes the number of days of the bar being created, resized or moved (@since 2.3)
 "<%=value=start?``:value%>" {string}, specifies that only end-margin of the bar is being shown (@since 2.3)

(static) dateTickerLabelHMargin :number

The dateTickerLabelHMargin field specifies the distance between the date-label and the bar, while create, resize or move it
Type:
  • number
Since:
  • 2.3
Example
null {null}, the distance between the date-label and the bar is 4 pixels (default)
 0 {number}, the distance between the date-label and the bar is 0 pixels

(static) dateTickerLabelVAlign :number

The dateTickerLabelVAlign field specifies the vertical alignment of the date label, while create, resize or move the bar, as one of the following values:
  • 0 {number}, indicates that the date-label is displayed on top, right-below the header (default)
  • 1 {number}, specifies that the start/end margins of the bar are displayed to left/side of it
Type:
  • number
Since:
  • 2.3
Example
null {null}, the date-label is displayed on top, right-below the header (default)
 1 {number}, the start/end margins of the bar are displayed to left/side of it

(static) drawDateTicker :boolean

The drawDateTicker field shows or hides the chart's ticker to indicate the date-time being hovered
Type:
  • boolean
Example
true {boolean}, shows the chart's ticker that's visible only when the mouse pointer hovers the date-time

(static) drawGridLines :exontrol.Tree.GridLinesEnum

The drawGridLines field specifies whether the chart's grid-lines are shown or hidden. The gridLines field defines the color, width and style of the control's grid-lines. The exontrol.Tree.GridLinesEnum type supports the following flags:
  • exNoLines(0), no grid lines
  • exAllLines(-1), shows all vertical and horizontal grid lines
  • exRowLines(-2), shows grid lines for existing rows only
  • exHLines(1), shows only the horizontal grid lines
  • exVLines(2), shows only the vertical grid lines
Type:
  • exontrol.Tree.GridLinesEnum
Example
null {null}, inherits the control's drawGridLines property
 0 or exontrol.Tree.GridLinesEnum.exNoLines {number}, hides the grid-lines (default)
 -1 or exontrol.Tree.GridLinesEnum.exAllLines {number}, shows all vertical and horizontal grid lines

(static) drawLevelSeparator :Gantt.LevelLineEnum

The drawLevelSeparator field shows or hides lines between chart's levels. The exontrol.Gantt.LevelLineEnum type supports the following values and flags:
  • exLevelNoLine(0), no line is shown
  • exLevelDefaultLine(-1), indicates the default grid line style
  • exLevelDotLine(1), indicates a dotted line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
  • exLevelSolidLine(2), indicates a solid line. For vertical/tick lines, it can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option.
  • exLevelLowerHalf(0x10), (no effect) indicates that the line is shown in the lower half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
  • exLevelUpperHalf(0x20), (no effect) indicates that the line is shown in the upper half of the level. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
  • exLevelMiddleLine(0x40), (no effect) indicates that the line is shown in the middle. For vertical/tick lines, it can be combined with exLevelDotLine or exLevelSolidLine
  • exLevelQuarterHeight(0x100), (no effect) indicates that the line is shown as a quarter of the full height. Specify the exLevelQuarterHeight option to show shorter tick lines in the chart's level. Can be combined with exLevelLowerHalf, exLevelUpperHalf or exLevelMiddleLine option
Type:
Example
0 or exontrol.Gantt.LevelLineEnum.exLevelNoLine {number}, hides the lines between chart's levels
 2 or exontrol.Gantt.LevelLineEnum.exLevelSolidLine {number}, shows solid lines between chart's levels

(static) firstVisibleDate :any

The firstVisibleDate field specifies the chart's first visible date. The type the firstVisibleDate field supports are:
  • firstVisibleDate {string}, defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
  • firstVisibleDate {Date}, indicates a JavaScript date to be copied
  • firstVisibleDate {number} integer value representing the year of the date to be created
  • firstVisibleDate {null}, indicates the current date and time (equivalent of Now)
Type:
  • any
Example
"#1/1/2001#" {string}, scrolls the control's chart to January 1st, 2001
 Date.Today() {Date}, scrolls the control's chart to today

(static) firstVisibleOffset :number

The firstVisibleOffset field specifies the chart's first visible offset (smooth horizontal scroll). Specifies the chart's first visible offset (indicates the horizontal-offset to display the chart's first visible date relative to its normal position)
Type:
  • number

(static) histogramHeight :number

The histogramHeight field specifies the height of the control's histogram
Type:
  • number
Example
0 {number}, hides the control's histogram (use better the histogramVisible on 0)
 36 {number}, defines the height of the control's histogram to 36-pixels tall

(static) histogramUnitCount :number

The histogramUnitCount field specifies the time-scale count to determine the effort of bars with variable-effort (effort of expression/string type). The histogramUnitScale and histogramUnitCount fields have effect only if the chart displays bars with variable-effort.
Type:
  • number
Example
null {null}, defaults to 1 histogram unit-scale
 2 {number}, every second histogram unit-scale is checked

(static) histogramUnitScale :exontrol.UnitEnum

The histogramUnitScale field specifies the time-scale unit to determine the effort of bars with variable-effort (effort of expression/string type). The histogramUnitScale and histogramUnitCount fields have effect only if the chart displays bars with variable-effort. The exontrol.UnitEnum type support the following values:
  • exYear (0), indicates the year scale
  • exHalfYear (1), indicates the half-year scale
  • exQuarterYear (2), indicates the quarter-year scale
  • exMonth (0x10), indicates the month scale
  • exThirdMonth (0x11), indicates the third-month scale
  • exWeek (0x100), indicates the week scale
  • exDay (0x1000), indicates the day scale
  • exHour (0x10000), indicates the hour scale
  • exMinute (0x100000), indicates the minute scale
  • exSecond (0x1000000), indicates the second scale
Type:
  • exontrol.UnitEnum
Example
null {null}, the chart's resizeUnitScale defines the histogram's unit-scale
 0x10000 or exontrol.UnitEnum.exHour {number}, sets the chart's histogram unit-scale to hours

(static) histogramView :Gantt.HistogramViewEnum

The histogramView field histogramView specifies the items the control's histogram displays data for. Indicates the items the control's histogram displays data for, as a combination of one or more flags of Gantt.HistogramViewEnum type. The Gantt.HistogramViewEnum type supports the following values and flags:
  • exHistogramVisibleItems(1), the histogram is shown for the visible items only
  • exHistogramSelectedItems(2), the histogram is shown for the selected items only
  • exHistogramCheckedItems(4), the histogram is shown for the checked items only
  • exHistogramSelectedBars(8), the histogram is shown for the selected bars only
  • exHistogramUnlockedItems(0x10), the histogram is shown only for unlocked items
  • exHistogramLockedTopItems(0x20), the histogram is shown only for locked items in the top side of the control
  • exHistogramLockedBottomItems(0x40), The histogram is shown only for locked items in the bottom side of the control
  • exHistogramAllItems(0x70), The histogram is shown for all items
  • exHistogramFilteredItems(0x80), The histogram is shown for the filtered items only
  • exHistogramLeafItems(0x100), The histogram shows the bars for leaf items (a leaf item contains no child items)
  • exHistogramRecLeafItems(0x200), The histogram shows all bars for all recursive leaf items (a leaf item contains no child items)
  • exHistogramNoGrouping(0x400), The histogram shows all bars without grouping based on the item's parent
  • exHistogramBackground(0x800), The histogram's chart goes on the background, while the non-working part is shown on front ( erases the non-working parts )
  • exHistogramNoGroupCaption(0x1000), The histogram shows no caption for groups being shown
  • exHistogramGroupCumulative(0x2000), The histogram shows cumulative groups
Type:
Example
9232 or exontrol.Gantt.HistogramViewEnum.exHistogramGroupCumulative | exontrol.Gantt.HistogramViewEnum.exHistogramUnlockedItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram using cumulative-colors, without grouping the items by parents
 1152 or exontrol.Gantt.HistogramViewEnum.exHistogramFilteredItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram for the visible items only (filtered items)
 1040 or exontrol.Gantt.HistogramViewEnum.exHistogramUnlockedItems | exontrol.Gantt.HistogramViewEnum.exHistogramNoGrouping {number}, shows the histogram for all items

(static) histogramVisible :boolean

The histogramVisible field specifies whether the chart's histogram is visible or hidden
Type:
  • boolean
Example
false {boolean}, the control's histogram is hidden
 true {boolean}, the control shows the historam

(static) histogramZOrder :string

The histogramZOrder field specifies the z-order of the bars to be shown within the chart's histogram
Type:
  • string
Example
"" {string} or null {null}, no z-order is specified
 "Task-A,Task" {number}, specifies that the "Task-A" bar is on top of "Task" when they display together within the chart's histogram

(static) labels :ChartLabelType

The labels field holds predefined format to display the level's label for each time-unit, as an object of {year, halfYear, quarterYear, month, thirdMonth, week, day, hour, minute, second} type as described:
year {string}, specifies the predefined format of the level when it displays years
halfYear {string}, specifies the predefined format of the level when it displays half of years
quarterYear {string}, specifies the predefined format of the level when it displays quarter of years
month {string}, specifies the predefined format of the level when it displays months
thirdMonth {string}, specifies the predefined format of the level when it displays third of months
week {string}, specifies the predefined format of the level when it displays weeks
day {string}, specifies the predefined format of the level when it displays days
hour {string}, specifies the predefined format of the level when it displays hours
minute {string}, specifies the predefined format of the level when it displays minutes
second {string}, specifies the predefined format of the level when it displays seconds
Type:

(static) levelCount :number

The levelCount field specifies the number of levels in the chart's header
Type:
  • number
Example
1 {number}, defines a single-level header
 2 {number}, specifies that the chart's header displays 2-levels
The link field specifies the appearance of the link between bars. The link object includes any of the following:
  • type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  • dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  • width {number}, specifies the link's width or size (1 by default)
  • color {string}, indicates the link's color (partial-black by default)
  • arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  • arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
  • arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
  • style {array}, specifies the link's dash pattern to show the lines (solid by default)
  • startPos {any}, indicates the list of corners of in-element, the link can start from
  • endPos {any}, indicates the list of corners of out-element, the link can end to
Type:
Example
The following sample defines "straight" links shown in gray:
{
   type: 2,
   color: "gray"
}

(static) linkEndTo :DisplayLinkType

The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links) The linkEndTo object includes any of the following:
  • type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  • dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  • width {number}, specifies the link's width or size (1 by default)
  • color {string}, indicates the link's color (partial-black by default)
  • arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  • arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
  • arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
  • style {array}, specifies the link's dash pattern to show the lines (solid by default)
  • startPos {any}, indicates the list of corners of in-element, the link can start from
  • endPos {any}, indicates the list of corners of out-element, the link can end to
Type:
Example
The following sample defines "direct" links shown in blue:
{
   type: 1,
   color: "blue"
}

(static) linkStartFrom :DisplayLinkType

The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links) The linkStartFrom object includes any of the following:
  • type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  • dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  • width {number}, specifies the link's width or size (1 by default)
  • color {string}, indicates the link's color (partial-black by default)
  • arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  • arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
  • arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
  • style {array}, specifies the link's dash pattern to show the lines (solid by default)
  • startPos {any}, indicates the list of corners of in-element, the link can start from
  • endPos {any}, indicates the list of corners of out-element, the link can end to
Type:
Example
The following sample defines "round" links shown in red:
{
   type: 3,
   color: "red"
}

(static) linkUnselected :DisplayLinkType

The linkUnselected field specifies the appearance of the link not related to any selected-bar (unselected links) The linkUnselected object includes any of the following:
  • type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  • dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  • width {number}, specifies the link's width or size (1 by default)
  • color {string}, indicates the link's color (partial-black by default)
  • arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  • arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2)
  • arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2)
  • style {array}, specifies the link's dash pattern to show the lines (solid by default)
  • startPos {any}, indicates the list of corners of in-element, the link can start from
  • endPos {any}, indicates the list of corners of out-element, the link can end to
Type:
Example
The following sample defines "rectangular" links of 2-pixels width with no direction:
{
   type: 0,
   width: 2,
   dir: 0
}

(static) locale :string

The locale field specifies the language to format the control.
Type:
  • string
Example
null {null}, indicates that the browser's UI language is used.
  "de" {string}, defines German locale
  "ro" {string}, defines Romanian locale

(static) maxUnitWidth :number

The maxUnitWidth field specifies the maximum width of the units within the base-level, while the user resizes or zooms-in/out the chart
Type:
  • number
Example
36 {number}, specifies that maximum width to display the units in base-level, is 36-pixels wide

(static) minUnitWidth :number

The minUnitWidth field specifies the minimum width of the units within the base-level, while the user resizes or zooms-in/out the chart
Type:
  • number
Example
12 {number}, specifies that minimum width to display the units in base-level, is 12-pixels wide

(static) nonworkingDays :number

The nonworkingDays field specifies the non-working days within a week. The nonworkingDays field can be a bit-combination of one or more flags:
  • 0b00000001 (1) {number}, specifies that each Sunday is a non-working day
  • 0b00000010 (2) {number}, specifies that each Monday is a non-working day
  • 0b00000100 (4) {number}, specifies that each Tuesday is a non-working day
  • 0b00001000 (8) {number}, specifies that each Wednesday is a non-working day
  • 0b00010000 (16) {number}, specifies that each Thursday is a non-working day
  • 0b00100000 (32) {number}, specifies that each Friday is a non-working day
  • 0b01000000 (64) {number}, specifies that each Saturday is a non-working day
Type:
  • number
Example
null {null}, the non-working days are weekend days, as defined by the chart's locale property (Saturday and Sunday are the weekend)
 0 {number}, all days of the week are working (no non-working days)
 0b01000001 or 65 {number}, every Sunday and Saturday is a non-working day (IE does not support binary representation)

(static) nonworkingHours :number

The nonworkingHours field specifies the non-working hours within a day. The nonworkingHours field can be a bit-combination of one or more flags:
  • 0b00000000000000000000000000000001 (1) {number}, indicates that the hour after 12PM is a non-working hour
  • 0b00000000000000000000000000000010 (2) {number}, indicates that the hour after 1AM is a non-working hour
  • 0b00000000000000000000000000000100 (4) {number}, indicates that the hour after 2AM is a non-working hour
  • 0b00000000000000000000000000001000 (8) {number}, indicates that the hour after 3AM is a non-working hour
  • 0b00000000000000000000000000010000 (16) {number}, indicates that the hour after 4AM is a non-working hour
  • 0b00000000000000000000000000100000 (32) {number}, indicates that the hour after 5AM is a non-working hour
  • 0b00000000000000000000000001000000 (64) {number}, indicates that the hour after 6AM is a non-working hour
  • 0b00000000000000000000000010000000 (128) {number}, indicates that the hour after 7AM is a non-working hour
  • 0b00000000000000000000000100000000 (256) {number}, indicates that the hour after 8AM is a non-working hour
  • 0b00000000000000000000001000000000 (512) {number}, indicates that the hour after 9AM is a non-working hour
  • 0b00000000000000000000010000000000 (1024) {number}, indicates that the hour after 10AM is a non-working hour
  • 0b00000000000000000000100000000000 (2048) {number}, indicates that the hour after 11AM is a non-working hour
  • 0b00000000000000000001000000000000 (4096) {number}, indicates that the hour after 12AM is a non-working hour
  • 0b00000000000000000010000000000000 (8192) {number}, indicates that the hour after 1PM is a non-working hour
  • 0b00000000000000000100000000000000 (16384) {number}, indicates that the hour after 2PM is a non-working hour
  • 0b00000000000000001000000000000000 (32768) {number}, indicates that the hour after 3PM is a non-working hour
  • 0b00000000000000010000000000000000 (65536) {number}, indicates that the hour after 4PM is a non-working hour
  • 0b00000000000000100000000000000000 (131072) {number}, indicates that the hour after 5PM is a non-working hour
  • 0b00000000000001000000000000000000 (262144) {number}, indicates that the hour after 6PM is a non-working hour
  • 0b00000000000010000000000000000000 (524288) {number}, indicates that the hour after 7PM is a non-working hour
  • 0b00000000000100000000000000000000 (1048576) {number}, indicates that the hour after 8PM is a non-working hour
  • 0b00000000001000000000000000000000 (2097152) {number}, indicates that the hour after 9PM is a non-working hour
  • 0b00000000010000000000000000000000 (4194304) {number}, indicates that the hour after 10PM is a non-working hour
  • 0b00000000100000000000000000000000 (8388608) {number}, indicates that the hour after 11PM is a non-working hour
Type:
  • number
Example
0 or null {number}, all hours of the week are working (no non-working hours)
 0b00000000111110000000000011111111 or 16253183 {number}, specifies that hours 8AM to 7PM are working hours (IE does not support binary representation)

(static) overlaidOnMoving :boolean

The overlaidOnMoving field specifies whether the overlaid bars are re-arranged while the user moves or resizes at runtime a bar
Type:
  • boolean
Example
false {boolean} or null {null}, the overlaid-bars are not re-arranged while user resizes or moves the item-bars
 true {boolean}, the overlaid-bars are re-arranged while user resizes or moves the item-bars

(static) overviewHeight :number

The overviewHeight field specifies the height of the control's overview
Type:
  • number
Example
0 {number}, hides the control's overview (use better the overviewVisible on 0)
 36 {number}, defines the height of the control's overview to 36-pixels tall

(static) overviewShowSelectDates :boolean

The overviewShowSelectDates field shows or hides the selected-date(s) on the control's overview
Type:
  • boolean
Example
false {boolean}, the selected-date(s) are not visible on the control's overview
 true {boolean}, shows the selected-date(s) on the control's overview

(static) overviewToolTip :string

The overviewToolTip field indicates the format of the tooltip being shown while the cursor hovers the chart's overview area. The overviewToolTip field supports ex-HTLM tags such as (<b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:
  • <%d%> - Day of the month in one or two numeric digits, as needed (1 to 31)
  • <%dd%> - Day of the month in two numeric digits (01 to 31)
  • <%d1%> - First letter of the weekday (S to S)
  • <%loc_d1%> - Indicates day of week as a one-letter abbreviation using the current user settings
  • <%d2%> - First two letters of the weekday (Su to Sa)
  • <%loc_d2%> - Indicates day of week as a two-letters abbreviation using the current user settings
  • <%d3%> - First three letters of the weekday (Sun to Sat)
  • <%loc_d3%> equivalent with <%loc_ddd%>
  • <%ddd%> - First three letters of the weekday (Sun to Sat)
  • <%loc_ddd%> - Indicates the day of week as a three-letter abbreviation using the current user regional and language settings
  • <%dddd%> - Full name of the weekday (Sunday to Saturday)
  • <%loc_dddd%> - Indicates day of week as its full name using the current user regional and language settings
  • <%i%> - Displays the number instead the date
  • <%w%> - Day of the week (1 to 7)
  • <%ww%> - Week of the year (1 to 53)
  • <%m%> - Month of the year in one or two numeric digits, as needed (1 to 12)
  • <%mr%> - Month of the year in Roman numerals, as needed (I to XII)
  • <%mm%> - Month of the year in two numeric digits (01 to 12)
  • <%m1%> - First letter of the month (J to D)
  • <%loc_m1%> - Indicates month as a one-letter abbreviation using the current user settings
  • <%m2%> - First two letters of the month (Ja to De)
  • <%loc_m2%> - Indicates month as a two-letters abbreviation using the current user settings
  • <%m3%> - First three letters of the month (Jan to Dec)
  • <%loc_m3%> - equivalent with <%loc_mmm%>
  • <%mmm%> - First three letters of the month (Jan to Dec)
  • <%loc_mmm%> - Indicates month as a three-letter abbreviation using the current user regional and language settings
  • <%mmmm%> - Full name of the month (January to December)
  • <%loc_mmmm%> - Indicates month as its full name using the current user regional and language settings
  • <%q%> - Date displayed as the quarter of the year (1 to 4)
  • <%y%> - Number of the day of the year (1 to 366)
  • <%yy%> - Last two digits of the year (01 to 99)
  • <%yyyy%> - Full year (0100 to 9999)
  • <%hy%> - Date displayed as the half of the year (1 to 2)
  • <%loc_g%> - Indicates period/era using the current user regional and language settings
  • <%loc_gg%> - Indicates period/era using the current user regional and language settings
  • <%loc_sdate%> - Indicates the date in the short format using the current user regional and language settings
  • <%loc_ldate%> - Indicates the date in the long format using the current user regional and language settings
  • <%loc_dsep%> - Indicates the date separator using the current user regional and language settings (/)
  • <%h%> - Hour in one or two digits, as needed (0 to 23)
  • <%hh%> - Hour in two digits (00 to 23)
  • <%h12%> - Hour in 12-hour time format, in one or two digits - [0(12),11]
  • <%hh12%> - Hour in 12-hour time format, in two digits - [00(12),11]
  • <%n%> - Minute in one or two digits, as needed (0 to 59)
  • <%nn%> - Minute in two digits (00 to 59)
  • <%s%> - Second in one or two digits, as needed (0 to 59)
  • <%ss%> - Second in two digits (00 to 59)
  • <%AM/PM%> - Twelve-hour clock with the uppercase letters "AM" or "PM", as appropriate
  • <%loc_AM/PM%> - Indicates the time marker such as AM or PM using the current user regional and language settings
  • <%loc_A/P%> - Indicates the one character time marker such as A or P using the current user regional and language settings
  • <%loc_time%> - Indicates the time using the current user regional and language settings
  • <%loc_time24%> - Indicates the time in 24 hours format without a time marker using the current user regional and language settings
  • <%loc_tsep%> - indicates the time separator using the current user regional and language settings (:)
  • <%loc_y%> - Represents the Year only by the last digit, using current regional settings
  • <%loc_yy%> - Represents the Year only by the last two digits, using current regional settings. A leading zero is added for single-digit years
  • <%loc_yyyy%> - Represents the Year by a full four or five digits, depending on the calendar used. Thai Buddhist and Korean calendars have five-digit years. The "yyyy" pattern shows five digits for these two calendars, and four digits for all other supported calendars. Calendars that have single-digit or two-digit years, such as for the Japanese Emperor era, are represented differently. A single-digit year is represented with a leading zero, for example, "03". A two-digit year is represented with two digits, for example, "13". No additional leading zeros are displayed
Type:
  • string
Example
"" {string}, displays no tooltip
"<%ddd%> <%m%>/<%d%>/<%yyyy%>" {string}, displays the date from the overview as "Sun 12/2/2007"

(static) overviewVisible :Gantt.OverviewVisibleEnum

The overviewVisible field specifies whether the chart's overview layout is visible or hidden. The Gantt.OverviewVisibleEnum type supports the following values and flags:
  • exOverviewHidden(0), the control's overview is not visible
  • exOverviewShowOnlyVisible(1), the control's overview shows the bars from the visible items using the range of bars in the visible items only
  • exOverviewShowAllVisible(2), the control's overview shows the bars from the visible items using the range for all bars in the chart
  • exOverviewAllowVerticalScroll(0x100), indicates whether the user can vertically scroll the chart while navigating up or down the overview part of the control. For instance, you can click the overview panel, the chart displays the selected area, and you can drag the cursor left or right to select a new date-time range to be displayed, or you can go up or down, to scroll items up or down
  • exOverviewHideBars(0x200), prevents showing the bars in the overview part of the control. For instance, you can use this flag in combination of any other flag to show just the time-scale in the overview part of the control, to allow the user to quickly scroll the chart's content to a specific time-zone
  • exOverviewShowDateTimeScale(0x1000), specifies whether the overview part of the control displays the date-time scale. This flag includes the time-scale on the overview. The time-scale intersects the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScale flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control
  • exOverviewShowDateTimeScaleSplit(0x1400), specifies whether the overview's date-time scale is displayed into a separate portion of the overview. This flag includes the time-scale on the overview. The time-scale does not intersect the bars in the overview. By default, the time-scale of the overview part is shown on the top of it, so you can combine the exOverviewShowDateTimeScaleSplit flag with exOverviewShowDateTimeScaleBottom flag, to display the time-scale on the bottom side of the overview part of the control
  • exOverviewShowDateTimeScaleBottom(0x1800), specifies whether the overview's date-time scale is displayed on the bottom side of the overview. By default, the time-scale of the overview part is shown on the top of it, so you can use the exOverviewShowDateTimeScaleBottom flag with exOverviewShowDateTimeScale or exOverviewShowDateTimeScaleSplit to display the time-scale on the bottom side of the overview part of the control
  • exOverviewShowMargins(0x2000), displays the limits of the overview bars. You can include the exOverviewShowMargins flag to display the margins/limits of all (project) / visible bars. In other words, the exOverviewShowMargins flag displays the minimal ItemBar(exBarStart) value, and the maximal ItemBar(exBarEnd) value
  • exOverviewShowSelMargins(0x4000), displays the selection limits (first/last visible date in the chart)
  • exOverviewSplitter(0x10000), specifies whether the overview's horizontal splitter is visible or hidden(makes the control's overview resizable or fixed)
Type:
Example
0 or exontrol.Gantt.OverviewVisibleEnum.exOverviewHidden {number}, the control's overview is hidden
 70658 or exontrol.Gantt.OverviewVisibleEnum.exOverviewSplitter | exontrol.Gantt.OverviewVisibleEnum.exOverviewShowDateTimeScaleSplit | exontrol.Gantt.OverviewVisibleEnum.exOverviewShowAllVisible {number}, indicates that the overview is resizable, it displays the bars for all items and the overview time-scale too

(static) overviewZoomCaption :string

The overviewZoomCaption field specifies the list of captions for each zooming time-unit, separated by | character. The list should contain a caption for each unit, from the exYear to exSecond. For instance, if you want to show nothing for exHalfYear zooming unit, the overviewZoomCaption should be: "Year||¼Year...", and so on
Type:
  • string
Example
"|||Month||Week|Day|||" {string}, shows just month, week and day scales into the overview
"Year|||Month||Week|Day|||" {string}, shows year, month, week and day scales into the overview

(static) overviewZoomUnit :number

The overviewZoomUnit field specifies the width of the time-unit scale in the overview
Type:
  • number
Example
0 {number}, the overview displays no zooming time-scales
 36 {number}, sets the width of the zooming time-scale to 36 pixels

(static) paneWidthLeft :number

The paneWidthLeft field specifies the width of the control's left-pane (items)
Type:
  • number
Example
0 {number}, hides the control's left-pane (items)
 300 {number}, changes the width of control's left-pane (items) to 300

(static) paneWidthRight :number

The paneWidthRight field specifies the width of the control's right-pane (chart)
Type:
  • number
Example
0 {number}, hides the control's right-pane (chart)
 300 {number}, changes the width of control's right-pane (chart) to 300

(static) resizeUnitCount :number

The resizeUnitCount field specifies the count of time-unit(s) to create, move or resize bars
Type:
  • number
Example
null {null}, the count of time-unit(s) of the chart's base level indicates the count of time-unit(s) to create, move or resize bars
 3 {number}, creates, moves or resizes to every third time-unit(s)

(static) resizeUnitScale :exontrol.UnitEnum

The resizeUnitScale field specifies the time-unit to create, move or resize bars (for instance, even the chart displays weeks, the user can create, more or resize hours by hours). The exontrol.UnitEnum type support the following values:
  • exYear (0), indicates the year scale
  • exHalfYear (1), indicates the half-year scale
  • exQuarterYear (2), indicates the quarter-year scale
  • exMonth (0x10), indicates the month scale
  • exThirdMonth (0x11), indicates the third-month scale
  • exWeek (0x100), indicates the week scale
  • exDay (0x1000), indicates the day scale
  • exHour (0x10000), indicates the hour scale
  • exMinute (0x100000), indicates the minute scale
  • exSecond (0x1000000), indicates the second scale
Type:
  • exontrol.UnitEnum
Example
null {null}, the chart's resize unit-scale is identichal with the chart's unit-scale (unitScale property)
 0x10000 or exontrol.UnitEnum.exHour {number}, sets the chart's resize unit-scale to hours

(static) scrollBar :boolean

The scrollBar field shows or hides the chart's horizontal scroll-bar
Type:
  • boolean
Example
false {boolean}, hides the chart's horizontal scroll-bar

(static) scrollRange :ScrollRangeType

The scrollRange field specifies the range of dates to scroll within, as an object of {start, end} type.
Type:
Example
The following sample limits the chart's scroll-range to Jan 1st, 2001 to Jan 1st, 2002:

{
   start: 2001
   end: 2002
}

The following sample limits the chart's scroll-range to Apr 1st, 2021 to Apr 30, 2021:

{
   start: "#4/1/2021#"
   end: "#4/30/2021#"
}

(static) selectDates :Array.<object>

The selectDates field specifies the chart's selected-dates, as an array of [{start,end}] type, where:
  • start {any}, specifies the date-time the selected time period begins
  • end {any}, specifies the date-time the selected time period ends
The start or end field can be any of the following types:
  • date {string}, defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
  • date {Date}, indicates a JavaScript date to be copied
  • date {number} integer value representing the year of the date to be created
  • date {null}, indicates the current date and time (equivalent of Now)
Type:
  • Array.<object>
Example
null {null}, removes all selected dates
 {start: 2001, end: 2002} {object}, selects the time zone from Jan 1st 2001, to Jan 1st 2002
 {start: Date.Today(), end: Date.Today().NextDay()} {object}, selects today
 ["#12/31/2000#",{start: "#1/1/2001#", end: "#1/2/2001#"}] {array}, selects one second from "Sun, 31 Dec 2000 00:00:00 GMT" to "31 Dec 2000 00:00:01 GMT", and one day from "Mon, 01 Jan 2001 00:00:00 GMT" to "Tue, 02 Jan 2001 00:00:00 GMT"
 "#12/31/2000#" {string}, selects one second from "Sun, 31 Dec 2000 00:00:00 GMT" to "31 Dec 2000 00:00:01 GMT"
The showLinks field indicates whether the control shows or hides the links between bars. Indicates a combination of one or more exontrol.ShowLinksEnum that defines whether the links between bars are visible or hidden. The exontrol.ShowLinksEnum type supports the following flags:
  • exHide (0), specifies that no links are visible
  • exExtended (0x01), specifies that links are shown as extended
  • exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
  • exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
  • exCrossRect (0x20), shows rectangular cross-links
  • exCrossTriangle (0x20), shows triangular cross-links
  • exCrossMixt (0x60), shows mixt cross-links
Type:
  • exontrol.ShowLinksEnum
Example
0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
 1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
 33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links

(static) showNonworkingDays :boolean

The showNonworkingDays field shows or hides the non-working days.
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working days

(static) showNonworkingHours :boolean

The showNonworkingHours field shows or hides the non-working hours.
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working hours

(static) showNonworkingUnits :boolean

The showNonworkingUnits field shows or hides the non-working units (days and hours).
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working units (days and hours)

(static) singleSel :exontrol.Tree.SingleSelEnum

The singleSel field specifies whether the chart supports single, multiple, toggle selection. The exontrol.Tree.SingleSelEnum type defines the following flags:
  • exDisableSel(0), specifies that the chart's selection is disabled (can not be combined with any other flags)
  • exEnableSel(1), specifies that the chart's selection is enabled (multiple-selection, unless the exSingleSel is set )
  • exSingleSel(2), specifies that the user can select an item-bar only
  • exToggleSel(4), specifies that the item-bar's selection state is toggled once the user clicks an item-bar.
  • exDisableCtrlSel(8), disables toggling the item-bar's selection state when user clicks an item-bar, while CTRL modifier key is pressed.
  • exDisableShiftSel(16), disables selecting item-bars using the SHIFT key.
  • exDisableDrag(32), disables selecting item-bars by drag.
Type:
  • exontrol.Tree.SingleSelEnum
Example
0 or exontrol.Tree.SingleSelEnum.exDisableSel {number}, disables selecting any item-bar
 3 or exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel {number}, enables chart's single selection, so only a single item-bar can be selected
 6 or exontrol.Tree.SingleSelEnum.exToggleSel | exontrol.Tree.SingleSelEnum.exSingleSel {number}, enables chart's single and toggle selection, which means that once an item-bar is selected it gets unselected once it is clicked, or reverse, and only a single-item-bar can be selected at once.

(static) toolTips :ChartLabelType

The toolTips field holds predefined-tooltips for each time-unit, as an object of {year, halfYear, quarterYear, month, thirdMonth, week, day, hour, minute, second} type as described:
year {string}, specifies the predefined format of the level when it displays years
halfYear {string}, specifies the predefined format of the level when it displays half of years
quarterYear {string}, specifies the predefined format of the level when it displays quarter of years
month {string}, specifies the predefined format of the level when it displays months
thirdMonth {string}, specifies the predefined format of the level when it displays third of months
week {string}, specifies the predefined format of the level when it displays weeks
day {string}, specifies the predefined format of the level when it displays days
hour {string}, specifies the predefined format of the level when it displays hours
minute {string}, specifies the predefined format of the level when it displays minutes
second {string}, specifies the predefined format of the level when it displays seconds
Type:

(static) unitScale :exontrol.UnitEnum

The unitScale field indicates the base unit being displayed. The exontrol.UnitEnum type support the following values:
  • exYear (0), indicates the year scale
  • exHalfYear (1), indicates the half-year scale
  • exQuarterYear (2), indicates the quarter-year scale
  • exMonth (0x10), indicates the month scale
  • exThirdMonth (0x11), indicates the third-month scale
  • exWeek (0x100), indicates the week scale
  • exDay (0x1000), indicates the day scale
  • exHour (0x10000), indicates the hour scale
  • exMinute (0x100000), indicates the minute scale
  • exSecond (0x1000000), indicates the second scale
Type:
  • exontrol.UnitEnum
Example
4096 or exontrol.UnitEnum.exDay {number}, sets the chart to display days

(static) unitWidth :number

The unitWidth field specifies the width to display the units in base-level
Type:
  • number
Example
8 {number}, changes the width for units in the base-level to 8-pixels

(static) unitWidthNonworking :number

The unitWidthNonworking field specifies the width to display the non-working units in base-level. The unitWidthNonworking field can be any of the following:
  • 0 {number}, no effect (the unitWidth field specifies the width for all units, including the non-working units in base-level). The showNonworkingUnits field, specifies whether the chart displays non-working units.
  • negative {number}, indicates that neighbor non-working units are shown as a single non-working unit with specified width ( absolute value )
  • positive {number}, indicates the width for non-working units
Type:
  • number
Example
0 {number}, no effect (the unitWidth field specifies the width for all units, including the non-working units in base-level)
 -18 {number}, neighbor non-working units are shown as a single non-working unit with specified width (18-pixels wide)