Class: GV

GV(oGraph)

new GV(oGraph)

Defines the graph view of the control, that displays the series. The oGV field defines the control's base graph-view. Use the AddGraphView() method to add a new view to the control. Use the RemoveGraphView() method removes a graph-view already created by AddGraphView() method.
Parameters:
Name Type Description
oGraph Graph Specifies an object of Graph type that defines the owner control of the view to be created

Methods

EnsureVisibleClient(clientA, ensureOptsopt)

The EnsureVisibleClient() method ensures that the giving client fits the control's client area.
Parameters:
Name Type Attributes Description
clientA object The client parameter could be any of the following:
  • clientA {number[]}, specifies an array of [x,y,width,height] type that indicates the absolute-coordinates of the layout-rectangle to fit into the control's client area
ensureOpts object <optional>
 Specifies different options to run the current method as explained:
  • force {boolean}, forces the EnsureVisibleClient()'s smooth operation to run, not matter if no zoom/scale or scrol changed
  • allowScale {boolean}, updates the control's scale/zoom-factor to ensure full-fit the client
  • allowScroll {number}, specifies whether horizontal/vertical is allowed as explained:
    • 3 {number}/{null}/{undefined}, allows scrolling horizontal and vertical as required
    • 0 {number}, no horizontal or vertical scroll is allowed
    • 1 {number}, horizontal scroll is allowed
    • 2 {number}, vertical scroll is allowed
  • nearestFit {boolean}, ensures that corner of the object nearest the window's client area fits it (it has effect only if the size of the object is greater than size of the window's client area)
  • duration {number}, specifies the time in ms the control is smoothly performs the changes
  • thisArg {any}, specifies the value of "this" keyword during the cbkI/cbkT callbacks
  • cbkR {callback}, specifies a function of callback(p) type that's invoked once the EnsureVisibleClient()'s smooth operation runs (p {number}, specifies the progress of the smooth so far, as a value between 0 and 1)
  • cbkI {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation begins
  • cbkT {callback}, specifies a function of callback() type that's invoked once the EnsureVisibleClient()'s smooth operation ends

FitToClient(rtLayoutopt)

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area
Parameters:
Name Type Attributes Description
rtLayout Array.<number> <optional>
 Indicates null for entire layout or an array of [x,y,width,height] type that defines the absolute-coordinate to fit to client

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched
Returns:
Returns the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [view], specifies that the "scroll" is possible once the user clicks the view
      • [legend], specifies that the "scroll" is possible once the user clicks the legend
    • "zoom", zooms the control's content at dragging-point.
    • "fit", fits the drag-area into the control's client area. The "fit" action allows flags such as:
      • [zoom], specifies that the "fit" action magnifies the chart instead resizing it
    • "value-resize", resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true)
    • "overview-selection-resize", resizes the graph using the left/right margins of the overview-selection
  • "shortcut", defines the serie's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
    • "Shift", indicates that the SHIFT key is pressed
    • "Ctrl" or "Control", indicates that the CTRL key is pressed
    • "Alt" or "Menu", indicates that the ALT key is pressed
    • "Meta" , indicates that the META key is pressed
    • "LButton", specifies that the mouse's left-button is pressed
    • "RButton", specifies that the mouse's right-button is pressed
    • "MButton", specifies that the mouse's middle/wheel-button is pressed
    • "Long", specifies that the action requires a "long" click or touch before it begins
    • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
    • "+", indicates AND between values
Type
string

GetAllowDrop() → {boolean}

The GetAllowDrop() method indicates whether the user can drag and drop local files into the control.
Returns:
Returns true, if the user can drag and drop local files into the control.
Type
boolean

GetAutoFit() → {boolean}

The GetAutoFit() method indicates whether the elements of the series are resized to fit the control's client-area.
Returns:
Returns true, if the elements of the series are resized to fit the control's client-area.
Type
boolean

GetBackground() → {BackgroundOptions}

The GetBackground() method indicates the display options to show different parts of the control
Returns:
Returns the display options to show different parts of the control
Type
BackgroundOptions

GetCanvasRect() → {Array.<number>}

The GetCanvasRect() method returns the canvas's client rectangle.
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>

GetCategoryAxis() → {CategoryAxisOptions|Array.<CategoryAxisOptions>}

The GetCategoryAxis() method gets the chart's category axes.
Returns:
Returns the chart's category axes.
Type
CategoryAxisOptions | Array.<CategoryAxisOptions>

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
Array.<number>

GetCursor() → {CursorOptions}

The GetCursor() method gets configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes
Returns:
Returns the configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes
Type
CursorOptions

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined below)
The cursors property supports any of the following parts:
  • "valuePoint", defines the mouse-cursor when the mouse pointer hovers the value-point
  • "legend", defines the mouse-cursor when the mouse pointer hovers an object of the legend
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
Type
string

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format to display the view's invalid label
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the serie's caption. The exontrol.DrawTextFormatEnum type supports the following flags:
  • exTextAlignTop (0x00), justifies the text to the top of the rectangle
  • exTextAlignLeft (0x00), aligns text to the left
  • exTextAlignCenter (0x01), centers text horizontally in the rectangle
  • exTextAlignRight (0x02), aligns text to the right
  • exTextAlignVCenter (0x04), centers text vertically
  • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
  • exTextAlignMask (0x0F), specifies the mask for text's alignment.
  • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
  • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
  • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
  • exPlainText (0x80), treats the text as plain text.
  • exTextNoClip (0x0100), draws without clipping.
  • exHTMLTextNoColors (0x0200), ignores the and tags.
  • exTextCalcRect (0x0400), determines the width and height of the text.
  • exHTMLTextNoTags (0x0800), ignores all HTML tags.
  • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
  • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
  • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
Type
exontrol.DrawTextFormatEnum

GetImageAlign() → {number}

The GetImageAlign() method specifies the alignment of the serie's image.
Returns:
Returns the alignment of the serie's image as explained:
  • 0, the image is on the left of the serie's caption
  • 1, the image is on the right of the serie's caption
  • 2, the image is on the top of the serie's caption
  • 3, the image is on the bottom of the serie's caption
Type
number

GetImageSize() → {any}

The GetImageSize() method defines the size of the serie's image (reserved).
Returns:
Returns the size, range of limits the serie's image is displayed as expalined:
  • {null}, Indicates that the serie's image is displayed as it is (full-sized).
  • {number}, Specifies that the serie's image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the serie's image is stretched to giving square, else the serie's picture is scaled to fit the giving rectangle.
  • {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the serie's picture to scale or stretch to.
Type
any

GetInvalid() → {string}

The GetInvalid() method specifies the label the control is displaying while no or invalid data
Returns:
Returns a value of string type, that defines the label the control is displaying while no or invalid data
Type
string

GetLegend() → {LegendOptions}

The GetLegend() method specifies the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime)
Returns:
Returns the configuration options to display the view's legend
Type
LegendOptions

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean

GetMisc() → {MiscellaneousOptions}

The GetMisc() method indicates the control's miscellaneous options
Returns:
Returns the control's miscellaneous options
Type
MiscellaneousOptions

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of Graph.Options type that indicates the options to display the control.
Type
object

GetOverview() → {OverviewOptions}

The GetOverview() method specifies the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar)
Returns:
Returns the configuration options to display the overview
Type
OverviewOptions

GetPad() → {number|Array.<number>|string}

The GetPad() method specifies the space between view's content and its borders.
Returns:
Returns a value that could be:
  • {number} a numeric value, to pad horizontal and vertical size with the same value
  • {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side
Type
number | Array.<number> | string

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only
Returns:
Returns true, if the control is read-only
Type
string

GetScrollBarsOrigin() → {string}

The GetScrollBarsOrigin() method specifies the color to highlight the position of the origin (0,0) on the control's scroll bars
Returns:
Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color
Type
string

GetScrollPos() → {object}

The GetScrollPos() method retrieves the horizontal and vertical scroll-position of the control's default view, as an object of {x,y} type
Returns:
Returns an object of {x,y} type that defines the control's horizontal and vertical scroll-position as explained:
x {number}, indicates the horizontal scroll-position
y {number}, indicates the vertical scroll-position
Type
object

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.Graph object (while it starts with a lowercase letter, such as shserie which refers to exontrol.Shapes.Graph.shserie shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined below)
The shapes property supports any of the following parts:
  • "valuePoint", defines the visual-appearance for value-points. The shape supports additional fields as follows:
    • size {number}, specifies the size of the value-point
  • "valueLine", defines the visual-appearance for value-lines (the guided line from the value-point to the value itself). The shape supports additional fields as follows:
    • length {number}, indicates the horizontal distance between the middle and end points of the value-line
  • "valueBack", defines the visual-appearance to apply on the value's background
  • "radarLine", specifies the visual-appearance to show the "radarLine" serie-types
  • "radarArea", specifies the visual-appearance to show the "radarArea" serie-types
  • "radarColumn", specifies the visual-appearance to show the "radarColumn" serie-types
  • "polarLine", specifies the visual-appearance to show the "polarLine" serie-types
  • "polarArea", specifies the visual-appearance to show the "polarArea" serie-types
  • "polarScatter", specifies the visual-appearance to show the "polarScatter" serie-types
    • size {number}, specifies the size of the data-point on the chart
  • "pie", specifies the visual-appearance to show the "pie" serie-types
  • "scatter", specifies the visual-appearance to show the "scatter" serie-types
    • size {number}, specifies the size of the data-point on the chart
  • "scatterLine", specifies the visual-appearance to show the "scatterLine" serie-types
  • "scatterArea", specifies the visual-appearance to show the "scatterArea" serie-types
  • "bubble", specifies the visual-appearance to show the "bubble" serie-types
    • size {number}, specifies the maximum-size of the data-point on the chart
  • "line", specifies the visual-appearance to show the "line" serie-types
  • "area", specifies the visual-appearance to show the "area" serie-types
  • "column", specifies the visual-appearance to show the "column" serie-types
  • "waterFall", specifies the visual-appearance to show the "waterFall" serie-types
    • lineSize {number}, defines size of to draw the lines between columns
  • "rangeColumn", specifies the visual-appearance to show the "rangeColumn" serie-types
  • "rangeArea", specifies the visual-appearance to show the "rangeArea" serie-types
  • "candleStick", specifies the visual-appearance to show the "candleStick" serie-types
    • size {number}, specifies the size of the stick
    • hollow {boolean}, indicates whether the hollow candlestick representation is displayed (hollow candle means that its closing value is higher (or equal) than opening value of the same period)
  • "ohlc", specifies the visual-appearance to show the "ohlc" serie-types
    • size {number}, specifies the size of the stick
  • "cursorLine", defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorCategoryAxisTooltip", defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit
  • "cursorValueAxisTooltip", defines the visual-appearance to show the tooltip on the value-axes, when the crosshair hovers the value-unit
  • "cursorXAxisTooltip", defines the visual-appearance to show the tooltip on the x-axes, when the crosshair hovers the value-unit (available for xy-chart types)
  • "cursorYAxisTooltip", defines the visual-appearance to show the tooltip on the y-axes, when the crosshair hovers the value-unit (available for xy-chart types)
  • "cursorSerieTooltip", defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series
  • "legendSymbol", defines the visual-appearance of the symbols of the visible-series within the map legend
  • "legendSymbolHidden", defines the visual-appearance of the symbols of the hidden-series within the map legend
  • "legendLabel", defines the visual-appearance of the labels of the visible-series within the map legend
  • "legendLabelHidden", defines the visual-appearance of the labels of the hidden-series within the map legend
  • "legendUnit", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the visible-series within the map legend
  • "legendUnitHidden", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the hidden-series within the map legend
  • "select-overview", defines the visual-appearance to display the overview-selection
  • "selectout-overview", defines the visual-appearance to display the left/right parts outside of the overview-selection
  • "select-overview-resize", defines the visual-appearance to display left/right resize-margins of the overview-selection
  • "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
Type
string

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.
Returns:
Returns the time in ms the control goes from one layout to another.
Type
number

GetSort() → {string}

The GetSort() method indicates the series to be sort, separated by spaces.
Returns:
Returns empty if no serie is sorted, or the list of series to sort, separated by spaces. The format of a particular element of the sort field is "KEY[\[INNER\]][:([A]|D)]", where KEY is the name or the index of the serie, INNER is the inner-index of the value to sort (valid for multi-dimensional array only), A stands for ascending (by default), while D for descending.
Type
string

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string result that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The result as {object} can include any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Type
string | object

GetToolTipDelay() → {number}

The GetToolTipDelay() method specifies how long the mouse pointer must point to an object before the tool tip appears
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
Type
number

GetToolTipFormat() → {string}

The GetToolTipFormat() method specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart). The format-expression supports predefined constants, operators and keywords as explained:
  • "value" keyword defines the value to format
  • "name" keyword defines the name of the serie
  • "category" keyword defines the category the value is in (available only if applicable)
  • "percent" keyword defines the percent associated with the value, as a number between 0 and 100 (available only if applicable)
  • "inner" keyword indicates the inner-index of the value within the point-data, such as 0(open or from), 1(high or to), 2(low) or 3(close) (available only if applicable)
  • "%V0", "%V1", "%V2" or "%V3" keyword gets the value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for colummRange chart-type, %V1 gets the high-value for candleStick chart-type or to for colummRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Returns:
Returns the format to customize the tooltips
Type
string

GetToolTipPopDelay() → {number}

The GetToolTipPopDelay() method specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Type
number

GetToolTipWidth() → {number}

The GetToolTipWidth() method specifies the width of the tooltip window, in pixels
Returns:
Returns the width of the tooltip window, in pixels
Type
number

GetValueAxis() → {ValueAxisOptions|Array.<ValueAxisOptions>}

The GetValueAxis() method gets the chart's value axes. The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use...
Returns:
Returns the chart's value axes
Type
ValueAxisOptions | Array.<ValueAxisOptions>

GetValueSize() → {number}

The GetValueSize() method gets the size to show a column or a bar within the chart. The valueSize has no effect for xy or circular-compatible chart types. The valueSize has effect for area-compatible chart types as follows:
  • "area" {string}, an area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares two or more quantities with an area chart. (data requires array of numbers, supports vertical field, scrollable)
  • "line" {string}, a line chart or line graph, also known as curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time - a time series - thus the line is often drawn chronologically. In these cases they are known as run charts. (data requires array of numbers, supports vertical field, scrollable)
  • "column" {string}, a column chart or column graph is a chart or graph that presents categorical data with rectangular columns with heights proportional to the values that they represent. A horizontal column chart is called a bar chart. (data requires array of numbers, supports vertical field, scrollable)
  • "waterfall" {string}, a waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. (data requires array of numbers, supports vertical field, scrollable)
  • "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)
  • "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)
Returns:
Returns the size to show a column or a bar within the chart. The size indicates the width for horizontally-oriented charts or height for the vertically-oriented chart types
Type
number

GetVisibleRect() → {Array.<number>}

The GetVisibleRect() method indicates the control's visible rectangle
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.
Returns:
Returns the amount the control scrolls when the user rolls the mouse wheel.
Type
number

GetWindowRect() → {Array.<number>}

The GetWindowRect() method returns the window's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the window's client area
Type
Array.<number>

GetXAxis() → {ValueAxisOptions}

The GetXAxis() method gets the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble")
Returns:
Returns the chart's x-axis.
Type
ValueAxisOptions

GetYAxis() → {ValueAxisOptions}

The GetYAxis() method gets the configuration-options for y-ayis of yy-compatible chart-types ("scatter", "scatterLine" or "bubble")
Returns:
Returns the chart's y-ayis.
Type
ValueAxisOptions

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's content.
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom.
Type
string

Home()

The Home() method zooms to 100% and scrolls the control to origin (0,0)

Scroll(key, countopt)

The Scroll() method scrolls the window based on the giving key
Parameters:
Name Type Attributes Description
key string Specifies a key to determines the direction to scroll the view as follows:
  • "Home" {string}, scrolls to the left/top of the control
  • "End" {string}, scrolls to the right/end of the control
  • "Prior" or "PageUp"{string}, scrolls by a page left/up
  • "Next" or "PageDown" {string}, scrolls by a page right/down
  • "Up" or "ArrowUp" {string}, scrolls up
  • "Down" or "ArrowDown" {string}, scrolls down
  • "Left" or "ArrowLeft" {string}, scrolls left
  • "Right" or "ArrowRight" {string}, scrolls right
count object <optional>
 indicates the number of lines to scroll if key is "Up", "Down", "Left" or "Right"

SetAllowActions(value)

The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as:
      • [view], specifies that the "scroll" is possible once the user clicks the view
      • [legend], specifies that the "scroll" is possible once the user clicks the legend
    • "zoom", zooms the control's content at dragging-point
    • "fit", fits the drag-area into the control's client area. The "fit" action allows flags such as:
      • [zoom], specifies that the "fit" action magnifies the chart instead resizing it
    • "value-resize", resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true)
    • "overview-selection-resize", resizes the graph using the left/right margins of the overview-selection
  • "shortcut", defines the serie's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
    • "Shift", indicates that the SHIFT key is pressed
    • "Ctrl" or "Control", indicates that the CTRL key is pressed
    • "Alt" or "Menu", indicates that the ALT key is pressed
    • "Meta" , indicates that the META key is pressed
    • "LButton", specifies that the mouse's left-button is pressed
    • "RButton", specifies that the mouse's right-button is pressed
    • "MButton", specifies that the mouse's middle/wheel-button is pressed
    • "Long", specifies that the action requires a "long" click or touch before it begins
    • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
    • "+", indicates AND between values
Example
null {null}, indicates the control's default allowActions value
 "" {string}, specifies that no operation is allowed once the user clicks or touches the control
 "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the serie's button or modifier-keys is pressed.

SetAllowDrop(value)

The SetAllowDrop() method specifies whether the user can drag and drop local files into the control.
Parameters:
Name Type Description
value boolean Indicates whether the user can drag and drop local files into the control.
Example
false {boolean}, no file can be drop into the control (default)
  true {boolean}, the user can drag and drop files into the control

SetAutoFit(value)

The SetAutoFit() method specifies whether the elements of the series are resized to fit the control's client-area.
Parameters:
Name Type Description
value boolean Indicates whether the elements of the series are resized to fit the control's client-area.
Example
false {boolean}, the autofit feature is disabled (default)
  true {boolean}, resizes the elements of the series to fit the control's content

SetBackground(value)

The SetBackground() method defines the display options to show different parts of the control
Parameters:
Name Type Description
value BackgroundOptions A value that indicates the display options to show different parts of the control.

SetCategoryAxis(category)

The SetCategoryAxis() method defines the chart's category axes (oX).
Parameters:
Name Type Description
category CategoryAxisOptions | Array.<CategoryAxisOptions> Defines the chart's category-axes
Example
null {null}, the chart displays the category line but no labels for categories
  {color: "red"} {CategoryAxisOptions}, shows the default category-axis in red
  [{categories: [2001,2002,2003]}, {categories: ["A","B","C"], color: "blue"}] {CategoryAxisOptions[]}, defines two category-axis one that displays the 2001, 2002 and 2003, while another displays A, B and C in blue

SetCursor(value)

The SetCursor() method sets the configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes
Parameters:
Name Type Description
value CursorOptions Indicates an object of CursorOptions type that specifies the configuration options to display crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
Parameters:
Name Type Description
value string A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined below)
The cursors property supports any of the following parts:
  • "valuePoint", defines the mouse-cursor when the mouse pointer hovers the value-point
  • "legend", defines the mouse-cursor when the mouse pointer hovers an object of the legend
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element)
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)

SetFormatText(value)

The SetFormatText() method changes the format to display the view's invalid label
Parameters:
Name Type Description
value exontrol.DrawTextFormatEnum Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the serie's caption. The exontrol.DrawTextFormatEnum type supports the following flags:
  • exTextAlignTop (0x00), justifies the text to the top of the rectangle
  • exTextAlignLeft (0x00), aligns text to the left
  • exTextAlignCenter (0x01), centers text horizontally in the rectangle
  • exTextAlignRight (0x02), aligns text to the right
  • exTextAlignVCenter (0x04), centers text vertically
  • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
  • exTextAlignMask (0x0F), specifies the mask for text's alignment.
  • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
  • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
  • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
  • exPlainText (0x80), treats the text as plain text.
  • exTextNoClip (0x0100), draws without clipping.
  • exHTMLTextNoColors (0x0200), ignores the and tags.
  • exTextCalcRect (0x0400), determines the width and height of the text.
  • exHTMLTextNoTags (0x0800), ignores all HTML tags.
  • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
  • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
  • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
Example
null {null}, centers the label
  32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line label
  0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line label right/bottom-aligned

SetImageAlign(value)

The SetImageAlign() method changes the alignment of the serie's image.
Parameters:
Name Type Description
value number Defines the alignment of the serie's image as one of the following:
  • 0, the image is on the left of the serie's caption
  • 1, the image is on the right of the serie's caption
  • 2, the image is on the top of the serie's caption
  • 3, the image is on the bottom of the serie's caption
Example
null {null}, the image is aligned left to the caption (default)
 1 {number}, the image is displayed to the right of the serie's caption

SetImageSize(value)

The SetImageSize() method changes the size of the serie's image (reserved).
Parameters:
Name Type Description
value any Indicates the size of the serie's image as explained:
  • {null}, Indicates that the serie's image is displayed as it is (full-sized).
  • {number}, Specifies that the serie's image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the serie's image is stretched to giving square, else the serie's picture is scaled to fit the giving rectangle.
  • {number[]}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the serie's picture to scale or stretch to.
Example
null {null}, Indicates that the serie's image is displayed as it is (full-sized).
 0 {number}, no image is displayed
 64 {number}, the image is scaled to fit a 64 x 64 rectangle
 -64 {number}, the image is strected to a 64 x 64 rectangle
 [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
 [-32,-64] {array}, stretches the image to a 32 x 64 rectangle

SetInvalid(value)

The SetInvalid() method changes the label the control is displaying while no or invalid data
Parameters:
Name Type Description
value string Specifies a value of string value that defines the label the control is displaying while no or invalid data. The label can include ex-HTML tags, such as , , ...
Example
null {null}, no label is displayed
  "no or invalid data" {number}, defines a label to be shown while the control has no or invalid data

SetLegend(value)

The SetLegend() method sets the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime)
Parameters:
Name Type Description
value LegendOptions Indicates an object of LegendOptions type that specifies the configuration options to display the view's legend

SetLocked(value)

The SetLocked() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked
Example
false {boolean}, unlocks the control (can select any serie)
  true {boolean}, locks the control (can't select any serie)

SetMisc(value)

The SetMisc() method defines the control's miscellaneous options
Parameters:
Name Type Description
value MiscellaneousOptions A value that indicates the control's miscellaneous options.

SetOptions(nOptions, bIncludeAllopt) → {boolean}

The SetOptions() method applies new options to the view.
Parameters:
Name Type Attributes Description
nOptions object Specifies an object of Graph.Options type that indicates the new options to apply
bIncludeAll boolean <optional>
 Indicates whether all fields of nOptions are included in the serie's oOptions object
Returns:
Returns true, if there were options applied to the serie
Type
boolean
Example
oGraph.Options = {imageAlign: 1, imageSize: 24}, changes the alignment and the size for all images within the control.

The oGraph.Options = value statement is equivalent with oGraph.SetOptions(value) or oGraph.oGV.SetOptions(value)

SetOverview(value)

The SetOverview() method sets the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar)
Parameters:
Name Type Description
value OverviewOptions Indicates an object of OverviewOptions type that specifies the configuration options to display the overview

SetPad(value)

The SetPad() method changes the serie's padding or the space between view's content and its borders.
Parameters:
Name Type Description
value number | Array.<number> | string Specifies a value that could be:
  • {number} a numeric value, to pad horizontal and vertical size with the same value
  • {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side
Example
null {null}, indicates that the default-padding field is used ([4,4])
  0 {number}, indicates no padding
  "8,4" {string}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels
  [8,4] {array}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels

SetReadOnly(value)

The SetReadOnly() method sets the control in read-only mode
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is read-only
Example
false {boolean}, the control is not read-only
  true {boolean}, the control is in read-only mode

SetScrollBarsOrigin(value)

The SetScrollBarsOrigin() method defines the color to highlight the position of the origin (0,0) on the control's scroll bars
Parameters:
Name Type Description
value string Specifies null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color
Example
null {null}, hides the origin (0,0) on the control's scroll bar
  "black" {string}, shows the origin (0,0) on the control's scroll bar in black

SetScrollPos(value)

The SetScrollPos() method scrolls horizontally and/or vertically the control's default view.
Parameters:
Name Type Description
value object Specifies an object of {x,y} type that defines the control's horizontal and vertical scroll-position.
Properties
Name Type Description
x number indicates the horizontal scroll-position
y number indicates the vertical scroll-position

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.Graph object (while it starts with a lowercase letter, such as shserie which refers to exontrol.Shapes.Graph.shserie shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined below)
The shapes property supports any of the following parts:
  • "valuePoint", defines the visual-appearance for value-points. The shape supports additional fields as follows:
    • size {number}, specifies the size of the value-point
  • "valueLine", defines the visual-appearance for value-lines (the guided line from the value-point to the value itself). The shape supports additional fields as follows:
    • length {number}, indicates the horizontal distance between the middle and end points of the value-line
  • "valueBack", defines the visual-appearance to apply on the value's background
  • "radarLine", specifies the visual-appearance to show the "radarLine" serie-types
  • "radarArea", specifies the visual-appearance to show the "radarArea" serie-types
  • "radarColumn", specifies the visual-appearance to show the "radarColumn" serie-types
  • "polarLine", specifies the visual-appearance to show the "polarLine" serie-types
  • "polarArea", specifies the visual-appearance to show the "polarArea" serie-types
  • "polarScatter", specifies the visual-appearance to show the "polarScatter" serie-types
    • size {number}, specifies the size of the data-point on the chart
  • "pie", specifies the visual-appearance to show the "pie" serie-types
  • "scatter", specifies the visual-appearance to show the "scatter" serie-types
    • size {number}, specifies the size of the data-point on the chart
  • "scatterLine", specifies the visual-appearance to show the "scatterLine" serie-types
  • "scatterArea", specifies the visual-appearance to show the "scatterArea" serie-types
  • "bubble", specifies the visual-appearance to show the "bubble" serie-types
    • size {number}, specifies the maximum-size of the data-point on the chart
  • "line", specifies the visual-appearance to show the "line" serie-types
  • "area", specifies the visual-appearance to show the "area" serie-types
  • "column", specifies the visual-appearance to show the "column" serie-types
  • "waterFall", specifies the visual-appearance to show the "waterFall" serie-types
    • lineSize {number}, defines size of to draw the lines between columns
  • "rangeColumn", specifies the visual-appearance to show the "rangeColumn" serie-types
  • "rangeArea", specifies the visual-appearance to show the "rangeArea" serie-types
  • "candleStick", specifies the visual-appearance to show the "candleStick" serie-types
    • size {number}, specifies the size of the stick
    • hollow {boolean}, indicates whether the hollow candlestick representation is displayed (hollow candle means that its closing value is higher (or equal) than opening value of the same period)
  • "ohlc", specifies the visual-appearance to show the "ohlc" serie-types
    • size {number}, specifies the size of the stick
  • "cursorLine", defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area
  • "cursorCategoryAxisTooltip", defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit
  • "cursorValueAxisTooltip", defines the visual-appearance to show the tooltip on the value-axes, when the crosshair hovers the value-unit
  • "cursorXAxisTooltip", defines the visual-appearance to show the tooltip on the x-axes, when the crosshair hovers the value-unit (available for xy-chart types)
  • "cursorYAxisTooltip", defines the visual-appearance to show the tooltip on the y-axes, when the crosshair hovers the value-unit (available for xy-chart types)
  • "cursorSerieTooltip", defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series
  • "legendSymbol", defines the visual-appearance of the symbols of the visible-series within the map legend
  • "legendSymbolHidden", defines the visual-appearance of the symbols of the hidden-series within the map legend
  • "legendLabel", defines the visual-appearance of the labels of the visible-series within the map legend
  • "legendLabelHidden", defines the visual-appearance of the labels of the hidden-series within the map legend
  • "legendUnit", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the visible-series within the map legend
  • "legendUnitHidden", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the hidden-series within the map legend
  • "select-overview", defines the visual-appearance to display the overview-selection
  • "selectout-overview", defines the visual-appearance to display the left/right parts outside of the overview-selection
  • "select-overview-resize", defines the visual-appearance to display left/right resize-margins of the overview-selection
  • "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
Example
null {null}, specifies the default visual appearance
 "" {string}, no shape (no visual appearance is applied to any part of the control)
 '{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(valuePoint)' {string}, shows the value-point in white on a black-background, while the cursor hovers it
 "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Graph.xxx combined with exontrol.Shapes.Graph.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Graph.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Graph.zzz object defines the visual appearance of "y" part of the control

SetSmooth(value)

The SetSmooth() method changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).
Parameters:
Name Type Description
value number Indicates the time in ms the control goes from one layout to another.
Example
0 {number}, no smooth changes once the control goes from a layout to another
  125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

SetSort(value)

The SetSort() method specifies the series to be sort, separated by spaces.
Parameters:
Name Type Description
value string Specifies the series to be sorted, separated by spaces. The format of a particular element of the sort field is "KEY[\[INNER\]][:([A]|D)]", where KEY is the name or the index of the serie, INNER is the inner-index of the value to sort (valid for multi-dimensional array only), A stands for ascending (by default), while D for descending.
Example
"name" {string}, sorts ascending the serie with the giving name
 "0 1:D" {string}, sorts ascending the first-serie (for identichal values, the second serie determines the order of the values)
 "ohlc[1]" {string}, sorts ascending the serie with the name "ohlc", by the second inner-value (the inner-value defines the element of an array-value, the [index] specifies the index of the inner-value to sort, the [index] is valid for charts that support multi-dimensional arrays such as "rangeColumn", "rangeArea", "candleStick" or "ohlc")

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string value that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The value as {object} supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Example
null {null}, the tfi field is ignored
  "bold monospace 16 &lt;fg blue>" {string}, defines Monospace font of 16px height, bold and blue
  {bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

SetToolTipDelay(value)

The SetToolTipDelay() method changes how long the mouse pointer must point to an object before the tool tip appears
Parameters:
Name Type Description
value number A value that specifies how long the mouse pointer must point to an object before the tool tip appears.
Example
0 {number}, the tooltip is shown "immediately"
  128 {number}, the tooltip is displayed in 128 ms.

SetToolTipFormat(value)

The SetToolTipFormat() method specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart)
Parameters:
Name Type Description
value string Indicates the format-expression to cusomize the tooltip. The format-expression supports predefined constants, operators and keywords as explained:
  • "value" keyword defines the value to format
  • "name" keyword defines the name of the serie
  • "category" keyword defines the category the value is in (available only if applicable)
  • "percent" keyword defines the percent associated with the value, as a number between 0 and 100 (available only if applicable)
  • "inner" keyword indicates the inner-index of the value within the point-data, such as 0(open or from), 1(high or to), 2(low) or 3(close) (available only if applicable)
  • "%V0", "%V1", "%V2" or "%V3" keyword gets the value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for colummRange chart-type, %V1 gets the high-value for candleStick chart-type or to for colummRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Example
null {null}, the name of the serie followed by the value, "(name ? name + ': ' : '') + value"
 "``" {string}, no tooltip is shown
 "value format ``" {string}, displays the values using two-decimals (according with the current regional settings)

SetToolTipPopDelay(value)

The SetToolTipPopDelay() method changes the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Parameters:
Name Type Description
value number A value that specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.
Example
0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip stays indefinitely (negative)
  1000 {number}, the tooltip is visible for 1 second

SetToolTipWidth(value)

The SetToolTipWidth() method changes the width of the tooltip window, in pixels
Parameters:
Name Type Description
value number A value that specifies the width of the tooltip window, in pixels.
Example
0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
  300 {number}, the tooltip's max-width is 300 pixels

SetValueAxis(value)

The SetValueAxis() method defines the chart's value axes (oY). The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use...
Parameters:
Name Type Description
value ValueAxisOptions | Array.<ValueAxisOptions>
Example
null {null}, the chart displays and uses a single value-axis
  {color: "red"} {ValueAxisOptions}, shows the default value-axis in red
  [{name: "celsius", min: 0, max: 100, majorUnit: 25}, {name: "kelvin", min: 273.15, max: 373.15, majorUnit: 25}] {ValueAxisOptions[]}, defines two value-axis celsius and kelvin (celsius is the default value axis)

SetValueSize(value)

The SetValueSize() method sets the size to show a column or a bar within the chart. The valueSize has no effect for xy or circular-compatible chart types. The valueSize has effect for area-compatible chart types as follows:
  • "area" {string}, an area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares two or more quantities with an area chart. (data requires array of numbers, supports vertical field, scrollable)
  • "line" {string}, a line chart or line graph, also known as curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time - a time series - thus the line is often drawn chronologically. In these cases they are known as run charts. (data requires array of numbers, supports vertical field, scrollable)
  • "column" {string}, a column chart or column graph is a chart or graph that presents categorical data with rectangular columns with heights proportional to the values that they represent. A horizontal column chart is called a bar chart. (data requires array of numbers, supports vertical field, scrollable)
  • "waterfall" {string}, a waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. (data requires array of numbers, supports vertical field, scrollable)
  • "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)
  • "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable)
Parameters:
Name Type Description
value number Specifies size to show a column or a bar within the chart. The size indicates the width for horizontally-oriented charts or height for the vertically-oriented chart types
Example
4 {number}, sets the column/bar's width to 4-pixels

SetWheelChange(value)

The SetWheelChange() method changes the amount the control scrolls when the user rolls the mouse wheel.
Parameters:
Name Type Description
value number A value that specifies the amount the control scrolls when the user rolls the mouse wheel.
Example
0 {number}, locks any action the mouse's wheel performs
  18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

SetXAxis(value)

The SetXAxis() method defines the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble")
Parameters:
Name Type Description
value ValueAxisOptions
Example
null {null}, the chart displays the default x-axis
  {color: "red"} {ValueAxisOptions}, shows the x-axis in red
  {min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for x-axis

SetYAxis(value)

The SetYAxis() method defines the configuration-options for y-ayis of yy-compatible chart-types ("scatter", "scatterLine" or "bubble")
Parameters:
Name Type Description
value ValueAxisOptions
Example
null {null}, the chart displays the default y-ayis
  {color: "red"} {ValueAxisOptions}, shows the y-ayis in red
  {min: -100, may: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, may and major intervals for y-ayis

SetZoom(value)

The SetZoom() method defines the zoom factor of the control's content.
Parameters:
Name Type Description
value number A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Example
null {null}, Specifies normal-view (100%)
  150 {number}, Indicates that the control's content is magnfied to 150%

SetZoomLevels(value)

The SetZoomLevels() method defines the zoomLevels factor of the control's content.
Parameters:
Name Type Description
value string specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom
Example
null {null}, Specifies that the control's zoom factor is always 100%
  150 {number}, Specifies that the control's zoom factor is always 150%
  "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the levels of zoom-factor is 50% to 350%

Smooth(callback, thisArg, oSmoothOptsopt, thisArg)

The Smooth() method performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.
Parameters:
Name Type Attributes Description
callback callback Indicates a callback function that generates the new layout for the control ( such as removing or adding new series to the control). The callback is provided with no arguments.
thisArg any Specifies the value of this keyword for callback functions. If missing, the GV object reference is used instead
oSmoothOpts object <optional>
 Indicates an object of {cbkR,cbkI,cbkT} type that defines callback to invoke when Smooth operation begins, progress and ends as explained below:
  • cbkR {callback}, specifies a function of callback(oSmooth) type that's invoked while Smooth progressively runs
  • cbkI {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation begins
  • cbkT {callback}, specifies a function of callback(oSmooth) type that's invoked once the Smooth operation ends
The oSmooth's parameter of cbkI, cbkR or cbkT callbacks is undefined while no animated-smooth, else it includes the following:
  • oW {exontrol.W}, indicates the current window as an object of exontrol.W
  • oZ {exontrol.WS}, holds the current visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (before apply the callback)
  • oNewZ {exontrol.WS}, holds the new visible-windows as an object of exontrol.WS([exontrol.W => [x,y,width,height]]) type (after callback has been applied)
  • rgWFT {object}, holds a collection of changes within windows as an object of exontrol.M1([exontrol.W => {from: [x,y,width,height], to: [x,y,width,height]}]) type
  • oWRend {exontrol.W}, indicates the window being rendered during the "Smooth" animation. For instance, if no UI window has been affected, invalidates the current window only, else renders the entire-canvas
  • progress {number}, specifies the state of the "Smooth" animation as a value between 0 and 1 (used by oSmooth.oNewZ.cbkget to define the ratio of window's UI rectange from/to)
Additionally, the oSmooth parameter includes the following:
  • mV2FT {map}, specifies a map of [view => {"vp":{from,to}}] type that holds the from/to visible-points for each part of each view
thisArg any defines the value of "this" keyword during cbkI, cbkR or cbkT callbacks.

Soom(zoomTo, oPointAbsopt)

The Soom() method zooms or/and scrolls the control's content.
Parameters:
Name Type Attributes Description
zoomTo number Indicates a numeric value that defines the target-zoom factor as a value between 10 and 1000 (no zoom if null or undefined)
oPointAbs object <optional>
 Specifies an object of {x,y} or array as [x,y] type that specifies the absolute-coordinates of the point to scroll into the client
Example
oGraph.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position (Home)

ValueAutoFit()

The ValueAutoFit() method changes the column/bar's size to the entire charts fits the client-rectangle

apyOpt(rgApplyOptions)

The apyOpt() method is called once the options is about to apply using the SetOptions() method (allow ordering the options to apply)
Parameters:
Name Type Description
rgApplyOptions array Indicates the list of options to apply, as an array of [string] type

onDblClk(event) → {any}

The onDblClk() method occurs once the user double-clicks the view
Parameters:
Name Type Description
event MouseEvent/TouchEvent A MouseEvent object that generated the event. Could be mouse-up or touch-end
Returns:
Returns an empty-value to continue the operation, else to cancel any further actions
Type
any

Events

onanchorclick

The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element)
Parameters:
Name Type Description
oEvent object Holds information about anchor being clicked
Properties
Name Type Description
id string specifies null (no identifier has been specified for the anchor) or the anchor's identifier
options string specifies null (no options has been specified for the anchor) or the anchor's options
Example
The following samples display information about the element being clicked:

oGraph.Listeners.Add("onanchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oGraph.oGV.onanchorclick = function (oEvent)
{
 console.log(oEvent);
}

where oGraph is an object of Graph type, oGV is member of Graph type, of GV type.

onclick

The onclick() method occurs once the user clicks or double-clicks the control.
Parameters:
Name Type Description
oEvent object specifies an object of {dblClick,button,modifiers,..} type, that holds information about the object being clicked
Properties
Name Type Description
view object indicates an object of exontrol.Graph.GV, ... type that specifies the view/window where the click occurred
dblClick boolean indicates whether the user clicks or double-clicks the serie
button number indicates which button is pressed while clicking the serie as 1 (left), 2 (right) or 4 (middle)
modifiers number specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
Example
The following samples display information about the serie being clicked:

oGraph.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oGraph.oGV.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oGraph is an object of Graph type. The oGV is member of Graph type, of GV type.

onscroll

The onscroll() method notifies your application once the view has been scrolled.
Parameters:
Name Type Description
oEvent object Specifies an object of {view,type,value} that holds information about the view's scroll that has been changed
Properties
Name Type Description
view GV specifies the view, where the scroll occurs
type exontrol.SB.ModeEnum specifies the view's scroll that has changed as 0(vertical), 1(horizontal)
value number specifies the scroll's value
Example
The following samples display the view's scroll position once it is changed:

oGraph.Listeners.Add("onscroll", function (oEvent)
{
 console.log(oEvent);
})

or

oGraph.oGV.onscroll = function (oEvent)
{
 console.log(oEvent);
}

where oGraph is an object of Graph type. The oGV is member of Graph type, of GV type.