new GV(oGraph)
Defines the graph view of the control that displays the series and manages the layout of the control by resizing and arranging the axes, legend, and overview within the available client area, while also providing smooth transitions between layouts when the chart type changes or when elements such as axes, legend, or overview are shown or hidden. The oGV field defines the control's base graph-view. Use the AddGraphView() method to add a new graph-view to the control, and the RemoveGraphView() method to remove a graph-view previously created with the AddGraphView() method. The graph-view also handles user interactions with these elements such as scrolling, zooming, and tooltips.
Parameters:
| Name | Type | Description |
|---|---|---|
oGraph |
Graph | Specifies an object of Graph type that defines the owner control of the view to be created. |
Methods
GetAllowActions() → {string}
The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.
Returns:
Returns the actions the user can perform once the control is clicked or touched
The format of the property is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."where
- "action", defines the action to perform (as defined below)
Action Description Flags "fit" Fits the drag-area into the control's client area - [zoom], specifies that the "fit" action magnifies the chart instead resizing it
"move-value" Rearranges values, series, or data through drag-and-drop (available only if the serie's ShowValue property includes exPoint flag) - [disableMoveCategory], disables rearranging values/categories (default, if the flag is missing the user changes the control's Order property)
- [enableMoveSerie], enables rearranging series (changes the serie's Position property)
- [enableMoveData], enables rearranging the data of the serie (changes the serie's Data property)
"overview-selection-resize" Resizes the graph using the left/right margins of the overview-selection "scroll" Scrolls the control's content by drag - [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
"value-resize" Resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true) "zoom" Zooms the control's content at dragging-point - "shortcut", defines the event'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
Example
The following statements are equivalent:
oGraph.GetAllowActions() {string}, gets the control's default allowActions value
oGraph.AllowActions {string}, gets the control's default allowActions value
where oGraph is the instance of the control.GetAllowDrop() → {boolean}
The GetAllowDrop() method specifies whether users can drag and drop local files into the control. The control supports importing data from local files by dragging and dropping them directly onto it. Setting AllowDrop to true enables this functionality, allowing users to easily load data from local files for visualization. When AllowDrop is set to false, drag-and-drop support for local files is disabled, preventing users from importing data in this way. This can be useful when data input must be restricted to specific sources or formats. The Data property or the Import method can be used to load data from various sources, including local files, URLs, or directly from JavaScript objects and arrays.
Returns:
Returns true, if the user can drag and drop local files into the control.
- Type
- boolean
Example
The following statements are equivalent:
oGraph.GetAllowDrop() {boolean}, returns true, if the user can drag and drop local files into the control
oGraph.AllowDrop {boolean}, returns true, if the user can drag and drop local files into the control
where oGraph is an instance of the Graph control.GetAllowStack() → {boolean}
The GetAllowStack() method specifies whether series are stacked according to the non-empty values defined in the Serie.Stack property. When AllowStack is true, series that share the same non-empty Stack value are visually stacked, combining their values to display a cumulative total. When AllowStack is false, the Stack property is ignored, and all series are displayed independently without stacking, regardless of their Stack values. By default, AllowStack is false, so series are not stacked unless this property is explicitly enabled. This allows for greater flexibility in how data is visualized, as users can choose to stack series to show cumulative values or keep them separate for individual comparison. The Stack property specifies whether a series is stacked, with the same value for multiple series of the same type indicating that they belong to the same stacking group.
- Since:
- 4.2
Returns:
Returns true if stacking is enabled for the series, or false if it is disabled
- Type
- boolean
Example
The following statements are equivalent:
oGraph.GetAllowStack() {boolean}, specifies whether series are stacked based on the non-empty values defined in the Stack property
oGraph.AllowStack {boolean}, specifies whether series are stacked based on the non-empty values defined in the Stack property
where oGraph is an object of Graph typeGetAutoFit() → {boolean}
The GetAutoFit() method indicates whether the elements of the series are resized to fit the control's client-area. When AutoFit is set to true, the control automatically resizes the elements of the series to ensure they fit within the visible area of the control, regardless of the amount of data or the size of the control. This can be particularly useful for maintaining readability and visual appeal when dealing with large datasets or when the control is resized. When AutoFit is set to false (default), the elements of the series are displayed at their actual size, which may result in scroll bars appearing if the content exceeds the control's dimensions.
Returns:
Returns true, if the elements of the series are resized to fit the control's client-area.
- Type
- boolean
Example
The following statements are equivalent:
oGraph.GetAutoFit() {boolean}, returns true, if the elements of the series are resized to fit the control's client-area
oGraph.AutoFit {boolean}, returns true, if the elements of the series are resized to fit the control's client-area
where oGraph is an instance of the Graph control.GetBackground() → {BackgroundOptions}
The GetBackground() method indicates the display options to show different parts of the control. The BackgroundOptions object defines the default visual appearance used by the control for chart elements such as series colors, area transparency, and tooltip styling. It allows customizing how series are colored, how area charts blend with the background, and how tooltips appear when interacting with the chart.
Returns:
Returns the display options to show different parts of the control
- Type
- BackgroundOptions
Example
The following statements are equivalent:
oGraph.GetBackground() {BackgroundOptions}, returns the display options to show different parts of the control
oGraph.Background {BackgroundOptions}, returns the display options to show different parts of the control
where oGraph is an instance of the Graph control.GetCategoryAxis() → {CategoryAxisOptions|Array.<CategoryAxisOptions>}
The GetCategoryAxis() method gets the chart's category axes. The category axis is horizontal (oX) for horizontal charts and vertical (oY) for vertical charts, based on the Vertical property of the Serie object. For xy-compatible chart types (scatter, scatterLine, or bubble), the XAxis and YAxis properties define the x and y axes, and the CategoryAxis property is ignored. The CategoryAxis property can be set to null to use a single default category axis, or to an object or an array of CategoryAxisOptions to define one or more category axes with custom configurations.
Returns:
Returns the chart's category axes.
- Type
- CategoryAxisOptions | Array.<CategoryAxisOptions>
Example
The following statements are equivalent:
oGraph.GetCategoryAxis() {CategoryAxisOptions|CategoryAxisOptions[]}, returns the chart's category axes
oGraph.CategoryAxis {CategoryAxisOptions|CategoryAxisOptions[]}, returns the chart's category axes
where oGraph is an instance of the Graph control.GetCursor() → {CursorOptions}
The GetCursor() method is used to configure the behavior and appearance of the chart's cursor. It allows showing or hiding the cursor, displaying crosshair lines over the X (category) and Y (value) axes, enabling tooltips for nearby series data or axes, controlling specific X and Y line visibility for XY-type charts, and setting the smooth transition time for cursor movement between positions. Essentially, it defines how the cursor interacts with the chart and how information is presented to the user during hover or touch. By default, the Cursor property is hidden.
The Cursor property must be assigned as an object (e.g., Cursor = { visible: true }) rather than setting individual attributes directly (like Cursor.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged, like in the following sample:
Cursor = { visible: true }; Cursor = { showCursorValueLine: false };
After this, the visible field remains true, allowing you to gradually update cursor settings without overwriting the existing configuration.
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
Example
The following statement are equivalent:
oGraph.GetCursor() {object}, gets the configuration options to display crosshair over the hover/touch area
oGraph.Cursor {object}, gets the configuration options to display crosshair over the hover/touch area
where oGraph is an object of Graph typeGetCursors() → {string}
The GetCursors() method retrieves the mouse cursors assigned to different parts of the control. These cursors determine the pointer appearance when the user hovers over specific areas, allowing you to provide visual feedback for interactive regions of the control. The cursors are defined as a string expression that specifies the cursor to apply on each part of the control, using various formats such as CSS cursor values. By default, the cursors property is "pointer(anchor,legend)", which means that the pointer cursor is shown when hovering over the "anchor" and "legend" 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 the 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 "part" can be any of the following:
Cursor Description "alias" indicates a shortcut or alias will be created "all-scroll" indicates scrolling in any direction "auto" lets the browser decide the cursor based on context "cell" indicates a table cell "col-resize" indicates a column can be resized horizontally "context-menu" indicates a context menu is available "copy" indicates something will be copied "crosshair" a precise crosshair cursor "default" the default arrow cursor "e-resize" resize east (right edge) "ew-resize" resize horizontally "grab" indicates an item can be grabbed "grabbing" indicates an item is being grabbed "help" indicates help information is available "move" indicates something can be moved "n-resize" resize north (top edge) "ne-resize" resize northeast (top-right corner) "nesw-resize" resize along the northeast–southwest axis "no-drop" indicates dropping is not permitted "not-allowed" indicates the action is not allowed "ns-resize" resize vertically "nw-resize" resize northwest (top-left corner) "nwse-resize" resize along the northwest–southeast axis "pointer" the pointer cursor (a hand with a pointing finger) "progress" indicates background processing "row-resize" indicates a row can be resized vertically "s-resize" resize south (bottom edge) "se-resize" resize southeast (bottom-right corner) "sw-resize" resize southwest (bottom-left corner) "text" the text selection cursor (I-beam) "url(...)" uses a custom cursor image (with optional fallback) "vertical-text" the vertical text selection cursor "w-resize" resize west (left edge) "wait" indicates the program is busy "zoom-in" indicates zooming in "zoom-out" indicates zooming out
Part Description "anchor" (hyperlink) defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) "legend" defines the mouse-cursor when the mouse pointer hovers an object of the legend "long" specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field) "move-value-drag" defines the mouse cursor while a value, series, or data point is being dragged, visually indicating an active drag operation and showing which element can be grabbed. This is valid only if allowActions includes the "move-value" action and is typically used with "pointer(valuePoint)" to suggest that the user can click and move the value. Example: when the user clicks a value-point and begins dragging it, the cursor changes to "grabbing(move-value-drag)" to signal that the item is being moved (@since 4.9) "no" defines the mouse cursor to be shown when a drag-and-drop operation is not allowed (for example, when dropping a value, series, or data point is not permitted in the current area). This is valid only if allowActions includes the "move-value" action and provides immediate visual feedback to prevent accidental operations. Example: when the user drags a value over an invalid target, the cursor changes to "not-allowed(no)" to indicate that the operation is blocked (@since 4.9) "valuePoint" defines the mouse-cursor when the mouse pointer hovers the value-point
- Type
- string
Example
The following statements are equivalent:
oGraph.GetCursors() {string}, gets the current mouse cursors assigned to different parts of the control
oGraph.Cursors {string}, gets the current mouse cursors assigned to different parts of the control
where oGraph is an instance of Graph controlGetFormatText() → {exontrol.DrawTextFormatEnum}
The GetFormatText() method specifies the format to display the view's invalid label. The FormatText property can be set to null to indicate that the default format is applied, or to a combination of flags defined within the exontrol.DrawTextFormatEnum enumeration to specify the text format. The text format defines the alignment, wrapping, clipping, and other formatting options for the text displayed in the control.
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the labels and captions within the control.
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
Example
The following statements are equivalent:
oGraph.GetFormatText() {exontrol.DrawTextFormatEnum}, gets the current format to display the view's invalid label
oGraph.FormatText {exontrol.DrawTextFormatEnum}, gets the current format to display the view's invalid label
where oGraph is an instance of Graph controlGetImageAlign() → {number}
The GetImageAlign() method gets the alignment of the image. The ImageSize property defines the default-size of the images within the control (reserved). Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the ImageAlign property does not affect images inserted with the <img> tag. Currently, the ImageSize and ImageAlign properties are ignored and reserved for future use.
Returns:
Returns the alignment of the 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
Example
The following statements are equivalent:
oGraph.GetImageAlign() {number}, gets the current alignment of the image
oGraph.ImageAlign {number}, gets the current alignment of the image
where oGraph is an instance of Graph controlGetImageSize() → {any}
The GetImageSize() method defines the default-size of the images within the control (reserved). Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageSize field does not affect images inserted with the <img> tag. The <img> tag supports additional size attribute that specifies the picture's size such as "<img>apple:18</img>2002", which indicates that the image named apple has a size of 18. Currently, the ImageSize and ImageAlign properties are ignored and reserved for future use.
Returns:
Returns the size, range of limits the image is displayed as expalined:
- {null}, Indicates that the image is displayed as it is (full-sized).
- {number}, Specifies that the image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the 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
Example
The following statements are equivalent:
oGraph.GetImageSize() {any}, gets the current default-size of the images within the control
oGraph.ImageSize {any}, gets the current default-size of the images within
where oGraph is an instance of Graph controlGetInvalid() → {string}
The GetInvalid() method specifies the ex-html label displayed by the control when no data is available or when the data is invalid. The Invalid property can be set to null to indicate that no label is shown, or to a string that defines the message displayed while the control has no or invalid data. This option allows you to provide feedback to users when the control cannot display data, improving the user experience by clearly communicating the situation. The Data property or the Import method can be used to load data from various sources, including local files, URLs, or directly from JavaScript objects and arrays. By default, the Invalid property is "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
Example
The following statements are equivalent:
oGraph.GetInvalid() {string}, gets the current label the control is displaying while no or invalid data
oGraph.Invalid {string}, gets the current label the control is displaying while no or invalid data
where oGraph is an instance of Graph controlGetLegend() → {LegendOptions}
The GetLegend() method gets the configuration options for displaying the view's legend, which allows users to show or hide series at runtime. The legend displays the list of series in the chart and typically includes a color indicator for each series to help users identify and differentiate them. By configuring the Legend property, you can control its visibility, position, layout, and behavior. Clicking a label in the legend shows or hides the corresponding series in the chart, which is useful when multiple series are displayed and users need to identify or control them at runtime. By default, the legend is hidden.
The Legend property must be assigned as an object (for example, Legend = { visible: true }) rather than setting individual attributes directly (like Legend.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged. For example:
Legend = { visible: true };
Legend = { dock: 'top' };
After this, the visible field remains true, allowing you to gradually update legend settings without overwriting the existing configuration.
Returns:
Returns the configuration options to display the view's legend
- Type
- LegendOptions
Example
The following statement are equivalent:
oGraph.GetLegend() {object}, gets the configuration options to display the view's legend
oGraph.Legend {object}, gets the configuration options to display the view's legend
where oGraph is an object of Graph typeGetLocked() → {boolean}
The GetLocked() method indicates whether the control is locked(protected) or unlocked. The ReadOnly property indicates whether the control is read-only. When the control is locked, the user cannot interact with the chart in any way, including scrolling or modifying data. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. In both cases, the chart's data and series remain protected from changes, but read-only mode allows viewing and exploration, while locked mode prevents all interaction.
Returns:
Returns true, if the control is locked(protected) or unlocked
- Type
- boolean
Example
The following statements are equivalent:
oGraph.GetLocked() {boolean}, returns true, if the control is locked(protected) or unlocked
oGraph.Locked {boolean}, returns true, if the control is locked(protected) or unlocked
where oGraph is an instance of Graph controlGetMisc() → {MiscellaneousOptions}
The GetMisc() method indicates the control's miscellaneous options. The miscellaneous options include various settings that affect the control's behavior and appearance, such as cursor transitions, value size, and other customizable features that do not fall under specific categories like axes or series options. The Misc property can be set to an object of type MiscellaneousOptions to define these settings, or it can be set to null to use the control's default miscellaneous options. Changing the miscellaneous options can impact how the control responds to user interactions and how it displays certain elements, allowing for a more tailored user experience. Any misc option not explicitly set in the value parameter of SetMisc() method is assigned to the control's default value for that option. For instance, if the value parameter does not include the digits option, the control's default value for the digits option is used.
Returns:
Returns the control's miscellaneous options
- Type
- MiscellaneousOptions
Example
The following statements are equivalent:
oGraph.GetMisc() {MiscellaneousOptions}, returns the control's miscellaneous options
oGraph.Misc {MiscellaneousOptions}, returns the control's miscellaneous options
where oGraph is an instance of the Graph control.GetMultiColorSerie() → {boolean}
The GetMultiColorSerie() method determines whether a single data series (single-valid serie) in a chart can use multiple colors for its data points instead of a single uniform color. The seriesColors field defines the default colors used for the chart's series. When MultiColorSerie is set to true, each data point in the series can have a different color, which helps visually distinguish individual values within the same series. When MultiColorSerie is set to false, the entire series is rendered in a single color, determined by the seriesColors field or the specific color settings of the series. By default, MultiColorSerie is true, allowing greater visual differentiation of data points within a series. The seriesColorsDecrease field defines the default colors for the chart's series (when the value goes down). When all colors are used, new colors are pulled from the start again. The seriesColorsAreaAlpha field defines the alpha channel for the default colors of the area-type chart's series.
- Since:
- 4.2
Returns:
Returns true if a single series' data points use multiple colors for representation
- Type
- boolean
GetOptions() → {Graph.Options}
The GetOptions() method returns the current options of the control. The control's options define its visual aspects such as the colors of the series, the size of the images, and other appearance or behavior-related settings. The Options property can be used to get or set all options of the control at once. Individual options should be changed by assigning a new options object rather than modifying the object returned by Options/GetOptions(). For example, to change the autoFit option use Options = {autoFit: true} instead of Options.autoFit = true.
Each option of the Graph.Options type has a corresponding property of the Graph object, which means that the following statements are equivalent:
oGraph.Options = {autoFit: true}
oGraph.oGV.SetOptions({autoFit: true})
oGraph.AutoFit = true
oGraph.oGV.SetAutoFit(true)
Note: All options of the control are the same for all views. Therefore, when an option is changed using the SetOptions() method of a view, the change applies to all other views of the control as well.
Returns:
Returns an object of Graph.Options type that indicates the options to display the control.
- Type
- Graph.Options
Example
The following statements are equivalent:
oGraph.Options {object}, gets all options of the control at once, as an object of Graph.Options type
oGraph.oGV.GetOptions() {object}, gets all options of the control at once, as an object of Graph.Options type
where oGraph is an object of Graph typeGetOrder() → {string}
The GetOrder() method gets a custom display sequence for values or categories using their zero-based indexes, represented as a string separated by commas. It returns a list of value or category indexes in their displayed order, and assigning a non-empty value allows you to set the position of one, several, or all values.
The arrangement of data values in the chart is influenced by the following properties:
- Sort, sorts the series values in ascending or descending order
- reverse (option of CategoryAxisOptions type), reverses the position of values as they were added (if no Sort is applied) or reverses the order produced by the Sort property (if Sort is applied)
- Order, repositions values according to their zero-based indexes in a custom sequence
The custom order is cleared when Sort property or CategoryAxisOptions.reverse field is applied, leaving the Order property empty. To reset the custom ordering and revert to the original sequence of values or categories as they were added, set the Order property to an empty string or null. This removes any custom ordering and restores the default sequence as defined by the Sort property and CategoryAxisOptions.reverse field.
- Since:
- 4.9
Returns:
Returns a list of value or category indexes in their displayed order, separated by commas. The index is zero-based, meaning the first value has an index of 0, the second an index of 1, and so on. You can specify the order for one or more values; any values not included in the list will be displayed after the specified values, in their original order.
- Type
- string
Example
"3,1,2" {string}, indicates that the value with the index 3 is displayed first, followed by the value with index 1, and then the value with index 2GetOverview() → {OverviewOptions}
The GetOverview() method gets the configuration options for displaying the overview, which shows a map of the entire series without a scroll bar. The overview is a small chart that provides a visual summary of the complete data series, allowing users to quickly grasp overall trends and patterns. It is especially useful for large datasets or when the main chart is scrollable, as it helps users navigate the data more efficiently. By configuring the Overview property, you can control its visibility, size, position, and other aspects of its appearance and behavior. By default, the overview is hidden.
The Overview property must be assigned as an object (for example, Overview = { visible: true }) rather than setting individual attributes directly (like Overview.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged. For example:
Overview = { visible: true };
Overview = { dock: 'bottom' };
After this, the visible field remains true, allowing you to gradually update overview settings without overwriting the existing configuration.
Returns:
Returns the configuration options to display the overview
- Type
- OverviewOptions
Example
The following statement are equivalent:
oGraph.GetOverview() {object}, gets the configuration options to display the overview
oGraph.Overview {object}, gets the configuration options to display the overview
where oGraph is an object of Graph typeGetPad() → {number|Array.<number>|string}
The GetPad() method specifies the space between view's content and its borders. The Pad property can be set to null to indicate that the default padding value of [4,4] is applied, or to a value that defines the padding on horizontal and vertical side. The padding can be defined as a single numeric value to pad horizontal and vertical size with the same value, or as a "x,y" string or [x,y] array to specify the padding on horizontal and vertical side respectively.
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
Example
The following statements are equivalent:
oGraph.GetPad() {number|number[]|string}, gets the current padding of the view
oGraph.Pad {number|number[]|string}, gets the current padding of the view
where oGraph is an instance of Graph controlGetReadOnly() → {string}
The GetReadOnly() method indicates whether the control is in read-only mode. The Locked property locks or unlocks the control. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. In read-only mode, the chart's data and series remain protected from changes, but users can view and explore the chart without making modifications.
Returns:
Returns true, if the control is read-only
- Type
- string
Example
The following statements are equivalent:
oGraph.GetReadOnly() {boolean}, returns true, if the control is in read-only mode
oGraph.ReadOnly {boolean}, returns true, if the control is in read-only mode
where oGraph is an instance of Graph controlGetScrollBarsOrigin() → {string}
The GetScrollBarsOrigin() method specifies the color used to highlight the position of the origin (0,0) on the control's scroll bars. It applies to series of type "scatter", "scatterLine", or "bubble". The Serie.Type property defines the chart type of a series. The ScrollBarsOrigin property can be set to null to hide the origin (0,0) on the scroll bars, or to any CSS color string to display the origin (0,0) in that color. By default, the ScrollBarsOrigin property is "black", so the origin (0,0) is shown on the control's scroll bars in black.
Returns:
Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color
- Type
- string
Example
The following statements are equivalent:
oGraph.GetScrollBarsOrigin() {string}, gets the color used to highlight the position of the origin (0,0) on the control's scroll bars
oGraph.ScrollBarsOrigin {string}, gets the color used to highlight the position of the origin (0,0) on the control's scroll bars
where oGraph is an instance of the Graph control.GetScrollPos() → {object}
The GetScrollPos() method gets the horizontal and vertical scroll position of the control's default view. The ScrollBars property determines whether the control displays horizontal and/or vertical scroll bars. The ScrollPos property can be set to null to indicate that the control's content is not scrolled, or to an object of type {x, y} to define the horizontal and vertical scroll position. Setting the x property of ScrollPos to a value (for example, 100) scrolls the control's content horizontally to that position, while setting the y property scrolls the content vertically. This allows you to control the initial scroll position of the control's content, which can be useful for focusing on specific areas of a large chart or graph when it is first displayed. The Scroll() method scrolls the view based on the giving key. The onscroll event notifies your application once the view has been scrolled.
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
Example
The following statements are equivalent:
oGraph.GetScrollPos() {object}, gets the horizontal and vertical scroll position of the control's default view
oGraph.ScrollPos {object}, gets the horizontal and vertical scroll position of the control's default view
where oGraph is an instance of the Graph control.GetSerieDef() → {object}
The GetSerieDef() method gets the default options applied to each newly created series. Existing series are not affected; the defaults apply only to series added afterward. The SerieDef object supports all fields defined by the SerieOptions type. This property is useful for maintaining a consistent configuration across all newly added series without having to repeatedly set the same options.
- Since:
- 4.9
Returns:
Returns an object that defines the default options for newly created series, or null if no defaults are set.
- Type
- object
Example
The following statements are equivalent:
oGraph.GetSerieDef() {object}, gets the default options for new series
oGraph.SerieDef {object}, gets the default options for new series
where oGraph is an instance of the Graph controlGetSerieType() → {string}
The GetSerieType() method specifies the default representation of data for all series where the Serie.Type property is not explicitly defined. It determines how these series are rendered - such as line, bar, or scatter plot - ensuring consistent visualization across the chart. The Serie.Type property can override this default for individual series, allowing different chart types within the same graph. By default, SerieType is set to "column", so series without a specified type are displayed as column charts.
- Since:
- 4.2
Returns:
Returns the default representation method for the data in all series where the type property is not explicitly defined.
The type can be one of the following:
- "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)
- "radarArea" {string}, a radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative, but various heuristics, such as algorithms that plot data as the maximal total area, can be applied to sort the variables (axes) into relative positions that reveal distinct correlations, trade-offs, and a multitude of other comparative measures. (data requires array of numbers, non-scrollable)
- "radarLine" {string}, similar with radarArea type. (data requires array of numbers, non-scrollable)
- "radarColumn" {string}, displays data in radial columns starting from one center point. The circle is divided into equal portions depending on the number of columns and each column group occupies one portion (similar with "radarArea" type, data requires array of numbers, non-scrollable)
- "pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-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)
- "polarArea" {string}, represents data points connected with straight line segments that enclose a filled area together with the chart pole (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "polarLine" {string}, represents data points connected with straight line segments (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "polarScatter" {string}, shows the serie as non-connected data points (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "scatter" {string}, a scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "scatterLine" {string}, a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "scatterArea" {string}, a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "bubble" {string}, a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables.). Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. (data requires array of array of three-numbers, such as [[x, y, size]], supports vertical field, non-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, 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, close]], supports vertical field, scrollable)
- Type
- string
Example
The following statements are equivalent:
oGraph.GetSerieType() {string}, gets the default representation method for the data in all series where the type property is not explicitly defined
oGraph.SerieType {string}, gets the default representation method for the data in all series where the type property is not explicitly defined
where oGraph is an object of Graph type GetShapes() → {string}
The GetShapes() method retrieves the shapes assigned to each part of the control. These shapes define the visual appearance of the control's elements, such as borders, fills, and other graphical components. Using this method, you can inspect or modify how each part of the control is drawn, allowing for full customization of its look and feel. The shapes are defined as a string expression that specifies the shape to apply on each part of the control, using various formats such as color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or references to predefined shapes within the exontrol library. The Serie.Shape property defines the shape to apply on the data-points of a serie, while the Serie.ValuePointShape property defines the shape to apply on the value-labels of a serie.
Returns:
Returns a string expression that defines the shapes each part of the control can display.
The format of the 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)
Part Description Additional "area" specifies the visual-appearance to show the "area" 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
"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)
"column" specifies the visual-appearance to show the "column" serie-types "cursorCategoryAxisTooltip" defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit "cursorLine" defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area (showCursorCategoryLine or showCursorValueLine) "cursorSerieTooltip" defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series "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) "frameFit" defines the visual-appearance to display the frame while fitting objects into the control's client area by drag "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 "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 "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 "line" specifies the visual-appearance to show the "line" serie-types "ohlc" specifies the visual-appearance to show the "ohlc" 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)
"pie" specifies the visual-appearance to show the "pie" serie-types "polarArea" specifies the visual-appearance to show the "polarArea" serie-types "polarLine" specifies the visual-appearance to show the "polarLine" 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
"radarArea" specifies the visual-appearance to show the "radarArea" serie-types "radarColumn" specifies the visual-appearance to show the "radarColumn" serie-types "radarLine" specifies the visual-appearance to show the "radarLine" serie-types "rangeArea" specifies the visual-appearance to show the "rangeArea" serie-types "rangeColumn" specifies the visual-appearance to show the "rangeColumn" 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
"scatterArea" specifies the visual-appearance to show the "scatterArea" serie-types "scatterLine" specifies the visual-appearance to show the "scatterLine" serie-types "valueBack" defines the visual-appearance to apply on the value's background "valueLine" defines the visual-appearance for value-lines (the guided line from the value-point to the value itself)
- length {number}, indicates the horizontal distance between the middle and end points of the value-line
"valuePoint" defines the visual-appearance for value-points
- size {number}, specifies the size of the value-point
- frameColor, defines the color to show the object's frame
- patternColor, defines the color to show the object's pattern
- fillColor, defines the color to show the object's background
- fillGradientColor, defines the gradient type and colors to show the object's background. The fillColor attribute defines the starting color. The fillGradientColor attribute has effect only if the fillColor attribute is defined (not null or undefined).
The ...Color attributes supports the following additional values:
- "null", indicates that the value-point uses the serie's value color
- "transparent", specifies that the value-point is not visible (transparent)
"waterFall" specifies the visual-appearance to show the "waterFall" serie-types
- lineSize {number}, defines size of to draw the lines between columns
"select-overview" defines the visual-appearance to display the overview-selection "select-overview-resize" defines the visual-appearance to display left/right resize-margins of the overview-selection "selectout-overview" defines the visual-appearance to display the left/right parts outside of the overview-selection
- Type
- string
Example
The following statements are equivalent:
oGraph.GetShapes() {string}, returns a string expression that defines the shapes each part of the control can display
oGraph.Shapes {string}, returns a string expression that defines the shapes each part of the control can display
where oGraph is an instance of the Graph control.GetSmooth() → {number}
The GetSmooth() method defines the time in ms the control goes from one layout to another. The smooth-transition effect is performed when the control changes its layout, such as when resizing the control or changing the number of visible series. Setting smooth to 0 disables the smooth-transition effect, while setting it to a positive number (e.g., 125) enables a smooth transition that lasts for that duration in milliseconds, providing a visually appealing animation as the control updates its layout. By default, the property is set to 125 ms, allowing for a smooth transition effect when the control's layout changes.
Returns:
Returns the time in ms the control goes from one layout to another.
- Type
- number
Example
oGraph.GetSmooth() {number}, returns the time in ms the control goes from one layout to anotherGetSort() → {string}
The GetSort() method gets the list of series to be sorted, separated by spaces. The order of series in the Sort property determines the sorting priority, with the first series having the highest priority, the second series the next highest, and so on. The Sort property can be set to null to indicate that no sorting is applied, or to a string expression that specifies which series to sort and their sorting order. The sorting order can be ascending (A) or descending (D), with ascending being the default if not specified. Each element in the Sort property can specify the series by name or index and optionally include an inner index for multi-dimensional arrays, along with the sorting direction.
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
Example
The following statements are equivalent:
oGraph.GetSort() {string}, gets the list of series to be sorted, separated by spaces
oGraph.Sort {string}, gets the list of series to be sorted, separated by spaces
where oGraph is an object of Graph typeGetTfi() → {string|object}
The GetTfi() method gets the font attributes to apply on captions of the control. The GetTfi() method 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}. Correspondingly, the Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance.
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 direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
- 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
Example
The following statements are equivalent:
oGraph.GetTfi() {string}, returns the control's font attributes as a string such as "b monospace 16"
oGraph.Tfi {string}, returns the control's font attributes as a string such as "b monospace 16"
where oGraph is an instance of Graph controlGetToolTipDelay() → {number}
The GetToolTipDelay() method retrieves the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly. The ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
- Type
- number
Example
The following statements are equivalent:
oGraph.GetToolTipDelay() {number}, returns how long the mouse pointer must point to an object before the tool tip appears
oGraph.ToolTipDelay {number}, returns how long the mouse pointer must point to an object before the tool tip appears
where oGraph is an instance of the Graph control.GetToolTipFormat() → {string}
The GetToolTipFormat() method gets the expression used to customize the tooltip displayed when the cursor hovers over value points of the chart. The ShowValue property of the Serie object determines whether value points are displayed on the chart. If the ShowValue property includes the exPoint flag, the tooltip appears when the cursor hovers over value points. The ToolTipFormat property can be set to null to use the default tooltip format, or to a string expression to define a custom format for the tooltip.
The format-expression supports predefined constants, operators and keywords as explained:
- "value", {number} specifies the data point value
- "name", {string} defines the name of the serie as specified by Name property
- "user", {any} specifies the extra data associated with the serie as specified by UserData property (@since 4.8)
- "index", {number} indicates the index of the category that contains the current value (@since 4.8)
- "category", {string} specifies the category the current value is in (available only if applicable)
- "percent", {number} indicates the percent of the item, as a number between 0 and 100 (available only if applicable)
- "inner", {number} indicates the inner index of the value within the point data. For example, 0 represents the 'open' or 'from' value, 1 represents the 'high' or 'to' value, 2 represents the 'low' value, and 3 represents the 'close' value. This property is defined only for charts that require multi-dimensional arrays, such as candlestick chart types. (available only if applicable)
- "%V0", "%V1", "%V2" or "%V3", {number} retrieve the designated values by referencing %V0 for the open value (for candlestick charts or "from" in column range charts), %V1 for the high value (for candlestick charts or "to" in column range charts), %V2 for the low value (for candlestick charts), and %V3 for the close value (for candlestick charts, defaulting to "value" if unavailable)
Returns:
Returns the format to customize the tooltips
- Type
- string
Example
The following statements are equivalent:
oGraph.GetToolTipFormat() {string}, returns the format to customize the tooltips
oGraph.ToolTipFormat {string}, returns the format to customize the tooltips
where oGraph is an instance of the Graph control.GetToolTipPopDelay() → {number}
The GetToolTipPopDelay() method returns the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels. By default, the tooltip remains visible for 5000 milliseconds.
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
- Type
- number
Example
The following statements are equivalent:
oGraph.GetToolTipPopDelay() {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
oGraph.ToolTipPopDelay {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
where oGraph is an instance of the Graph control.GetToolTipWidth() → {number}
The GetToolTipWidth() method returns the tooltip window's width in pixels. The ToolTipWidth property defines the tooltip window's width in pixels and accepts a numeric value; a value of -1 (default) displays the tooltip on a single line without any width restriction. The ToolTipDelay property specifies the time in milliseconds the mouse pointer must hover over an object before the tooltip appears. The ToolTipPopDelay property specifies how long, in milliseconds, the tooltip remains visible while the mouse pointer stays stationary within the control.
Returns:
Returns the width of the tooltip window, in pixels
- Type
- number
Example
The following statements are equivalent:
oGraph.GetToolTipWidth() {number}, returns the width of the tooltip window, in pixels
oGraph.ToolTipWidth {number}, returns the width of the tooltip window, in pixels
where oGraph is an instance of the Graph control.GetValueAxis() → {ValueAxisOptions|Array.<ValueAxisOptions>}
The GetValueAxis() method gets the chart's value axes. Unreferenced value axes display the data using the default value axis. The Axis property of the Serie object specifies the name of the value axis used by a series. The value axis represents the vertical axis (oY) for horizontal charts and the horizontal axis (oX) for vertical charts. The Vertical property of the Serie object specifies whether the chart is displayed vertically or horizontally. For xy-compatible chart types (scatter, scatterLine, or bubble), the XAxis and YAxis properties define the configuration of the horizontal and vertical axes, and the ValueAxis property is ignored. The ValueAxis property can be set to null to indicate that the chart uses a single default value axis, or to an object or an array of ValueAxisOptions to define one or more value axes with custom configurations.
Returns:
Returns the chart's value axes as a ValueAxisOptions or an array of ValueAxisOptions, depending on how they are defined. If the chart uses a single default value axis, it returns null or a single ValueAxisOptions object; if multiple value axes are defined, it returns an array of ValueAxisOptions objects.
- Type
- ValueAxisOptions | Array.<ValueAxisOptions>
Example
The following statements are equivalent:
oGraph.GetValueAxis() {ValueAxisOptions|ValueAxisOptions[]}, returns the chart's value axes
oGraph.ValueAxis {ValueAxisOptions|ValueAxisOptions[]}, returns the chart's value axes
where oGraph is an instance of the Graph control.GetValueSize() → {number}
The GetValueSize() method gets the size of a column or bar in the chart, representing the width for horizontal charts or the height for vertical charts. It does not apply to chart types such as radarArea, radarLine, radarColumn, polarArea, polarLine, polarScatter, or pie, where element sizing is determined by the layout. The AutoFit property determines whether the control automatically resizes series elements to fit the available space. If AutoFit is true, elements are adjusted to prevent overlap and ensure readability. If false, elements retain their original size, which may cause overlap or truncation when data values are large or there are many series.
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
Example
The following statements are equivalent:
oGraph.GetValueSize() {number}, returns the size to show a column or a bar within the chart
oGraph.ValueSize {number}, returns the size to show a column or a bar within the chart
where oGraph is an instance of the Graph control.GetWheelChange() → {number}
The GetWheelChange() method defines the amount the calendar scrolls when the user rolls the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.
- Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
- Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments
By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.
Returns:
Specifies the amount by which the scroll box position changes when the user rolls the mouse wheel.
- Type
- number
Example
The following statements are equivalent:
oGraph.GetWheelChange() {number}, returns the amount the control scrolls when the user rolls the mouse wheel
oGraph.WheelChange {number}, returns the amount the control scrolls when the user rolls the mouse wheel
where oGraph is an instance of Graph controlGetXAxis() → {ValueAxisOptions}
The GetXAxis() method gets the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The YAxis property defines the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). For xy-compatible chart types, the XAxis and YAxis properties define the x and y axes, while the ValueAxis and CategoryAxis properties are ignored. The XAxis and YAxis properties can be set to null to use default axes, or to an object of ValueAxisOptions type to define custom configurations for the respective axis.
Returns:
Returns the chart's x-axis as an object of ValueAxisOptions type, which defines the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). If the XAxis property is set to null, it indicates that the chart uses a default x-axis configuration.
- Type
- ValueAxisOptions
Example
The following statements are equivalent:
oGraph.GetXAxis() {ValueAxisOptions}, returns the chart's x-axis
oGraph.XAxis {ValueAxisOptions}, returns the chart's x-axis
where oGraph is an instance of the Graph control.GetYAxis() → {ValueAxisOptions}
The GetYAxis() method gets the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The XAxis property defines the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). For xy-compatible chart types, the XAxis and YAxis properties define the x and y axes, while the ValueAxis and CategoryAxis properties are ignored. The XAxis and YAxis properties can be set to null to use default axes, or to an object of ValueAxisOptions type to define custom configurations for the respective axis.
Returns:
Returns the chart's y-ayis, as an object of ValueAxisOptions type which defines the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). If the YAxis property is set to null, it indicates that the chart uses a default y-axis configuration.
- Type
- ValueAxisOptions
Example
The following statements are equivalent:
oGraph.GetYAxis() {ValueAxisOptions}, returns the chart's y-axis
oGraph.YAxis {ValueAxisOptions}, returns the chart's y-axis
where oGraph is an instance of the Graph control.GetZoom() → {number}
The GetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
- Type
- number
Example
The following statements are equivalent:
oGraph.GetZoom() {number}, gets the current zoom factor of the control's content
oGraph.Zoom {number}, gets the current zoom factor of the control's content
where oGraph is an instance of Graph control.GetZoomLevels() → {string}
The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
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
Example
The following statements are equivalent:
oGraph.GetZoomLevels() {string}, gets the zoom-levels the control's content is allowed to magnify, as a string of comma-separated values
oGraph.ZoomLevels {string}, gets the zoom-levels the control's content is allowed to magnify, as a string of comma-separated values
where oGraph is an instance of Graph control.Home()
The Home() method zooms to 100% and scrolls the control to origin (0,0). The Home() method is used when the control has no series/layout, or to reset the zoom/scroll to its default values. The Zoom property defines the zoom factor of the control's content. The ScrollPos property defines the scroll position of the control's content. The Scroll method scrolls the view based on the giving key. The onscroll event notifies your application once the view has been scrolled.
Example
The following statements are equivalent:
oGraph.oGV.Home(), zooms to 100% and scrolls the control to origin (0,0)
oGraph.Home(), zooms to 100% and scrolls the control to origin (0,0)
where oGraph is an instance of Graph controlScroll(key, countopt)
The Scroll() method scrolls the view based on the giving key. The ScrollPos property can be set to null to indicate that the control's content is not scrolled, or to an object of type {x, y} to define the horizontal and vertical scroll position. Setting the x property of ScrollPos to a value (for example, 100) scrolls the control's content horizontally to that position, while setting the y property scrolls the content vertically. This allows you to control the initial scroll position of the control's content, which can be useful for focusing on specific areas of a large chart or graph when it is first displayed. The onscroll event notifies your application once the view has been scrolled.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
key |
string | Specifies a key to determines the direction to scroll the view as follows:
|
|
count |
object |
<optional> |
indicates the number of lines to scroll if key is "Up", "Down", "Left" or "Right" |
Example
oGraph.Scroll("Home") {string}, scrolls to the left/top of the control
oGraph.Scroll("End") {string}, scrolls to the right/end of the controlSetAllowActions(value)
The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.
Parameters:
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
value |
string | Indicates the actions the user can perform once the control is clicked or touched.
The format of the property is: "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."where
|
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 event's button or modifier-keys is pressed.
"move-value(LButton),scroll" {string}, specifies that the "move-value" action is allowed when the user left-clicks and drags a value. Otherwise, dragging performs a scroll operationSetAllowDrop(value)
The SetAllowDrop() method defines whether users can drag and drop local files into the control. The control supports importing data from local files by dragging and dropping them directly onto it. Setting AllowDrop to true enables this functionality, allowing users to easily load data from local files for visualization. When AllowDrop is set to false, drag-and-drop support for local files is disabled, preventing users from importing data in this way. This can be useful when data input must be restricted to specific sources or formats. The Data property or the Import method can be used to load data from various sources, including local files, URLs, or directly from JavaScript objects and arrays.
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 controlSetAllowStack(value)
The SetAllowStack() method specifies whether series are stacked according to the non-empty values defined in the Serie.Stack property. When AllowStack is true, series that share the same non-empty Stack value are visually stacked, combining their values to display a cumulative total. When AllowStack is false, the Stack property is ignored, and all series are displayed independently without stacking, regardless of their Stack values. By default, AllowStack is false, so series are not stacked unless this property is explicitly enabled. This allows for greater flexibility in how data is visualized, as users can choose to stack series to show cumulative values or keep them separate for individual comparison. The Stack property specifies whether a series is stacked, with the same value for multiple series of the same type indicating that they belong to the same stacking group.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | Specifies a boolean value that determines whether stacking is enabled or disabled for the series. When set to true, stacking is enabled; when set to false, stacking is disabled. |
- Since:
- 4.2
Example
false {boolean}, the series' Stack property is ignored, and no series will be stacked, regardless of the Stack property's value.
true {boolean}, the series values are visually stacked on top of each other, provided the not-empty series' Stack property.SetAutoFit(value)
The SetAutoFit() method specifies whether the elements of the series are resized to fit the control's client-area. When AutoFit is set to true, the control automatically resizes the elements of the series to ensure they fit within the visible area of the control, regardless of the amount of data or the size of the control. This can be particularly useful for maintaining readability and visual appeal when dealing with large datasets or when the control is resized. When AutoFit is set to false (default), the elements of the series are displayed at their actual size, which may result in scroll bars appearing if the content exceeds the control's dimensions.
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 contentSetBackground(value)
The SetBackground() method defines the display options to show different parts of the control. The BackgroundOptions object defines the default visual appearance used by the control for chart elements such as series colors, area transparency, and tooltip styling. It allows customizing how series are colored, how area charts blend with the background, and how tooltips appear when interacting with the chart. Setting the Background property to null applies the control's default background options, while providing a BackgroundOptions object allows for specific customization of these visual aspects.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
BackgroundOptions | A value that indicates the display options to show different parts of the control. |
Example
null {null}, uses the control's default background options
{seriesColors: ["red", "green", "blue"], seriesColorsAreaAlpha: 0.25}, {BackgroundOptions}, sets the series colors to red, green, and blue, with an area transparency of 0.25 for area-compatible chart types (for instance, "line" chart-type)SetCategoryAxis(category)
The SetCategoryAxis() method sets the chart's category axes. The category axis is horizontal (oX) for horizontal charts and vertical (oY) for vertical charts, based on the Vertical property of the Serie object. For xy-compatible chart types (scatter, scatterLine, or bubble), the XAxis and YAxis properties define the x and y axes, and the CategoryAxis property is ignored. The CategoryAxis property can be set to null to use a single default category axis, or to an object or an array of CategoryAxisOptions to define one or more category axes with custom configurations.
Parameters:
| Name | Type | Description |
|---|---|---|
category |
CategoryAxisOptions | Array.<CategoryAxisOptions> | Defines the chart's category-axes. |
Example
null {null}, removes the categories of the chart (@since 4.3)
{tfi: "<fgColor 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 blueSetCursor(value)
The SetCursor() method is used to configure the behavior and appearance of the chart's cursor. It allows showing or hiding the cursor, displaying crosshair lines over the X (category) and Y (value) axes, enabling tooltips for nearby series data or axes, controlling specific X and Y line visibility for XY-type charts, and setting the smooth transition time for cursor movement between positions. Essentially, it defines how the cursor interacts with the chart and how information is presented to the user during hover or touch. By default, the Cursor property is hidden.
The Cursor property must be assigned as an object (e.g., Cursor = { visible: true }) rather than setting individual attributes directly (like Cursor.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged, like in the following sample:
Cursor = { visible: true }; Cursor = { showCursorValueLine: false };
After this, the visible field remains true, allowing you to gradually update cursor settings without overwriting the existing configuration.
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. |
Example
{visible: true} {object}, shows the cursor with default options (shows crosshair lines over the X and Y axes, as well as tooltips for nearby series data items and axes)SetCursors(value)
The SetCursors() method assigns or changes the mouse cursors for different parts of the control. These cursors determine the pointer appearance when the user hovers over specific areas, allowing you to provide visual feedback and enhance interactivity for each part of the control. The cursors are defined as a string expression that specifies the cursor to apply on each part of the control, using various formats such as CSS cursor values. By using this method, you can customize the user experience by providing appropriate visual cues for interactive regions of the control. By default, the cursors property is "pointer(anchor,legend)", which means that the pointer cursor is shown when hovering over the "anchor" and "legend" 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 the property is: "cursor(part),cursor(part),..."where:
The "part" can be any of the following:
|
Example
"" {string}, specifies that no mouse cursor is shown when hovering any part of the control
"pointer(anchor,legend)" {string}, specifies that the pointer cursor is shown when hovering the "anchor" and "legend" parts of the controlSetFormatText(value)
The SetFormatText() method sets the format to display the view's invalid label. The FormatText property can be set to null to indicate that the default format is applied, or to a combination of flags defined within the exontrol.DrawTextFormatEnum enumeration to specify the text format. The text format defines the alignment, wrapping, clipping, and other formatting options for the text displayed in the control.
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:
|
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-alignedSetImageAlign(value)
The SetImageAlign() method sets the alignment of the image. The ImageSize property defines the default-size of the images within the control (reserved). Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the ImageAlign property does not affect images inserted with the <img> tag. Currently, the ImageSize and ImageAlign properties are ignored and reserved for future use.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | Defines the alignment of the image as one of the following:
|
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 captionSetImageSize(value)
The SetImageSize() method sets the default-size of the images within the control (reserved). Captions or labels that support ex-HTML formatting can include images using the <img> ex-HTML tag; however, the imageSize field does not affect images inserted with the <img> tag. The <img> tag supports additional size attribute that specifies the picture's size such as "<img>apple:18</img>2002", which indicates that the image named apple has a size of 18. Currently, the ImageSize and ImageAlign properties are ignored and reserved for future use.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
any | Indicates the default-size of the images within the control as explained:
|
Example
null {null}, Indicates that the 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 rectangleSetInvalid(value)
The SetInvalid() method sets the ex-html label displayed by the control when no data is available or when the data is invalid. The Invalid property can be set to null to indicate that no label is shown, or to a string that defines the message displayed while the control has no or invalid data. This option allows you to provide feedback to users when the control cannot display data, improving the user experience by clearly communicating the situation. The Data property or the Import method can be used to load data from various sources, including local files, URLs, or directly from JavaScript objects and arrays. By default, the Invalid property is "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 dataSetLegend(value)
The SetLegend() method sets the configuration options for displaying the view's legend, which allows users to show or hide series at runtime. The legend displays the list of series in the chart and typically includes a color indicator for each series to help users identify and differentiate them. By configuring the Legend property, you can control its visibility, position, layout, and behavior. Clicking a label in the legend shows or hides the corresponding series in the chart, which is useful when multiple series are displayed and users need to identify or control them at runtime. By default, the legend is hidden.
The Legend property must be assigned as an object (for example, Legend = { visible: true }) rather than setting individual attributes directly (like Legend.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged. For example:
Legend = { visible: true };
Legend = { dock: 'top' };
After this, the visible field remains true, allowing you to gradually update legend settings without overwriting the existing configuration.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
LegendOptions | Indicates an object of LegendOptions type that specifies the configuration options to display the view's legend. |
Example
{visible: true} {object}, shows the legend with default options (displays the legend at the right of the view, with vertical layout and one column)SetLocked(value)
The SetLocked() method locks or unlocks the control. The ReadOnly property indicates whether the control is read-only. When the control is locked, the user cannot interact with the chart in any way, including scrolling or modifying data. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. In both cases, the chart's data and series remain protected from changes, but read-only mode allows viewing and exploration, while locked mode prevents all interaction.
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 sets the control's miscellaneous options. The miscellaneous options include various settings that affect the control's behavior and appearance, such as cursor transitions, value size, and other customizable features that do not fall under specific categories like axes or series options. The Misc property can be set to an object of type MiscellaneousOptions to define these settings, or it can be set to null to use the control's default miscellaneous options. Changing the miscellaneous options can impact how the control responds to user interactions and how it displays certain elements, allowing for a more tailored user experience. Any misc option not explicitly set in the value parameter of SetMisc() method is assigned to the control's default value for that option. For instance, if the value parameter does not include the digits option, the control's default value for the digits option is used.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
MiscellaneousOptions | A value that indicates the control's miscellaneous options. |
Example
null {null}, uses the control's default miscellaneous options
{allowValueScroll: true}, enables vertical scrolling of values for area-compatible chart types (for instance, "line" chart-type)SetMultiColorSerie(value)
The SetMultiColorSerie() method determines whether a single data series (single-valid serie) in a chart can use multiple colors for its data points instead of a single uniform color. The seriesColors field defines the default colors used for the chart's series. When MultiColorSerie is set to true, each data point in the series can have a different color, which helps visually distinguish individual values within the same series. When MultiColorSerie is set to false, the entire series is rendered in a single color, determined by the seriesColors field or the specific color settings of the series. By default, MultiColorSerie is true, allowing greater visual differentiation of data points within a series. The seriesColorsDecrease field defines the default colors for the chart's series (when the value goes down). When all colors are used, new colors are pulled from the start again. The seriesColorsAreaAlpha field defines the alpha channel for the default colors of the area-type chart's series.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | Indicates whether a single series' data points use multiple colors for representation. |
- Since:
- 4.2
Example
false {boolean}, the entire serie is rendered in a single color
true {boolean}, each data point in the series can have a different color (useful for distinguishing individual values visually) (default)SetOptions(nOptions, bIncludeAllopt) → {boolean}
The SetOptions() method applies new options to the view. The control's options define its visual aspects such as the colors of the series, the size of the images, and other appearance or behavior-related settings. The Options property can be used to get or set all options of the control at once. Individual options should be changed by assigning a new options object rather than modifying the object returned by Options/GetOptions(). For example, to change the autoFit option use Options = {autoFit: true} instead of Options.autoFit = true.
Each option of the Graph.Options type has a corresponding property of the Graph object, which means that the following statements are equivalent:
oGraph.Options = {autoFit: true}
oGraph.oGV.SetOptions({autoFit: true})
oGraph.AutoFit = true
oGraph.oGV.SetAutoFit(true)
Note: All options of the control are the same for all views. Therefore, when an option is changed using the SetOptions() method of a view, the change applies to all other views of the control as well.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
nOptions |
Graph.Options | 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.SetOrder(value)
The SetOrder() method specifies a custom display order for values or categories using their zero-based indexes, provided as a comma-separated string. Assigning a non-empty value lets you define the position of one, multiple, or all values, while empty entries (,,) preserve positions based on the default order.
The data values in the chart are arranged using the following properties:
- Sort, sorts the series values in ascending or descending order
- reverse (option of CategoryAxisOptions type), reverses the position of values as they were added (if no Sort is applied) or reverses the order produced by the Sort property (if Sort is applied)
- Order, repositions values according to their zero-based indexes in a custom sequence
Applying the Sort property or CategoryAxisOptions.reverse field clears any custom order, leaving the Order property empty. To reset the custom ordering and revert to the original sequence of values or categories as they were added, set the Order property to an empty string or null. This removes any custom ordering and restores the default sequence as defined by the Sort property and CategoryAxisOptions.reverse field.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | Indicates a list of value or category indexes in their displayed order, separated by commas. The index is zero-based, meaning the first value has an index of 0, the second an index of 1, and so on. You can specify the order for one or more values; any values not included in the list will be displayed after the specified values, in their original order. |
- Since:
- 4.9
Example
null {null}, the values or categories are displayed in their original order (default)
"8" {string}, index 8 first (move the index 8 to the first position)
",,8" {string}, index 8 third (move the index 8 to the third position)
"8,,1" {string}, index 8 first, index 1 third (move the index 8 to the first position, and index 1 to the third position)
",,9,,1" {string}, index 9 third, index 1 fifth (move the index 9 to the third position, and index 1 to the fifth position; unspecified positions follow the default order of the other indexes)SetOverview(value)
The SetOverview() method sets the configuration options for displaying the overview, which shows a map of the entire series without a scroll bar. The overview is a small chart that provides a visual summary of the complete data series, allowing users to quickly grasp overall trends and patterns. It is especially useful for large datasets or when the main chart is scrollable, as it helps users navigate the data more efficiently. By configuring the Overview property, you can control its visibility, size, position, and other aspects of its appearance and behavior. By default, the overview is hidden.
The Overview property must be assigned as an object (for example, Overview = { visible: true }) rather than setting individual attributes directly (like Overview.visible = true), because the object is not directly mutable. When you assign a new object, the update is cumulative: only the fields you specify are changed, while previously set options remain unchanged. For example:
Overview = { visible: true };
Overview = { dock: 'bottom' };
After this, the visible field remains true, allowing you to gradually update overview settings without overwriting the existing configuration.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
OverviewOptions | Indicates an object of OverviewOptions type that specifies the configuration options to display the overview. |
Example
{visible: true} {object}, shows the overview with default options (displays the overview at the bottom of the view, with 20% height of the main chart)SetPad(value)
The SetPad() method sets the control's padding or the space between view's content and its borders. The Pad property can be set to null to indicate that the default padding value of [4,4] is applied, or to a value that defines the padding on horizontal and vertical side. The padding can be defined as a single numeric value to pad horizontal and vertical size with the same value, or as a "x,y" string or [x,y] array to specify the padding on horizontal and vertical side respectively.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | Array.<number> | string | Specifies a value that could be:
|
Example
null {null}, indicates that the default padding value of [4,4] is applied
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-pixelsSetReadOnly(value)
The SetReadOnly() method sets the control in read-only mode. The Locked property locks or unlocks the control. When the control is read-only, the user cannot modify the chart or its data, but can still scroll and navigate within the chart area. In read-only mode, the chart's data and series remain protected from changes, but users can view and explore the chart without making modifications.
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 modeSetScrollBarsOrigin(value)
The SetScrollBarsOrigin() method sets the color used to highlight the position of the origin (0,0) on the control's scroll bars. It applies to series of type "scatter", "scatterLine", or "bubble". The Serie.Type property defines the chart type of a series. The ScrollBarsOrigin property can be set to null to hide the origin (0,0) on the scroll bars, or to any CSS color string to display the origin (0,0) in that color. By default, the ScrollBarsOrigin property is "black", so the origin (0,0) is shown on the control's scroll bars in black color.
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 blackSetScrollPos(value)
The SetScrollPos() method scrolls horizontally and/or vertically the control's default view. The ScrollBars property determines whether the control displays horizontal and/or vertical scroll bars. The ScrollPos property can be set to null to indicate that the control's content is not scrolled, or to an object of type {x, y} to define the horizontal and vertical scroll position. Setting the x property of ScrollPos to a value (for example, 100) scrolls the control's content horizontally to that position, while setting the y property scrolls the content vertically. This allows you to control the initial scroll position of the control's content, which can be useful for focusing on specific areas of a large chart or graph when it is first displayed. The Scroll() method scrolls the view based on the giving key. The onscroll event notifies your application once the view has been scrolled.
Parameters:
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
value |
object | Specifies an object of {x,y} type that defines the control's horizontal and vertical scroll-position.
Properties
|
Example
{x: 100}, scrolls the control's content horizontally to the position 100, while keeping the vertical scroll position unchanged.
{y: 50}, scrolls the control's content vertically to the positionSetSerieDef(value)
The SetSerieDef() method defines the default options applied to each newly created series. Existing series are not affected; the defaults apply only to series added afterward. The serieDef object supports all fields defined by the SerieOptions type. This method is useful when you want to establish a consistent configuration across all newly added series without setting the same options individually.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
object | Specifies an object that defines the default options for new series, or null to remove any previously defined defaults. |
- Since:
- 4.9
Example
null {null}, no default options are applied to new series (default).
{stack: "A", showValue: "point,hit"} {object}, indicates that each new series is added to stack “A”, each data value displays its value point, and the tooltip appears when the cursor hovers over the rectangular hit area of the data point (such as columns or bars).SetSerieType(value)
The SetSerieType() method specifies the default representation of data for all series where the Serie.Type property is not explicitly defined. It determines how these series are rendered - such as line, bar, or scatter plot - ensuring consistent visualization across the chart. The Serie.Type property can override this default for individual series, allowing different chart types within the same graph. By default, SerieType is set to "column", so series without a specified type are displayed as column charts.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | Specifies the default representation method for the data in all series where the type property is not explicitly, as one of the following:
|
- Since:
- 4.2
Example
null {null}, shows the data as columns (by default)
"radarCol" {string}, displays data in radial columns starting from one center point. The circle is divided into equal portions depending on the number of columns and each column group occupies one portion (similar with "radarArea" type, data requires array of numbers, non-scrollable)
"pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-scrollable)SetShapes(value)
The SetShapes() method sets or changes the shapes assigned to each part of the control. These shapes determine the visual appearance of the control's elements, such as borders, fills, and other graphical components. Using this method, you can fully customize how each part of the control is drawn and displayed. The shapes are defined as a string expression that specifies the shape to apply on each part of the control, using various formats such as color names, hexadecimal colors, RGB/RGBA/HSL/HSLA color functions, JSON representations of shape objects, or references to predefined shapes within the exontrol library. The Serie.Shape property defines the shape to apply on the data-points of a serie, while the Serie.ValuePointShape property defines the shape to apply on the value-labels of a serie.
Parameters:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
value |
string | Indicates a string expression that defines the shapes each part of the control can display.
The format of the property is: "shape(part),shape(part),..."where:
|
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 controlSetSmooth(value)
The SetSmooth() method sets the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed). The smooth-transition effect is performed when the control changes its layout, such as when resizing the control or changing the number of visible series. Setting smooth to 0 disables the smooth-transition effect, while setting it to a positive number (e.g., 125) enables a smooth transition that lasts for that duration in milliseconds, providing a visually appealing animation as the control updates its layout. By default, the property is set to 125 ms, allowing for a smooth transition effect when the control's layout changes.
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 sets the list of series to be sorted, separated by spaces. The order of series in the Sort property determines the sorting priority, with the first series having the highest priority, the second series the next highest, and so on. The Sort property can be set to null to indicate that no sorting is applied, or to a string expression that specifies which series to sort and their sorting order. The sorting order can be ascending (A) or descending (D), with ascending being the default if not specified. Each element in the Sort property can specify the series by name or index and optionally include an inner index for multi-dimensional arrays, along with the sorting direction.
The data values in the chart are arranged using the following properties:
- Sort, sorts the series values in ascending or descending order
- reverse (option of CategoryAxisOptions type), reverses the position of the values as they were added (if no Sort is applied), or reverses the order produced by the Sort property (if Sort is applied)
- Order, repositions values according to their zero-based indexes in a custom sequence
The custom order is cleared when Sort property or CategoryAxisOptions.reverse field is set, leaving the Order property empty.
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 for the control's captions, allowing precise customization of their appearance by specifying the text style (such as bold or italic), font family, and font size, either as a string (e.g., "b monospace 16") or as an object (e.g., {bold: true, italic: false, fontName: "monospace", fontSize: 16}), and immediately applies these settings to update the displayed captions.
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:
Any other word within the string value that's not recognized as a keyword is interpreted as:
The value as {object} supports any of the following fields:
CSSColor or CSS legal color values can be specified by the following methods:
|
Example
null {null}, the tfi field is ignored
"bold monospace 16 <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 blueSetToolTipDelay(value)
The SetToolTipDelay() method sets the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly across the control. The ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
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 sets the expression used to customize the tooltip displayed when the cursor hovers over value points of the chart. The ShowValue property of the Serie object determines whether value points are displayed on the chart. If the ShowValue property includes the exPoint flag, the tooltip appears when the cursor hovers over value points. The ToolTipFormat property can be set to null to use the default tooltip format, or to a string expression to define a custom format for the tooltip.
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:
|
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 sets the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels. By default, the tooltip remains visible for 5000 milliseconds.
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 secondSetToolTipWidth(value)
The SetToolTipWidth() method sets the width of the tooltip window, in pixels. The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The ToolTipWidth property accepts a number value that specifies the width of the tooltip window, in pixels. The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipPopDelay property gets or sets 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 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 pixelsSetValueAxis(value)
The SetValueAxis() method sets the chart's value axes. Unreferenced value axes display the data using the default value axis. The Axis property of the Serie object specifies the name of the value axis used by a series. The value axis represents the vertical axis (oY) for horizontal charts and the horizontal axis (oX) for vertical charts. The Vertical property of the Serie object specifies whether the chart is displayed vertically or horizontally. For xy-compatible chart types (scatter, scatterLine, or bubble), the XAxis and YAxis properties define the configuration of the horizontal and vertical axes, and the ValueAxis property is ignored. The ValueAxis property can be set to null to indicate that the chart uses a single default value axis, or to an object or an array of ValueAxisOptions to define one or more value axes with custom configurations.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
ValueAxisOptions | Array.<ValueAxisOptions> | Indicates the chart's value axes as a ValueAxisOptions or an array of ValueAxisOptions, depending on how they are defined. Setting this parameter to null indicates that the chart uses a single default value axis. Providing a ValueAxisOptions object defines a single value axis with custom configurations, while providing an array of ValueAxisOptions objects allows for defining multiple value axes with their own configurations. |
Example
null {null}, the chart displays and uses a single value-axis
{tfi: "<fgColor 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 of a column or bar in the chart, representing the width for horizontal charts or the height for vertical charts. It does not apply to chart types such as radarArea, radarLine, radarColumn, polarArea, polarLine, polarScatter, or pie, where element sizing is determined by the layout. The AutoFit property determines whether the control automatically resizes series elements to fit the available space. If AutoFit is true, elements are adjusted to prevent overlap and ensure readability. If false, elements retain their original size, which may cause overlap or truncation when data values are large or there are many series.
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-pixelsSetWheelChange(value)
The SetWheelChange() method changes the amount the calendar scrolls when the user rolls the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.
- Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
- Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments
By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.
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 sets the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The YAxis property defines the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). For xy-compatible chart types, the XAxis and YAxis properties define the x and y axes, while the ValueAxis and CategoryAxis properties are ignored. The XAxis and YAxis properties can be set to null to use default axes, or to an object of ValueAxisOptions type to define custom configurations for the respective axis.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
ValueAxisOptions | Indicates the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The value can be set to null to indicate that the chart should use a default x-axis configuration, or it can be set to an object of ValueAxisOptions type to define specific settings for the x-axis, such as color, min/max values, major unit intervals, and other visual or functional properties. |
Example
null {null}, the chart displays the default x-axis
{tfi: "<fgColor red>"} {ValueAxisOptions}, shows the x-axis in red
{min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for x-axisSetYAxis(value)
The SetYAxis() method sets the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The XAxis property defines the configuration options for the x-axis of xy-compatible chart types (scatter, scatterLine, or bubble). For xy-compatible chart types, the XAxis and YAxis properties define the x and y axes, while the ValueAxis and CategoryAxis properties are ignored. The XAxis and YAxis properties can be set to null to use default axes, or to an object of ValueAxisOptions type to define custom configurations for the respective axis.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
ValueAxisOptions | Indicates the configuration options for the y-axis of xy-compatible chart types (scatter, scatterLine, or bubble). The value can be set to null to indicate that the chart should use a default y-axis configuration, or it can be set to an object of ValueAxisOptions type to define specific settings for the y-axis, such as color, min/max values, major unit intervals, and other visual or functional properties. |
Example
null {null}, the chart displays the default y-ayis
{tfi: "<fgColor red>"} {ValueAxisOptions}, shows the y-ayis in red
{min: -100, may: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, may and major intervals for y-ayisSetZoom(value)
The SetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
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 magnified to 150%SetZoomLevels(value)
The SetZoomLevels() method defines the zoomLevels factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
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 makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The smooth-transition goes from the current layout to the new layout generated by the callback. The Graph.Options.smooth field defines the time in ms the control goes from one layout to another. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.
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:
|
thisArg |
any | defines the value of "this" keyword during cbkI, cbkR or cbkT callbacks. |
Example
oGraph.Smooth(function()
{
// performs multiple changes to the control, such as removing or adding new values to the serie
})ValueAutoFit()
The ValueAutoFit() method adjusts the column/bar size so that the entire chart fits within the client rectangle. The method computes the ValueSize property so "total" is fully covered by a specified "count" of categories. The "total" size to cover is determined by the chart's dimensions and layout, while the "count" of categories is based on the number of categories currently displayed in the chart. The method takes into account the margins and padding between values to ensure that the columns/bars are sized appropriately to fit within the available space without overlapping or leaving excessive gaps. The ValueAutoFit() method is particularly useful when the chart's data or dimensions change dynamically, allowing the chart to automatically adjust the size of its elements for optimal display. The AutoFit property determines whether the control automatically resizes series elements to fit the available space. If AutoFit is true, elements are adjusted to prevent overlap and ensure readability. If false, elements retain their original size, which may cause overlap or truncation when data values are large or there are many series.
Example
The following statements are equivalent:
oGraph.oGV.ValueAutoFit(), adjusts the column/bar size to fit the chart's dimensions and layout
oGraph.ValueAutoFit(), adjusts the column/bar size to fit the chart's dimensions and layout
where oGraph is an instance of the Graph control.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). The onclick event occurs when the user clicks any part of the control, while the onanchorclick event occurs only when the user clicks an anchor element. An anchor element is defined by the <a id;options> ex-HTML part, where id is an optional identifier of the anchor (could be null), and options is an optional string that specifies options for the anchor (could be null). The onanchorclick event provides information about the anchor being clicked, such as its identifier and options.
Parameters:
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
oEvent |
object | Holds information about anchor being clicked.
Properties
|
Example
The following samples display information about the element being clicked:
oGraph.Listeners.Add("onanchorclick", function (oEvent)
{
console.log(oEvent);
})
or
oGraph.on("anchorclick", 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 event occurs once the user clicks or double-clicks the control. The onclick event provides information about the click, such as the view where the click occurred, whether it is a click or double-click, which button is pressed, and which modifier keys are pressed. Additionally, if the click occurs over a serie, the event provides detailed information about the serie being clicked, such as its value, inner-values (e.g., Open, Close for candleStick types, or Min, Max for rangeColumn types), percent of the current value relative to all values, the serie itself, and the index of the category the value belongs to.
Parameters:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
oEvent |
object | specifies an object of {dblClick,button,modifiers,..} type, that holds information about the object being clicked.
Properties
|
Example
The following samples display information about the serie being clicked:
oGraph.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
})
or
oGraph.on("click", 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.onmovevalue
The onmovevalue event occurs when the user completes a drag-and-drop operation by releasing (dropping) a value, series, or data point to a new position. The event is fired after the related properties are updated to reflect the new arrangement.
The event is triggered only if the allowActions property includes the "move-value" action. Depending on the flags of the "move-value" action, the event occurs as follows:
- When the [disableMoveCategory] flag is not included, dropping a value reorders categories and updates the Order property.
- When the [enableMoveSerie] flag is included, dropping a value reorders entire series and updates the Position property.
- When the [enableMoveData] flag is included, dropping a value reorders data points within a series and updates the Data property.
- Since:
- 4.9
Example
The following samples demonstrate different ways to implement the onmovevalue event:
oGraph.Listeners.Add("onmovevalue", function ()
{
console.log("onmovevalue");
})
or
oGraph.on("movevalue", function ()a
{
console.log("onmovevalue");
})
or
oGraph.oGV.onmovevalue = function ()
{
* console.log("onmovevalue");
}
where oGraph is an object of GV typeonscroll
The onscroll event notifies your application once the view has been scrolled. The ScrollPos property defines the scroll position of the control's content. The Scroll method scrolls the view based on the giving key. The value parameter of the onscroll event indicates the scroll's value, while the type parameter indicates whether the scroll is vertical or horizontal. The view parameter indicates the view that has been scrolled (in case of multiple views).
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
|
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.on("scroll", 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.