ChartOptions class (Gantt)

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. The units of the levels are aligned with the units of the base level when the adjustLevelsToBase field is set to true, which means that the levels display time-units in a way that each level's unit is an integer-multiple of the base-level's unit. For instance, if the base-level displays days and the adjustLevelsToBase field is set to true, then the upper levels display years, half-years, quarters or months (but not weeks or third-months), because years, half-years, quarters and months are integer-multiples of days, while weeks and third-months are not integer-multiples of days. The adjustLevelsToBase field is mapped to the Chart.AdjustLevelsToBase property, so the following statements are equivalent:
oChart.Options = {adjustLevelsToBase: true}
oChart.SetOptions({adjustLevelsToBase: true})
oChart.AdjustLevelsToBase = true
oChart.SetAdjustLevelsToBase(true)
Type:
  • boolean
Example
true {boolean}, aligns the units of the level with units of the base-level
false {boolean}, does not align the units of the level with units of the base-level (for instance, if the base-level displays days, the upper levels can display years, half-years, quarters, months, weeks or third-months)
adjustLevelsToBase

(static) allowOverviewZoom :boolean

The allowOverviewZoom field indicates whether the chart's overview shows the time-scales the user can zoom to. 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. The overviewZoomCaption field is used in combination with the allowOverviewZoom and overviewZoomUnit fields to show the zooming time-scales in the control's overview part. The allowOverviewZoom field indicates whether the chart's overview shows the time-scales the user can zoom to, while the overviewZoomUnit field specifies the width of the time-unit scale in the overview part of the control.

The allowOverviewZoom field is mapped to the Chart.AllowOverviewZoom property, so the following statements are equivalent:

oChart.Options = {allowOverviewZoom: true}
oChart.SetOptions({allowOverviewZoom: true})
oChart.AllowOverviewZoom = true
oChart.SetAllowOverviewZoom(true)
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
allowOverviewZoom

(static) allowSelectDate :exontrol.Tree.SingleSelEnum

The allowSelectDate field indicates whether the user can select single, multiple, toggle dates. The control supports selection of item-bars and dates. The selectDates field specifies the chart's selected-dates, as an array of [{start,end}] type. The singleSel field specifies the selection mode for item-bars, while the allowSelectDate field specifies the selection mode for dates. The allowSelectDate field can be any combination of exontrol.Tree.SingleSelEnum flags. The allowSelectDate field is mapped to the Chart.AllowSelectDate property, so the following statements are equivalent:
oChart.Options = {allowSelectDate: exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel}
oChart.SetOptions({allowSelectDate: exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel})
oChart.AllowSelectDate = exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel
oChart.SetAllowSelectDate(exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel)

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.
allowSelectDate

(static) bars :BarOptions

The bars field defines the predefined-bars of the control, as an object of BarOptions type. The Bars property accesses the chart's type of bars. The Bars.Add method adds a predefined-bar to the chart's bars collection, and the Bars.Remove method removes a predefined-bar from the chart's bars collection. The predefined-bars defined by the bars field are added to the chart's bars collection, and they can be accessed through the Bars property. For instance, if the bars field defines a predefined-bar of "Task" type, then it can be accessed through Gantt.Bar("Task") property.

The bars field is mapped to the Chart.Bars property, so the following statements are equivalent:

oChart.Options = {bars: {Task: {height: 12, shape: {frameColor: "rgb(0,0,255)", patternColor: "rgb(0,0,255)", pattern: 6, primitive: "RoundRect"}}}}
oChart.SetOptions({bars: {Task: {height: 12, shape: {frameColor: "rgb(0,0,255)", patternColor: "rgb(0,0,255)", pattern: 6, primitive: "RoundRect"}}}})
oChart.Bars = {Task: {height: 12, shape: {frameColor: "rgb(0,0,255)", patternColor: "rgb(0,0,255)", pattern: 6, primitive: "RoundRect"}}}
oChart.SetBars({Task: {height: 12, shape: {frameColor: "rgb(0,0,255)", patternColor: "rgb(0,0,255)", pattern: 6, primitive: "RoundRect"}}})
Type:
Example
"Task":
 {
   height: 12,
   shape:
   {
     frameColor: "rgb(0,0,255)",
     patternColor: "rgb(0,0,255)",
     pattern: 6, // exontrol.PatternEnum.exPatternBDiagonal
     primitive: "RoundRect"
   }
 }
bars

(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 drawDateTicker field specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The dateTickerLabelVAlign field gets or sets the vertical alignment of the date label, while create, resize or move the bar. The dateTickerLabelHMargin field gets or sets the distance between the date-label and the bar, while create, resize or move it. The dateTickerLabel field is mapped to the Chart.DateTickerLabel property, so the following statements are equivalent:
oChart.Options = {dateTickerLabel: "<b><%DATE%></b>"}
oChart.SetOptions({dateTickerLabel: "<b><%DATE%></b>"})
oChart.DateTickerLabel = "<b><%DATE%></b>"
oChart.SetDateTickerLabel("<b><%DATE%></b>")

The dateTickerLabel supports ex-HTML tags such as (<b>, <i>, <fgcolor>, ...), <%DATE%> and <=FORMULA%> (@since 2.3) tags.

The <%=FORMULA%> tag (@since 2.3) holds a format-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:
Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Type:
  • string
Example
null {null}, no date-ticker(s) is shown while a bar is created, moved or resized
"&lt;%loc_sdate%&gt;" {string} displays the bar's margins in short format
"&lt;c&gt;&lt;b&gt;&lt;%mmm%&gt; &lt;%d%&gt;&lt;/b&gt;&lt;br&gt;&lt;c&gt;&lt;%hh%&gt;:&lt;%nn%&gt;" {string}, displays the month and day on the first line, while the second shows the hour and minute
"&lt;%=shortdate(value=end?value-1:value)%&gt;" {string}, displays the end-margin with one day before (@since 2.3)
"&lt;%mmm%&gt; &lt;%d%&gt;&lt;fgcolor 808080&gt;&lt;%=value=end?` (`+(end - start) + `)`:``%&gt;" {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)
"&lt;%=value=start?``:value%&gt;" {string}, specifies that only end-margin of the bar is being shown (@since 2.3)
dateTickerLabel

(static) dateTickerLabelHMargin :number

The dateTickerLabelHMargin field specifies the distance between the date-label and the bar, while create, resize or move it. The drawDateTicker field specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The dateTickerLabelVAlign field gets or sets the vertical alignment of the date label, while create, resize or move the bar. The dateTickerLabel field specifies the format to display the bar's start and end margins while creating, moving or resizing it.

The dateTickerLabelHMargin field is mapped to the Chart.DateTickerLabelHMargin property, so the following statements are equivalent:

oChart.Options = {dateTickerLabelHMargin: 4}
oChart.SetOptions({dateTickerLabelHMargin: 4})
oChart.DateTickerLabelHMargin = 4
oChart.SetDateTickerLabelHMargin(4)
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
dateTickerLabelHMargin

(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

The drawDateTicker field specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The dateTickerLabelHMargin field gets or sets the distance between the date-label and the bar, while create, resize or move it. The dateTickerLabel field specifies the format to display the bar's start and end margins while creating, moving or resizing it.

The dateTickerLabelVAlign field is mapped to the Chart.DateTickerLabelVAlign property, so the following statements are equivalent:

oChart.Options = {dateTickerLabelVAlign: 1}
oChart.SetOptions({dateTickerLabelVAlign: 1})
oChart.DateTickerLabelVAlign = 1
oChart.SetDateTickerLabelVAlign(1)
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
dateTickerLabelVAlign

(static) drawDateTicker :boolean

The drawDateTicker field specifies whether the chart supports date-ticker (the chart's date-ticker is visible only if the mouse pointer hovers the chart area). The dateTickerLabelVAlign field gets or sets the vertical alignment of the date label, while create, resize or move the bar. The dateTickerLabelHMargin field gets or sets the distance between the date-label and the bar, while create, resize or move it. The dateTickerLabel field specifies the format to display the bar's start and end margins while creating, moving or resizing it.

The drawDateTicker field is mapped to the Chart.DrawDateTicker property, so the following statements are equivalent:

oChart.Options = {drawDateTicker: true}
oChart.SetOptions({drawDateTicker: true})
oChart.DrawDateTicker = true
oChart.SetDrawDateTicker(true)
Type:
  • boolean
Example
true {boolean}, shows the chart's ticker that's visible only when the mouse pointer hovers the date-time
false {boolean}, hides the chart's date-ticker
drawDateTicker

(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

The drawGridLines field is mapped to the Chart.DrawGridLines property, so the following statements are equivalent:

oChart.Options = {drawGridLines: exontrol.Tree.GridLinesEnum.exAllLines}
oChart.SetOptions({drawGridLines: exontrol.Tree.GridLinesEnum.exAllLines})
oChart.DrawGridLines = exontrol.Tree.GridLinesEnum.exAllLines
oChart.SetDrawGridLines(exontrol.Tree.GridLinesEnum.exAllLines)
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
drawGridLines

(static) drawLevelSeparator :Gantt.LevelLineEnum

The drawLevelSeparator field shows or hides lines between chart's levels (header). The drawGridLines field shows or hides the chart's grid-lines. The drawLevelSeparator field can be set to 0 or exontrol.Gantt.LevelLineEnum.exLevelNoLine to hide the lines between chart's levels, or it can be set to 1 or exontrol.Gantt.LevelLineEnum.exLevelDotLine to show dotted lines between chart's levels, or it can be set to 2 or exontrol.Gantt.LevelLineEnum.exLevelSolidLine to show solid 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

The drawLevelSeparator field is mapped to the Chart.DrawLevelSeparator property, so the following statements are equivalent:

oChart.Options = {drawLevelSeparator: 2}
oChart.SetOptions({drawLevelSeparator: 2})
oChart.DrawLevelSeparator = 2
DrawLevelSeparator.Set(2)
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
drawLevelSeparator

(static) firstVisibleDate :any

The firstVisibleDate field specifies the chart's first visible date. The firstVisibleOffset field specifies the chart's first visible offset (smooth horizontal scroll). The firstVisibleDate and firstVisibleOffset fields specify the chart's first visible date and offset, so the chart is scrolled to display the specified date with the specified offset. The firstVisibleDate field can be set at runtime to scroll the chart to a specific date, while the firstVisibleOffset field can be set at runtime to smoothly scroll the chart horizontally. The firstVisibleDate and firstVisibleOffset fields are interrelated, so changing one may affect the other. The Chart.ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area.

The type the firstVisibleDate field supports are:

  • {string}, defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
  • {Date}, indicates a JavaScript date to be copied
  • {number} integer value representing the year of the date to be created
  • {null}, indicates the current date and time (equivalent of Now)

The firstVisibleDate field is mapped to the Chart.FirstVisibleDate property, so the following statements are equivalent:

oChart.Options = {firstVisibleDate: "#1/1/2001#"}
oChart.SetOptions({firstVisibleDate: "#1/1/2001#"})
oChart.FirstVisibleDate = "#1/1/2001#"
oChart.SetFirstVisibleDate("#1/1/2001#")
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
firstVisibleDate

(static) firstVisibleOffset :number

The firstVisibleOffset field specifies the horizontal-offset to display the chart's first visible date relative to its normal position (smooth horizontal scroll). The firstVisibleDate and firstVisibleOffset fields specify the chart's first visible date and offset, so the chart is scrolled to display the specified date with the specified offset. The firstVisibleDate field can be set at runtime to scroll the chart to a specific date, while the firstVisibleOffset field can be set at runtime to smoothly scroll the chart horizontally. The firstVisibleDate and firstVisibleOffset fields are interrelated, so changing one may affect the other. The Chart.ScrollTo() method scrolls the chart to ensure that specified date fits the chart's area.

The firstVisibleOffset field is mapped to the Chart.FirstVisibleOffset property, so the following statements are equivalent:

oChart.Options = {firstVisibleOffset: 100}
oChart.SetOptions({firstVisibleOffset: 100})
oChart.FirstVisibleOffset = 100
oChart.SetFirstVisibleOffset(100)
Type:
  • number
firstVisibleOffset

(static) histogramHeight :number

The histogramHeight field specifies the height of the control's histogram. The histogramVisible field specifies whether the chart's histogram is visible or hidden. The histogramView field histogramView specifies the items the control's histogram displays data for. By default, the control's histogram is 36-pixels tall. You can set the histogramHeight field to 0 to hide the control's histogram, but it is better to use the histogramVisible field with false value to hide the control's histogram, because setting the histogramHeight field to 0 hides just the content of the histogram part of the control, but it does not prevent showing an empty area for the histogram part of the control while resizing it.

The histogramHeight field is mapped to the Chart.HistogramHeight property, so the following statements are equivalent:

oChart.Options = {histogramHeight: 36}
oChart.SetOptions({histogramHeight: 36})
oChart.HistogramHeight = 36
oChart.SetHistogramHeight(36)
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
histogramHeight

(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. The histogramUnitScale / histogramUnitCount fields have effect only for item-bars with ItemBar.Effort property to refer an expression (defines an variable-effort). The value keyword indicates the date-time being queried, the start and end keywords specify the starting and ending points of the bar as indicated by Start and End properties of the ItemBar object. For instance, the ItemBar.Effort on "weekday(value) in (0,6) ? 0 : 2", means that that effort to do the job is 2 for any day in the task, excepts the Sundays(0) and Saturdays(6) (weekend. For instance, the "(hour(value) > 5 and hour(value) < 18) ? 2 : 0" indicates that the bar's effort is 2 for any hour between 6AM and 18PM, and 0 for rest. By default, the histogramUnitScale field is equivalent with resizeUnitScale field.

The histogramUnitCount field is mapped to the Chart.HistogramUnitCount property, so the following statements are equivalent:

oChart.Options = {histogramUnitCount: 2}
oChart.SetOptions({histogramUnitCount: 2})
oChart.HistogramUnitCount = 2
oChart.SetHistogramUnitCount(2)
Type:
  • number
Example
null {null}, defaults to 1 histogram unit-scale
2 {number}, every second histogram unit-scale is checked
histogramUnitCount

(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 histogramUnitScale / histogramUnitCount fields have effect only for item-bars with ItemBar.Effort property to refer an expression (defines an variable-effort). The value keyword indicates the date-time being queried, the start and end keywords specify the starting and ending points of the bar as indicated by Start and End properties of the ItemBar object. For instance, the ItemBar.Effort on "weekday(value) in (0,6) ? 0 : 2", means that that effort to do the job is 2 for any day in the task, excepts the Sundays(0) and Saturdays(6) (weekend. For instance, the "(hour(value) > 5 and hour(value) < 18) ? 2 : 0" indicates that the bar's effort is 2 for any hour between 6AM and 18PM, and 0 for rest. By default, the histogramUnitScale field is equivalent with resizeUnitScale field.

The histogramUnitScale field is mapped to the Chart.HistogramUnitScale property, so the following statements are equivalent:

oChart.Options = {histogramUnitScale: exontrol.UnitEnum.exHour}
oChart.SetOptions({histogramUnitScale: exontrol.UnitEnum.exHour})
oChart.HistogramUnitScale = exontrol.UnitEnum.exHour
oChart.SetHistogramUnitScale(exontrol.UnitEnum.exHour)

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
histogramUnitScale

(static) histogramView :Gantt.HistogramViewEnum

The histogramView field histogramView specifies the items the control's histogram displays data for. The histogramVisible field specifies whether the chart's histogram is visible or hidden. The histogramHeight field specifies the height of the control's histogram. By default, the control's histogram shows the bars for all items, so you can set the histogramView field to exHistogramVisibleItems to show the histogram for the visible items only, or to exHistogramSelectedItems to show the histogram for the selected items only, and so on.

The histogramView field is mapped to the Chart.HistogramView property, so the following statements are equivalent:

oChart.Options = {histogramView: exontrol.Gantt.HistogramViewEnum.exHistogramVisibleItems}
oChart.SetOptions({histogramView: exontrol.Gantt.HistogramViewEnum.exHistogramVisibleItems})
oChart.HistogramView = exontrol.Gantt.HistogramViewEnum.exHistogramVisibleItems
oChart.SetHistogramView(exontrol.Gantt.HistogramViewEnum.exHistogramVisibleItems)

The histogramView field 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
histogramView

(static) histogramVisible :boolean

The histogramVisible field specifies whether the chart's histogram is visible or hidden. The histogramHeight field specifies the height of the control's histogram. The histogramView field histogramView specifies the items the control's histogram displays data for.

The histogramVisible field is mapped to the Chart.HistogramVisible property, so the following statements are equivalent:

oChart.Options = {histogramVisible: true}
oChart.SetOptions({histogramVisible: true})
oChart.HistogramVisible = true
oChart.SetHistogramVisible(true)
Type:
  • boolean
Example
false {boolean}, the control's histogram is hidden
true {boolean}, the control shows the historam
histogramVisible

(static) histogramZOrder :string

The histogramZOrder field specifies the z-order of the bars to be shown within the chart's histogram. The histogramZOrder field contains a comma-separated list of bar-names/types, defining the z-order of bars when they display together within the chart's histogram. The Bar.Name of the bar defines its type. By default, the control defines the following bar-names/types:
  • "Task"
  • "Split"
  • "Progress"
  • "Milestone"
  • "Summary"
  • "Project Summary"
  • "Deadline"

You can also define new bar types by calling the Bars.Add() method and specifying the name parameter.

The histogramZOrder field is mapped to the Chart.HistogramZOrder property, so the following statements are equivalent:

oChart.Options = {histogramZOrder: "Task-A,Task"}
oChart.SetOptions({histogramZOrder: "Task-A,Task"})
oChart.HistogramZOrder = "Task-A,Task"
oChart.SetHistogramZOrder("Task-A,Task")
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
histogramZOrder

(static) labels :ChartLabelType

The labels field holds predefined format to display the level's label for every 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

The Chart.SetLabel(unit,value) method sets the predefined format of the level's label for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level shows date-time values according to the labels field.

The labels field is mapped to the Chart.Labels property, so the following statements are equivalent:

oChart.Options = {labels: {day: "dd", month: "MM"}}
oChart.SetOptions({labels: {day: "dd", month: "MM"}})
oChart.Labels = {day: "dd", month: "MM"}
oChart.SetLabels({day: "dd", month: "MM"})
Type:
labels

(static) levelCount :number

The levelCount field specifies the number of levels in the chart's header. The chart's header can display one or more levels, depending on the levelCount field. Each level can display a different time-unit (for instance, the first level can display months, while the second level can display years). The labels field holds predefined format to display the level's label for every time-unit, so the chart can automatically display the appropriate label for each level, depending on the unit it displays. By default, the chart displays 2 levels in its header.

The levelCount field is mapped to the Chart.LevelCount property, which means that the following statements are equivalent:

oChart.Options = {levelCount: 2}
oChart.SetOptions({levelCount: 2})
oChart.LevelCount = 2
oChart.SetLevelCount(2)
Type:
  • number
Example
1 {number}, defines a single-level header
2 {number}, specifies that the chart's header displays 2-levels
levelCount
The link field specifies the appearance of the link between bars. The showLinks field specifies whether the control displays or hides the links between bars. The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). The linkEndTo field gets or sets the appearance of the link that ends to any selected-bar (incoming links). The linkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links). The Gantt.Link() method retrieves a link by its index, identifier/key, or reference.The Links.Add() method creates a new link between two bars, using the current link appearance as defined by the Chart.Link property (link field equivalent).

The link field is mapped to the Chart.Link property, so the following statements are equivalent:

oChart.Options = {link: {type: 2, color: "gray"}}
oChart.SetOptions({link: {type: 2, color: "gray"}})
oChart.Link = {type: 2, color: "gray"}
oChart.SetLink({type: 2, color: "gray"})

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"
}
link

(static) linkEndTo :DisplayLinkType

The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links). The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). The link field specifies the appearance of the link between bars. The showLinks field specifies whether the control displays or hides the links between bars. The linkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links). The Gantt.Link() method retrieves a link by its index, identifier/key, or reference.The Links.Add() method creates a new link between two bars, using the current link appearance as defined by the Chart.Link property (link field equivalent).

The linkEndTo field is mapped to the Chart.LinkEndTo property, so the following statements are equivalent:

oChart.Options = {linkEndTo: {type: 1, color: "blue"}}
oChart.SetOptions({linkEndTo: {type: 1, color: "blue"}})
oChart.LinkEndTo = {type: 1, color: "blue"}
oChart.SetLinkEndTo({type: 1, color: "blue"})

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"
}
linkEndTo

(static) linkStartFrom :DisplayLinkType

The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). The link field specifies the appearance of the link between bars. The showLinks field specifies whether the control displays or hides the links between bars. The linkEndTo field gets or sets the appearance of the link that ends to any selected-bar (incoming links). The linkUnselected property gets or sets the appearance of the link not related to any selected-bar (unselected links). The Gantt.Link() method retrieves a link by its index, identifier/key, or reference.The Links.Add() method creates a new link between two bars, using the current link appearance as defined by the Chart.Link property (link field equivalent).

The linkStartFrom field is mapped to the Chart.LinkStartFrom property, so the following statements are equivalent:

oChart.Options = {linkStartFrom: {type: 3, color: "red"}}
oChart.SetOptions({linkStartFrom: {type: 3, color: "red"}})
oChart.LinkStartFrom = {type: 3, color: "red"}
oChart.SetLinkStartFrom({type: 3, color: "red"})

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"
}
linkStartFrom

(static) linkUnselected :DisplayLinkType

The linkUnselected field specifies the appearance of the link not related to any selected-bar (unselected links). The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links). The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). The link field specifies the appearance of the link between bars. The showLinks field specifies whether the control displays or hides the links between bars. The Gantt.Link() method retrieves a link by its index, identifier/key, or reference.The Links.Add() method creates a new link between two bars, using the current link appearance as defined by the Chart.Link property (link field equivalent).

The linkUnselected field is mapped to the Chart.LinkUnselected property, so the following statements are equivalent:

oChart.Options = {linkUnselected: {type: 2, color: "gray"}}
oChart.SetOptions({linkUnselected: {type: 2, color: "gray"}})
oChart.LinkUnselected = {type: 2, color: "gray"}
oChart.SetLinkUnselected({type: 2, color: "gray"})

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
}
linkUnselected

(static) locale :string

The locale field specifies the language to format the control. The locale is used to format dates. The locale string must be a valid BCP 47 language tag. If the locale is null, the browser's UI language is used. The locale determines how date and time units are displayed. For example, when the locale is set to "de" (German), month names appear as "Januar", "Februar", etc., whereas with the "en-US" (U.S. English) locale, they are displayed as "January", "February", and so on. The nonworkingDays field gets or sets the chart's non-working days. By default, the locale field is null, which indicates that the browser's UI language is used.

The locale field is mapped to the Chart.Locale property, so the following statements are equivalent:

oChart.Options = {locale: "de"}
oChart.SetOptions({locale: "de"})
oChart.Locale = "de"
oChart.SetLocale("de")
Type:
  • string
Example
null {null}, indicates that the browser's UI language is used.
"de" {string}, defines German locale
"ro" {string}, defines Romanian locale
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. The unitWidth field is clamped between minUnitWidth and maxUnitWidth properties. The unitWidthNonworking field specifies the width to display the non-working units in base-level. The minUnitWidth and maxUnitWidth properties define the range within which the unitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions.

The maxUnitWidth field is mapped to the Chart.MaxUnitWidth property, so the following statements are equivalent:

oChart.Options = {maxUnitWidth: 36}
oChart.SetOptions({maxUnitWidth: 36})
oChart.MaxUnitWidth = 36
oChart.SetMaxUnitWidth(36)
Type:
  • number
Example
36 {number}, specifies that maximum width to display the units in base-level, is 36-pixels wide
maxUnitWidth

(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. The unitWidth field is clamped between minUnitWidth and maxUnitWidth properties. The unitWidthNonworking field specifies the width to display the non-working units in base-level. The minUnitWidth and maxUnitWidth properties define the range within which the unitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions.

The minUnitWidth field is mapped to the Chart.MinUnitWidth property, so the following statements are equivalent:

oChart.Options = {minUnitWidth: 12}
oChart.SetOptions({minUnitWidth: 12})
oChart.MinUnitWidth = 12
oChart.SetMinUnitWidth(12)
Type:
  • number
Example
12 {number}, specifies that minimum width to display the units in base-level, is 12-pixels wide
minUnitWidth

(static) nonworkingDays :number

The nonworkingDays field specifies the non-working days within a week. The showNonworkingDays field specifies whether the chart highlights non-working days. The nonworkingDays field can be set at runtime to modify the chart's non-working days, while the showNonworkingDays field can be set at runtime to control whether those non-working days are highlighted. The "nw" entry of the Shapes property defines the visual appearance used to display non-working units.

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

The nonworkingDays field is mapped to the Chart.NonworkingDays property, so the following statements are equivalent:

oChart.Options = {nonworkingDays: 65}
oChart.SetOptions({nonworkingDays: 65})
oChart.NonworkingDays = 65
oChart.SetNonworkingDays(65)
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)
nonworkingDays

(static) nonworkingHours :number

The nonworkingHours field specifies the non-working hours within a day. The showNonworkingHours field specifies whether the chart displays non-working hours. The nonworkingHours field can be set at runtime to change the non-working hours of the chart, while the showNonworkingHours field can be set at runtime to show or hide the non-working hours of the chart. The nonworkingDays field specifies the non-working days of the week. The "nw" entry of the Shapes property defines the visual appearance used to display non-working units.

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

The nonworkingHours field is mapped to the Chart.NonworkingHours property, so the following statements are equivalent:

oChart.Options = {nonworkingHours: 16253183}
oChart.SetOptions({nonworkingHours: 16253183})
oChart.NonworkingHours = 16253183
oChart.SetNonworkingHours(16253183)
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)
nonworkingHours

(static) overlaidOnMoving :boolean

The overlaidOnMoving field specifies whether the overlaid bars are re-arranged while the user moves or resizes at runtime a bar. The overlaidOnMoving field improves the visibility of overlaid bars when the user moves or resizes at runtime a bar. When enabled (true), the control automatically re-arranges the overlaid bars to avoid hiding them behind other bars during move or resize operations. When disabled (false), the overlaid bars maintain their original positions, which may result in some bars being hidden behind others during these operations. The Bar.OverlaidType property specifies how bars of specified type are arranged. By default, the overlaidOnMoving field is set to false.

The overlaidOnMoving field is mapped to the Chart.OverlaidOnMoving property, so the following statements are equivalent:

oChart.Options = {overlaidOnMoving: true}
oChart.SetOptions({overlaidOnMoving: true})
oChart.OverlaidOnMoving = true
oChart.SetOverlaidOnMoving(true)
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
overlaidOnMoving

(static) overviewHeight :number

The overviewHeight field specifies the height of the control's overview. The overviewVisible field specifies whether the chart's overview layout is visible or hidden. The overviewShowSelectDates field shows or hides the selected-date(s) on the control's overview. By default, the overview part of the control is 36-pixels tall. You can set the overviewHeight field to 0 to hide the control's overview, but it is better to use the overviewVisible field with the exOverviewHidden flag to hide the control's overview, because the exOverviewHidden flag hides the overview part of the control and prevents showing it while resizing the control, while setting the overviewHeight field to 0 hides just the content of the overview part of the control, but it does not prevent showing an empty area for the overview part of the control while resizing it.

The overviewHeight field is mapped to the Chart.OverviewHeight property, so the following statements are equivalent:

oChart.Options = {overviewHeight: 36}
oChart.SetOptions({overviewHeight: 36})
oChart.OverviewHeight = 36
oChart.SetOverviewHeight(36)
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
overviewHeight

(static) overviewMarginsFormat :string

The overviewMarginsFormat field specifies the format used to display margin dates in the overview section of the control, applicable when using the exOverviewShowSelMargins or exOverviewShowMargins options of the OverviewVisible property. By default, the overviewMarginsFormat field is empty, which means margin dates are displayed according to the chart's locale option, or the system's regional settings if no locale is specified. The overviewMarginsFormat field supports the following keywords:
  • value {Date}, specifies the date-time to display
  • margin {number}, defines the position of the margin date to display: 0 for the left margin of the whole chart, 1 for the right margin of the whole chart, and 2 or 3 for the left or right margins of the current view
It supports predefined constants and functions as described here. Additionally, the overviewMarginsFormat field supports exHTML formatting, which allows applying different font styles to the displayed dates.

The overviewMarginsFormat field is mapped to the Chart.OverviewMarginsFormat property, so the following statements are equivalent:

oChart.Options = {overviewMarginsFormat: "value format `MM/dd`"}
oChart.SetOptions({overviewMarginsFormat: "value format `MM/dd`"})
oChart.OverviewMarginsFormat = "value format `MM/dd`"
oChart.SetOverviewMarginsFormat("value format `MM/dd`")
Type:
  • string
Since:
  • 4.7
Example
"value format `MM/dd`" {string}, specifies that the margin dates displayed in the overview section of the control use two digits for the month and two digits for the day, instead of using the regional settings
"(margin &lt; 2 ? `&lt;fgcolor gray&gt;` : `&lt;b&gt;`) + shortdate(value)" {string}, displays the left and right margins of the whole chart in gray, while showing the left and right margins of the current view in bold
overviewMarginsFormat

(static) overviewShowSelectDates :boolean

The overviewShowSelectDates field shows or hides the selected-date(s) on the control's overview. The overviewVisible field specifies whether the chart's overview layout is visible or hidden. The overviewHeight field specifies the height of the control's overview. The selectDates field specifies the selected-date(s) in the chart. By default, the control's overview hides the selected-date(s) on the overview part of the control, so you can set the overviewShowSelectDates field to true to show the selected-date(s) on the control's overview. The overview part of the control shows the selected-date(s) as vertical lines on the overview part of the control, so you can easily identify where the selected-date(s) are on the overview part of the control.

The overviewShowSelectDates field is mapped to the Chart.OverviewShowSelectDates property, so the following statements are equivalent:

oChart.Options = {overviewShowSelectDates: true}
oChart.SetOptions({overviewShowSelectDates: true})
oChart.OverviewShowSelectDates = true
oChart.SetOverviewShowSelectDates(true)
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
overviewShowSelectDates

(static) overviewToolTip :string

The overviewToolTip field indicates the format of the tooltip being shown while the cursor hovers the chart's overview area. The overviewVisible field specifies whether the chart's overview layout is visible or hidden. The overviewShowSelectDates field shows or hides the selected-date(s) on the control's overview. The overviewHeight field specifies the height of the control's overview. By default, the tooltip of the overview part of the control shows the date-time value for the hovered point on the overview part of the control, so you can set the overviewToolTip field to a custom format to show a custom tooltip while hovering the overview part of the control.

The overviewToolTip field is mapped to the Chart.OverviewToolTip property, so the following statements are equivalent:

oChart.Options = {overviewToolTip: "Date: <%ddd%> <%m%>/<%d%>/<%yyyy%>"}
oChart.SetOptions({overviewToolTip: "Date: <%ddd%> <%m%>/<%d%>/<%yyyy%>"})
oChart.OverviewToolTip = "Date: <%ddd%> <%m%>/<%d%>/<%yyyy%>"
oChart.SetOverviewToolTip("Date: <%ddd%> <%m%>/<%d%>/<%yyyy%>")

The overviewToolTip field supports ex-HTML tags such as (<b>, <i>, <fgcolor>, ...) and <%DATE%> tags as follows:

Name Description Sample
(day-patterns)
<%d%>Day of the month using one or two numeric digits, depending on the value1 - 31
<%dd%>Day of the month using exactly two numeric digits01 - 31
<%d1%>Weekday using its first letterS - S
<%loc_d1%>Weekday as a single-letter abbreviation based on the current user settingsS - S
<%d2%>Weekday using its first two lettersSu - Sa
<%loc_d2%>Weekday as a two-letter abbreviation based on the current user settingsSu - Sa
<%d3%>Weekday using its first three lettersSun - Sat
<%ddd%>Weekday using its first three lettersSun - Sat
<%loc_d3%>Weekday as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_ddd%>Sun - Sat
<%loc_ddd%>Weekday as a three-letter abbreviation based on the current user regional and language settingsSun - Sat
<%dddd%>Full name of the weekdaySunday - Saturday
<%loc_dddd%>Full weekday name based on the current user regional and language settingsSunday - Saturday
<%w%>Numeric day of the week1 - 7
<%y%>Numeric day of the year1 - 366
(week-patterns)
<%ww%>Week of the year1 - 53
(month-patterns)
<%m%>Month of the year using one or two numeric digits, as needed1 - 12
<%mm%>Month of the year using exactly two numeric digits01 - 12
<%mr%>Month of the year using Roman numerals, as neededI - XII
<%m1%>Month using its first letterJ - D
<%loc_m1%>Month as a single-letter abbreviation based on the current user settingsJ - D
<%m2%>Month using its first two lettersJa - De
<%loc_m2%>Month as a two-letter abbreviation based on the current user settingsJa - De
<%m3%>Month using its first three lettersJan - Dec
<%mmm%>Month using its first three lettersJan - Dec
<%loc_m3%>Month as a three-letter abbreviation based on the current user regional and language settings; equivalent to <%loc_mmm%>Jan - Dec
<%loc_mmm%>Month as a three-letter abbreviation based on the current user regional and language settingsJan - Dec
<%mmmm%>Full name of the monthJanuary - December
<%loc_mmmm%>Full month name based on the current user regional and language settingsJanuary - December
(year-patterns)
<%q%>Date shown as the quarter of the year1 - 4
<%hy%>Date shown as the half of the year1 - 2
<%loc_y%>Year represented by the last digit only, based on the current regional settings0 - 9
<%yy%>Last two digits of the year01 - 99
<%loc_yy%>Year represented by the last two digits only, based on the current regional settings; a leading zero is added for single-digit years01 - 99
<%yyyy%>Full year using four digits0100 - 9999
<%loc_yyyy%>Year represented using four or five digits, depending on the calendar in use. Thai Buddhist and Korean calendars use five-digit years; the "yyyy" pattern displays five digits for these calendars and four digits for all other supported calendars. Calendars with single-digit or two-digit years, such as the Japanese Emperor era, are formatted differently: single-digit years include a leading zero (for example, "03"), two-digit years use two digits (for example, "13"), and no additional leading zeros are applied0100 - 9999
<%i%>Numeric value displayed instead of a date, representing the number of milliseconds elapsed since the Unix Epoch, January 1, 1970, 00:00:00 UTC1767085565940
(localized era-patterns)
<%loc_g%>Period/era based on the current user regional and language settingsA,B
<%loc_gg%>Period/era based on the current user regional and language settingsAD,BC
(localized date-patterns)
<%loc_sdate%>Date in short format based on the current user regional and language settings12/31/2000
<%loc_ldate%>Date in long format based on the current user regional and language settingsDecember 31, 2000
<%loc_dsep%>Date separator based on the current user regional and language settings/
(time-patterns)
<%h%>Hour in one or two digits, as needed0 - 23
<%hh%>Hour in two digits00 - 23
<%h12%>Hour in 12-hour format, in one or two digits0/12 - 11
<%hh12%>Hour in 12-hour format, in two digits00/12 - 11
<%n%>Minute in one or two digits, as needed0 - 59
<%nn%>Minute in two digits00 - 59
<%s%>Second in one or two digits, as needed0 - 59
<%ss%>Second in two digits00 - 59
<%AM/PM%>12-hour clock with uppercase "AM" or "PM" as appropriateAM, PM
(localized time-patterns)
<%loc_AM/PM%>Time marker such as AM or PM based on the current user regional and language settingsAM, PM
<%loc_A/P%>Single-character time marker such as A or P based on the current user regional and language settingsA, P
<%loc_time%>Time based on the current user regional and language settings1:30:15 PM
<%loc_time24%>Time in 24-hour format without a time marker based on the current user regional and language settings13:30:15
<%loc_tsep%>Time separator based on the current user regional and language settings:
Type:
  • string
Example
"" {string}, displays no tooltip
"&lt;%ddd%&gt; &lt;%m%&gt;/&lt;%d%&gt;/&lt;%yyyy%&gt;" {string}, displays the date from the overview as "Sun 12/2/2007"
overviewToolTip

(static) overviewVisible :Gantt.OverviewVisibleEnum

The overviewVisible field specifies whether the chart's overview layout is visible or hidden. The overviewShowSelectDates field shows or hides the selected-date(s) on the control's overview. The overviewHeight field specifies the height of the control's overview.

The overviewVisible field is mapped to the Chart.OverviewVisible property, so the following statements are equivalent:

oChart.Options = {overviewVisible: 1}
oChart.SetOptions({overviewVisible: 1})
oChart.OverviewVisible = 1
oChart.SetOverviewVisible(1)

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. The overviewMarginsFormat field specifies the format used to display margin dates in the overview section of the control.
  • exOverviewShowSelMargins(0x4000), displays the selection limits (first/last visible date in the chart). The overviewMarginsFormat field specifies the format used to display margin dates in the overview section of the control.
  • 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
overviewVisible

(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. The overviewZoomCaption field is used in combination with the allowOverviewZoom and overviewZoomUnit fields to show the zooming time-scales in the control's overview part. The allowOverviewZoom field indicates whether the chart's overview shows the time-scales the user can zoom to, while the overviewZoomUnit field specifies the width of the time-unit scale in the overview part of the control.

The overviewZoomCaption field is mapped to the Chart.OverviewZoomCaption property, so the following statements are equivalent:

oChart.Options = {overviewZoomCaption: "Year||¼Year|Month|Week|Day||"}
oChart.SetOptions({overviewZoomCaption: "Year||¼Year|Month|Week|Day||"})
oChart.OverviewZoomCaption = "Year||¼Year|Month|Week|Day||"
oChart.SetOverviewZoomCaption("Year||¼Year|Month|Week|Day||")
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
overviewZoomCaption

(static) overviewZoomUnit :number

The overviewZoomUnit field specifies the width of the time-unit scale in the overview. 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. The overviewZoomCaption field is used in combination with the allowOverviewZoom and overviewZoomUnit fields to show the zooming time-scales in the control's overview part. The allowOverviewZoom field indicates whether the chart's overview shows the time-scales the user can zoom to, while the overviewZoomUnit field specifies the width of the time-unit scale in the overview part of the control.

The overviewZoomUnit field is mapped to the Chart.OverviewZoomUnit property, so the following statements are equivalent:

oChart.Options = {overviewZoomUnit: 36}
oChart.SetOptions({overviewZoomUnit: 36})
oChart.OverviewZoomUnit = 36
oChart.SetOverviewZoomUnit(36)
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
overviewZoomUnit

(static) paneWidthLeft :number

The paneWidthLeft field specifies the width of the control's left-pane (items). The paneWidthRight field specifies the width of the control's right-pane (chart). Setting the paneWidthLeft or paneWidthRight field to 0 hides the respective pane, while setting it to a positive number changes the width of the respective pane to that number. By default, both panes are visible and their widths are automatically adjusted to fit the control's width.

The paneWidthLeft field is mapped to the Chart.PaneWidthLeft property, which means that the following statements are equivalent:

oChart.Options = {paneWidthLeft: 300}
oChart.SetOptions({paneWidthLeft: 300})
oChart.PaneWidthLeft = 300
oChart.SetPaneWidthLeft(300)
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
paneWidthLeft

(static) paneWidthRight :number

The paneWidthRight field specifies the width of the control's right-pane (chart). The paneWidthLeft field specifies the width of the control's left-pane (items). Setting the paneWidthRight or paneWidthLeft field to 0 hides the respective pane, while setting it to a positive number changes the width of the respective pane to that number. By default, both panes are visible and their widths are automatically adjusted to fit the control's width.

The paneWidthRight field is mapped to the Chart.PaneWidthRight property, which means that the following statements are equivalent:

oChart.Options = {paneWidthRight: 300}
oChart.SetOptions({paneWidthRight: 300})
oChart.PaneWidthRight = 300
oChart.SetPaneWidthRight(300)
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
paneWidthRight

(static) resizeUnitCount :number

The resizeUnitCount field specifies the count of time-unit(s) to create, move or resize bars. 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 resizeUnitCount field is mapped to the Chart.ResizeUnitCount property, so the following statements are equivalent:
oChart.Options = {resizeUnitCount: 4}
oChart.SetOptions({resizeUnitCount: 4})
oChart.ResizeUnitCount = 4
oChart.SetResizeUnitCount(4)
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
4 {number}, creates, moves, or resizes at every fourth time unit
resizeUnitCount

(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 resizeUnitCount field specifies the count of time-unit(s) to create, move or resize bars. The resizeUnitScale field is mapped to the Chart.ResizeUnitScale property, so the following statements are equivalent:
oChart.Options = {resizeUnitScale: exontrol.UnitEnum.exHour}
oChart.SetOptions({resizeUnitScale: exontrol.UnitEnum.exHour})
oChart.ResizeUnitScale = exontrol.UnitEnum.exHour
oChart.SetResizeUnitScale(exontrol.UnitEnum.exHour)

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
resizeUnitScale

(static) scrollBar :boolean

The scrollBar field shows or hides the chart's horizontal scroll-bar. The scrollRange field specifies the range of dates to scroll within, as an object of {start, end} type. By default, the scrollBar field is set to true, which means that the chart's horizontal scroll-bar is shown, and the user can scroll the chart within the scroll-range specified by the scrollRange field. If the scrollBar field is set to false, then the chart's horizontal scroll-bar is hidden, and the user can not scroll the chart, even if the scrollRange field specifies a valid scroll-range.

The scrollBar field is mapped to the Chart.ScrollBar property, so the following statements are equivalent:

oChart.Options = {scrollBar: true}
oChart.SetOptions({scrollBar: true})
oChart.ScrollBar = true
oChart.SetScrollBar(true)
Type:
  • boolean
Example
true {boolean}, shows the chart's horizontal scroll-bar, which allows scrolling the chart within the scroll-range specified by the scrollRange field
false {boolean}, hides the chart's horizontal scroll-bar
scrollBar

(static) scrollRange :ScrollRangeType

The scrollRange field specifies the range of dates to scroll within, as an object of {start, end} type. The start and end attributes indicate the scroll range's start/left-margin and end/right-margin date/time, respectively. Both start and end attributes must be specified, else scroll range has no effect. The scrollBar field shows or hides the chart's horizontal scroll-bar. The start and end attributes can be any of the following:
  • {string} defines the date in string-format as "#MM/DD/YYYY[ HH:mm:ss]#"
  • {number} integer value representing the year of the date to be created
  • {null}, indicates the current date and time (equivalent of Now)
  • {Date}, indicates a JavaScript date to be copied

The scrollRange field is mapped to the Chart.ScrollRange property, so the following statements are equivalent:

oChart.Options = {scrollRange: {start: "#1/1/2001#", end: "#1/1/2002#"}}
oChart.SetOptions({scrollRange: {start: "#1/1/2001#", end: "#1/1/2002#"}})
oChart.ScrollRange = {start: "#1/1/2001#", end: "#1/1/2002#"}
oChart.SetScrollRange({start: "#1/1/2001#", end: "#1/1/2002#"})
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#"
}
scrollRange

(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)

The allowSelectDate field indicates whether the user can select single, multiple, toggle dates. The control supports selection of item-bars and dates. The selectDates field specifies the chart's selected-dates, as an array of [{start,end}] type. The singleSel field specifies the selection mode for item-bars, while the allowSelectDate field specifies the selection mode for dates. The selectDates field is mapped to the Chart.SelectDates property, so the following statements are equivalent:

oChart.Options = {selectDates: [{start: "#1/1/2001#", end: "#1/1/2002#"}]}
oChart.SetOptions({selectDates: [{start: "#1/1/2001#", end: "#1/1/2002#"}]})
oChart.SelectDates = [{start: "#1/1/2001#", end: "#1/1/2002#"}]
oChart.SetSelectDates([{start: "#1/1/2001#", end: "#1/1/2002#"}])
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"
selectDates
The showLinks field specifies whether the control displays or hides the links between bars. It accepts one or more values of exontrol.ShowLinksEnum, which determine the visibility of the links between bars. The Gantt.Link() method retrieves a link by its index, identifier/key, or reference.The Links.Add() method creates a new link between two bars, using the current link appearance as defined by the Chart.Link property (link field equivalent).

The showLinks field is mapped to the Chart.ShowLinks property, so the following statements are equivalent:

oChart.Options = {showLinks: exontrol.ShowLinksEnum.exShow}
oChart.SetOptions({showLinks: exontrol.ShowLinksEnum.exShow})
oChart.ShowLinks = exontrol.ShowLinksEnum.exShow
oChart.SetShowLinks(exontrol.ShowLinksEnum.exShow)

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
  • exPreventOverlap (0x100), adjusts the links to prevent them from overlapping the connected objects. The exPreventOverlap flag has effect only for rectangular links. The exPreventOverlap option calculates the path between A and B using the A* (A-star) pathfinding algorithm, which can be a time-consuming operation. The exontrol.L.PO.dir.def specifies the default directions for determining the best route between two points, A and B. These directions are represented as a combination of the letters R (Right), L (Left), U (Up), and D (Down), separated by commas ("RLDU,DURL" {string}, indicates the shortest route between RLDU and DURL directional path). When used with the exPreventOverlapMixt flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. (@since 4.0)
  • exPreventOverlapMixt (0x80), When used with the exPreventOverlap flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. When combined with the exChangeColorOnOverlap flag, overlapping links alternately adjust their width in addition to changing colors. The exPreventOverlapMixt flag must always be used alongside either the exPreventOverlap or exChangeColorOnOverlap flag. (@since 4.0)
  • exChangeColorOnOverlap (0x200), changes the color for links in areas where they overlap with other links, enhancing clarity and distinction between them. The exontrol.L.PO.OverlapColors defines the list of colors, separated by commas, used to display overlapping links. When combined with the exPreventOverlapMixt flag, overlapping links alternately adjust their width in addition to changing colors. (@since 4.0)
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
showLinks

(static) showNonworkingDays :boolean

The showNonworkingDays field shows or hides the non-working days. The showNonworkingUnits field shows or hides the non-working units (days and hours). The nonworkingDays field specifies the non-working days of the week. The showNonworkingDays field can be set at runtime to show or hide the non-working days of the chart, while the nonworkingDays field can be set at runtime to change the non-working days of the chart. The "nw" entry of the Shapes property defines the visual appearance used to display non-working units.

The showNonworkingDays field is mapped to the Chart.ShowNonworkingDays property, so the following statements are equivalent:

oChart.Options = {showNonworkingDays: false}
oChart.SetOptions({showNonworkingDays: false})
oChart.ShowNonworkingDays = false
oChart.SetShowNonworkingDays(false)
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working days
true {boolean}, shows the chart's non-working days (marks the non-working days)
showNonworkingDays

(static) showNonworkingHours :boolean

The showNonworkingHours field shows or hides the non-working hours. The showNonworkingUnits field shows or hides the non-working units (days and hours). The nonworkingHours field specifies the non-working hours within a day. The showNonworkingHours field can be set at runtime to show or hide the non-working hours of the chart, while the nonworkingHours field can be set at runtime to change the non-working hours of the chart. The nonworkingDays field specifies the non-working days of the week. The "nw" entry of the Shapes property defines the visual appearance used to display non-working units.

The showNonworkingHours field is mapped to the Chart.ShowNonworkingHours property, so the following statements are equivalent:

oChart.Options = {showNonworkingHours: false}
oChart.SetOptions({showNonworkingHours: false})
oChart.ShowNonworkingHours = false
oChart.SetShowNonworkingHours(false)
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working hours
showNonworkingHours

(static) showNonworkingUnits :boolean

The showNonworkingUnits field shows or hides the non-working units (days and hours from the chart)). The showNonworkingDays field shows or hides the non-working days. The showNonworkingHours field shows or hides the non-working hours. The showNonworkingUnits field can be set at runtime to show or hide the non-working units of the chart, while the nonworkingDays and nonworkingHours fields can be set at runtime to change the non-working days and hours of the chart. The nonworkingDays field specifies the non-working days of the week, while the nonworkingHours field specifies the non-working hours within a day.

The showNonworkingUnits field is mapped to the Chart.ShowNonworkingUnits property, so the following statements are equivalent:

oChart.Options = {showNonworkingUnits: false}
oChart.SetOptions({showNonworkingUnits: false})
oChart.ShowNonworkingUnits = false
oChart.SetShowNonworkingUnits(false)
Type:
  • boolean
Example
false {boolean}, hides the chart's non-working units (days and hours)
true {boolean}, shows the chart's non-working units (marks the non-working days and hours)
showNonworkingUnits

(static) singleSel :exontrol.Tree.SingleSelEnum

The singleSel field specifies whether the chart supports single, multiple, toggle selection. The control supports selection of item-bars and dates. The singleSel field specifies the selection mode for item-bars, while the allowSelectDate field specifies the selection mode for dates. The singleSel field can be any combination of exontrol.Tree.SingleSelEnum flags. The singleSel field is mapped to the Chart.SingleSel property, so the following statements are equivalent:
oChart.Options = {singleSel: exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel}
oChart.SetOptions({singleSel: exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel})
oChart.SingleSel = exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel
oChart.SetSingleSel(exontrol.Tree.SingleSelEnum.exSingleSel | exontrol.Tree.SingleSelEnum.exEnableSel)

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.
singleSel

(static) toolTips :object

The toolTips field holds predefined-tooltips for every 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

The Chart.GetToolTip(unit,value) method gets the predefined format of the level's tooltip for specified unit. The Chart.SetToolTip(unit,value) method sets the predefined format of the level's tooltip for specified unit. The chart's header is organized into multiple levels, each capable of displaying its own time scale. Each level shows date-time values according to the toolTips field when the user hovers it.

The toolTips field is mapped to the Chart.ToolTips property, so the following statements are equivalent:

oChart.Options = {toolTips: {day: "dddd, MMMM dd, yyyy", month: "MMMM yyyy"}}
oChart.SetOptions({toolTips: {day: "dddd, MMMM dd, yyyy", month: "MMMM yyyy"}})
oChart.ToolTips = {day: "dddd, MMMM dd, yyyy", month: "MMMM yyyy"}
oChart.SetToolTips({day: "dddd, MMMM dd, yyyy", month: "MMMM yyyy"})
Type:
  • object
toolTips

(static) unitScale :exontrol.UnitEnum

The unitScale field indicates the base unit being displayed. The unitWidth field gets ot sets the width to display the units in base-level. The base-level is the level that displays the base unit, as specified by the unitScale field. The minUnitWidth and maxUnitWidth properties specify the minimum and maximum width of the units within the base-level, while the user resizes or zooms-in/out the chart. The labels field holds predefined format to display the level's label for every time-unit, and the toolTips field holds predefined formats to display the level's label and tooltip for each time-unit, so the chart can automatically display the appropriate label and tooltip for each level, depending on the unit it displays.

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

The unitScale field is mapped to the Chart.UnitScale property, so the following statements are equivalent:

oChart.Options = {unitScale: 4096}
oChart.SetOptions({unitScale: 4096})
oChart.UnitScale = 4096
oChart.SetUnitScale(4096)
Type:
  • exontrol.UnitEnum
Example
4096 or exontrol.UnitEnum.exDay {number}, sets the chart to display days
unitScale

(static) unitWidth :number

The unitWidth field gets ot sets the width to display the units in base-level. The base-level is the level that displays the base unit, as specified by the unitScale field. The minUnitWidth and maxUnitWidth properties specify the minimum and maximum width of the units within the base-level, while the user resizes or zooms-in/out the chart. The unitWidth field is clamped between minUnitWidth and maxUnitWidth properties. The unitWidthNonworking field specifies the width to display the non-working units in base-level. The minUnitWidth and maxUnitWidth properties define the range within which the unitWidth can vary when the AllowActions property includes the "chart-resize" or "chart-zoom" actions.

The unitWidth field is mapped to the Chart.UnitWidth property, so the following statements are equivalent:

oChart.Options = {unitWidth: 18}
oChart.SetOptions({unitWidth: 18})
oChart.UnitWidth = 18
oChart.SetUnitWidth(18)
Type:
  • number
Example
8 {number}, changes the width for units in the base-level to 8-pixels
unitWidth

(static) unitWidthNonworking :number

The unitWidthNonworking field specifies the width to display the non-working units in base-level. The unitWidth field specifies the width for all units, including the non-working units in base-level, when the unitWidthNonworking field is set to 0 or null. The showNonworkingUnits field specifies whether the chart displays non-working units. The unitWidthNonworking field can be set to a negative value to indicate that neighbor non-working units are shown as a single non-working unit with specified width (absolute value). The unitWidthNonworking field can be set to a positive value to indicate the width for non-working units. The unitWidthNonworking field is clamped between 0 and maxUnitWidth properties.

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

The unitWidthNonworking field is mapped to the Chart.UnitWidthNonworking property, so the following statements are equivalent:

oChart.Options = {unitWidthNonworking: -18}
oChart.SetOptions({unitWidthNonworking: -18})
oChart.UnitWidthNonworking = -18
oChart.SetUnitWidthNonworking(-18)
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)
unitWidthNonworking