/* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.Graph) // // The exontrol.Graph class provides the following fields (public): // // Listeners {object}, holds a reference to exontrol.Lts which defines the series of the control. // Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control. // // The exontrol.Graph class provides the following methods (public): // // BeginUpdate(), prevents invalidating the control until the EndUpdate() method is called // EndUpdate(), resumes invalidating the control // Refresh(), refreshes the control // Update(callback, thisArg), locks the control's update during the callback, and invalidates the control once the method ends. // Smooth(callback, thisArg), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback. // Home(), zooms to 100% and scrolls the control to origin (0,0) // Soom(zoomTo, oPointAbs), zooms or/and scrolls the control's content. // FitToClient(rtLayout), ensures that the entire (null/undefined) or giving layout fits the control's client area // EnsureVisibleClient(clientA[, ensureOpts]), ensures that the giving client fits the control's client area. // AddGraphView(name,attributes) {GV}, creates a new view to display the series // RemoveGraphView(name), removes the view already created by the AddGraphView() method // GraphView(name) {GV}, gets the graph-view by name (which was previously created by the AddGraphView() method) // Series/GetSeries() {exontrol.Graph.Serie}, returns the control's series. // Serie(id) {exontrol.Graph.Serie}, returns the serie based on its index or identifier. // Scroll(key), scrolls the view based on the giving key // Layout/GetLayout()/SetLayout(value) {string}, saves or loads the control's UI layout // Statistics/GetStatistics() {string}, gives statistics data of objects being hold by the control // Import(source, importOpts), imports data from CSV format // // Options/GetOptions()/SetOptions(value) {object}, specifies the options of the exontrol.Graph control // Tfi/GetTfi()/SetTfi(value), specifies an object of {bold,italic,...}/exontrol.TFI type that defines font attributes to display the captions within the control. // Locked/GetLocked()/SetLocked(value) {boolean}, specifies whether the control is locked(protected) or unlocked // ReadOnly/GetReadOnly()/SetReadOnly(value) {boolean}, specifies whether the control is read-only // WheelChange/GetWheelChange()/SetWheelChange(value) {number}, defines the amount the control scrolls when the user rolls the mouse wheel. // GetSmooth()/SetSmooth(value), defines the time in ms the control goes from one layout to another. // Zoom/GetZoom()/SetZoom(value), defines the zoom factor of the control's content. // ZoomLevels/GetZoomLevels()/SetZoomLevels(value), defines the zoom-levels the user can magnify the control's content // ScrollBarsOrigin/GetScrollBarsOrigin()/SetScrollBarsOrigin(value) {any}, defines the color to highlight the position of the origin (0,0) on the control's scroll bars // FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the global format to display the view's invalid label. // Invalid/GetInvalid()/SetInvalid(value) {string}, specifies the label the control is displaying while no or invalid data. // Pad/GetPad()/SetPad(value) {(number|number[]|string)}, specifies the space between view's content and its borders. // ImageSize/GetImageSize()/SetImageSize(value) {any}, defines the global size of the serie's image. The image can be added using the exontrol.HTMLPicture.Add() method // ImageAlign/GetImageAlign()/SetImageAlign(value) {number}, defines the global-alignment of the serie's image relative to its caption. // Shapes/GetShapes()/SetShapes(value) {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // Cursors/GetCursors()/SetCursors(value) {string}, defines the mouse cursor to display when pointing over different parts of the control. // AllowActions/GetAllowActions()/SetAllowActions(value) {string}, customizes the actions the user can perform once the control is clicked or touched. // ScrollPos/GetScrollPos()/SetScrollPos(value) {object}, scrolls horizontally and/or vertically the control's default view // ToolTipDelay/GetToolTipDelay()/SetToolTipDelay(value) {number}, specifies how long the mouse pointer must point to an object before the tool tip appears // ToolTipPopDelay/GetToolTipPopDelay()/SetToolTipPopDelay(value) {number}, specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control // ToolTipWidth/GetToolTipWidth()/SetToolTipWidth(value) {number}, specifies the width of the control's tooltip // AllowDrop/GetAllowDrop()/SetAllowDrop(value) {boolean}, specifies whether the user can drag and drop local files into the control // Data/SetData(value) {any}, loads the control's data from CSV files // Misc/GetMisc()/SetMisc(value) {MiscellaneousOptions}, defines the control's miscellaneous options // Background/GetBackground()/SetBackground(value) {BackgroundOptions}, defines the display options to show different parts of the control // Series/GetSeries()/SetSeries(value) {Series}, defines the series of data to display // AutoFit/GetAutoFit()/SetAutoFit(value) {boolean}, resizes the elements of the series to fit the control's client area // ValueAxis/GetValueAxis()/SetValueAxis(value) {(ValueAxisOptions|ValueAxisOptions[])}, defines the chart's value axes (oY) // CategoryAxis/GetCategoryAxis()/SetCategoryAxis(value) {(CategoryAxisOptions|CategoryAxisOptions[])}, defines the chart's category axes (oX) // XAxis/GetXAxis()/SetXAxis(value) {ValueAxisOptions}, defines the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble") // YAxis/GetYAxis()/SetYAxis(value) {ValueAxisOptions}, defines the configuration-options for y-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble") // ToolTipFormat/GetToolTipFormat()/SetToolTipFormat(value) {string}, specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart) // ValueSize/GetValueSize()/SetValueSize(value) {number}, specifies the size to show a column or a bar within the chart // ValueAutoFit(), changes the column/bar's size to the entire charts fits the client-rectangle // Cursor/GetCursor()/SetCursor(value) {CursorOptions}, holds 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 // Legend/GetLegend()/SetLegend(value) {LegendOptions}, specifies the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime) // Sort/GetSort()/SetSort(value) {string}, specifies the series to be sorted, separated by spaces // Overview/GetOverview()/SetOverview(value) {OverviewOptions}, specifies the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar) // // The exontrol.Graph class provides the following series (through Listeners): // "onclick", occurs once the user clicks or double-clicks the control. The onclick's parameter is: // // // oEvent {object}, specifies an object of {dblClick,button,modifiers,..} type, that holds information about the object being clicked // // oEvent.view {object}, indicates an object of exontrol.Graph.GV, ... type that specifies the view/window where the click occurred // oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the serie // oEvent.button {number}, indicates which button is pressed while clicking the serie as 1 (left), 2 (right) or 4 (middle) // oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys // // "onanchorclick", occurs once the user clicks an anchor element (the ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is: // // oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked. // // oEvent.id {string}, specifies null or the identifier of the anchor being clicked // oEvent.options {string}, specifies null or the options of the anchor being clicked // // "onscroll", notifies your application once the control's view is scrolled. The onscroll's parameter is: // // oEvent {object}, specifies an object of {view,type,value} type, that holds information about the view's scroll that has been changed as explained: // // oEvent.view {object}, specifies the view, where the scroll occurs // oEvent.type {exontrol.SB.ModeEnum}, specifies the view's scroll that has changed as 0(vertical), 1(horizontal) // oEvent.value {number}, specifies the scroll's value // // "onload", notifies your application once the control loads/imports data. The onload has no parameters. // "onerror", notifies your application once the control encountered an error // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Graph) // // The exontrol.Def.Graph namespace provides definitions for different objects, primitives, objects of exontrol.Graph object // // The exontrol.Def.Graph namespace provides the following fields: // // scrollBars {exontrol.ScrollBarsEnum}, determines whether the control has horizontal and/or vertical scroll bars // scrollBarsOrigin {string}, specifies the color to highlight the position of the origin (0,0) on the control's scroll bars. // tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // locked {boolean}, indicates whether the control is locked(protected) or unlocked // readOnly {boolean}, indicates whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // smooth {number}, defines the time in ms the control goes from one layout to another. // shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control. // zoom {number}, defines the zoom factor of the control's content. The zoomLevels field defines the levels of the zoom-factor the control is allowed to magnify. // zoomLevels {string}, defines the zoom-levels the user can magnify the control's content // pad {(number|string|array)}, defines the chart's padding (space between the chart's content and its border) // formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the view's invalid label // invalid {string}, specifies the label the control is displaying while no or invalid data // imageSize {(null|number|array)}, defines the size of the serie's image (reserved). // imageAlign {number}, defines the alignment of the image within the serie (reserved). // allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control. // scrollPos {object}, defines the horizontal and vertical scroll-position of the control's default view, as an object of {x,y} type // toolTipDelay {number}, specifies how long the mouse pointer must point to an object before the tool tip appears // toolTipPopDelay {number}, specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control // toolTipWidth {number}, indicates the width of the control's tooltip // allowDrop {boolean}, specifies whether the user can drag and drop local files into the control // data {any}, defines the source the control imports data from // misc {MiscellaneousOptions}, holds the control's miscellaneous options // background {BackgroundOptions}, defines display options to show different parts of the control // series {(object|SerieOptions|object[]|SerieOptions[])}, defines the series of data the chart displays, as an object (or an array of) of {category: value} or SerieOptions type // autoFit {boolean}, specifies whether the control resizes the elements of the series to fit the control's content // valueAxis {(ValueAxisOptions|ValueAxisOptions[])}, defines the chart's value axes (oY) // categoryAxis {(CategoryAxisOptions|CategoryAxisOptions[])}, defines the chart's category axes (oX) // xAxis {ValueAxisOptions}, defines the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble") // yAxis {ValueAxisOptions}, defines the configuration-options for y-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble") // toolTipFormat {string}, specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart) // valueSize {number}, specifies the size to show a column or a bar within the chart // cursor {CursorOptions}, holds 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 // legend {LegendOptions}, specifies the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime) // sort {string}, specifies the series to be sorted, separated by spaces // overview {OverviewOptions}, specifies the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar) // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.Graph namespace provides definitions for different objects, primitives, objects of exontrol.Graph object */ exontrol.Def.Graph = { /** * @description The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. A combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars. * * The exontrol.ScrollBarsEnum type defines the following flags: * * exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed) * exHorizontal (1), specifies that only horizontal scroll bars is shown * exVertical (2), specifies that only vertical scroll bars is shown * exBoth (3), specifies that both horizontal and vertical scroll bars are shown * exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary * exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary * exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary * exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end * exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end * exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end * exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when cursor hovers the window. Also, the control's client area is extended on the scroll bars portion * exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized * exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed) * * @type {exontrol.ScrollBarsEnum} * @example * * 0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed * 15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible * 12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control */ scrollBars: exontrol.ScrollBarsEnum.exBoth, /** * @description The scrollBarsOrigin field specifies the color to highlight the position of the origin (0,0) on the control's scroll bars. * @type {string} Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color * @example * * null {null}, hides the origin (0,0) on the control's scroll bar * "black" {string}, shows the origin (0,0) on the control's scroll bar in black */ scrollBarsOrigin: "black", /** * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of tag) * * Any other word within the tfi field that's not recognized as a keyword is interpreted as: * * name of the font (not a number), specifies the font's family (equivalent of tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of 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 tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null, /** * @description The locked field indicates whether the control is locked(protected) or unlocked * @type {boolean} * @example * * false {boolean}, unlocks the control (can select any serie) * true {boolean}, locks the control (can't select any serie) */ locked: false, /** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the control is not read-only * true {boolean}, the control is in read-only mode */ readOnly: false, /** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} * @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) */ wheelChange: 18, /** * @description The smooth field defines the time in ms the control goes from one layout to another. * @type {number} * @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. */ smooth: 125, /** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. A string expression that defines the shapes each part of the control can display. * * The format of shapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the shape to apply on the UI part as one of the following: * * any of 140 color names any browser supports (such as red, blue, green, ...) * hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background) * hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background) * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background) * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background) * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background) * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background) * a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}') * specifies the name of the field within the exontrol.Shapes.Graph object (while it starts with a lowercase letter, such as shserie which refers to exontrol.Shapes.Graph.shserie shape) * specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape) * * "part", defines the name of the part the shape is applied on (as defined below) * * The shapes property supports any of the following parts: * * "valuePoint", defines the visual-appearance for value-points. The shape supports additional fields as follows: * * size {number}, specifies the size of the value-point * * "valueLine", defines the visual-appearance for value-lines (the guided line from the value-point to the value itself). The shape supports additional fields as follows: * * length {number}, indicates the horizontal distance between the middle and end points of the value-line * * "valueBack", defines the visual-appearance to apply on the value's background * "radarLine", specifies the visual-appearance to show the "radarLine" serie-types * "radarArea", specifies the visual-appearance to show the "radarArea" serie-types * "radarColumn", specifies the visual-appearance to show the "radarColumn" serie-types * "polarLine", specifies the visual-appearance to show the "polarLine" serie-types * "polarArea", specifies the visual-appearance to show the "polarArea" serie-types * "polarScatter", specifies the visual-appearance to show the "polarScatter" serie-types. The shape supports additional fields as follows: * * size {number}, specifies the size of the data-point on the chart * * "pie", specifies the visual-appearance to show the "pie" serie-types * "scatter", specifies the visual-appearance to show the "scatter" serie-types. The shape supports additional fields as follows: * * size {number}, specifies the size of the data-point on the chart * * "scatterLine", specifies the visual-appearance to show the "scatterLine" serie-types * "scatterArea", specifies the visual-appearance to show the "scatterArea" serie-types * "bubble", specifies the visual-appearance to show the "bubble" serie-types. The shape supports additional fields as follows: * * size {number}, specifies the maximum-size of the data-point on the chart * * "line", specifies the visual-appearance to show the "line" serie-types * "area", specifies the visual-appearance to show the "area" serie-types * "column", specifies the visual-appearance to show the "column" serie-types * "waterFall", specifies the visual-appearance to show the "waterFall" serie-types. The shape supports additional fields as follows: * * lineSize {number}, defines size of to draw the lines between columns * * "rangeColumn", specifies the visual-appearance to show the "rangeColumn" serie-types * "rangeArea", specifies the visual-appearance to show the "rangeArea" serie-types * "candleStick", specifies the visual-appearance to show the "candleStick" serie-types. The shape supports additional fields as follows: * * size {number}, specifies the size of the stick * hollow {boolean}, indicates whether the hollow candlestick representation is displayed (hollow candle means that its closing value is higher (or equal) than opening value of the same period) * * "ohlc", specifies the visual-appearance to show the "ohlc" serie-types. The shape supports additional fields as follows: * * 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) * * "cursorLine", defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area (showCursorCategoryLine or showCursorValueLine) * "cursorCategoryAxisTooltip", defines the visual-appearance to show the tooltip on the category-axes, when the crosshair hovers the category-unit * "cursorValueAxisTooltip", defines the visual-appearance to show the tooltip on the value-axes, when the crosshair hovers the value-unit * "cursorXAxisTooltip", defines the visual-appearance to show the tooltip on the x-axes, when the crosshair hovers the value-unit (available for xy-chart types) * "cursorYAxisTooltip", defines the visual-appearance to show the tooltip on the y-axes, when the crosshair hovers the value-unit (available for xy-chart types) * "cursorSerieTooltip", defines the visual-appearance to show the tooltip when the crosshair cursor hovers the charts of the series * "legendSymbol", defines the visual-appearance of the symbols of the visible-series within the map legend * "legendSymbolHidden", defines the visual-appearance of the symbols of the hidden-series within the map legend * "legendLabel", defines the visual-appearance of the labels of the visible-series within the map legend * "legendLabelHidden", defines the visual-appearance of the labels of the hidden-series within the map legend * "legendUnit", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the visible-series within the map legend * "legendUnitHidden", defines the visual-appearance of the legend-unit (the client-rectangle that covers the symbol and label of the legend-object) of the hidden-series within the map legend * "select-overview", defines the visual-appearance to display the overview-selection * "selectout-overview", defines the visual-appearance to display the left/right parts outside of the overview-selection * "select-overview-resize", defines the visual-appearance to display left/right resize-margins of the overview-selection * "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag * * @type {string} * @example * * null {null}, specifies the default visual appearance * "" {string}, no shape (no visual appearance is applied to any part of the control) * '{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(valuePoint)' {string}, shows the value-point in white on a black-background, while the cursor hovers it * "xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.Graph.xxx combined with exontrol.Shapes.Graph.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Graph.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Graph.zzz object defines the visual appearance of "y" part of the control */ shapes: "shvaluePoint(valuePoint),shvalueLine(valueLine),shvalueBack(valueBack),shradarLine(radarLine),shradarArea(radarArea),shradarColumn(radarColumn),shpolarLine(polarLine),shpolarArea(polarArea),shpolarScatter(polarScatter),shpie(pie),shscatter(scatter),shbubble(bubble),shscatterLine(scatterLine),shscatterArea(scatterArea),shline(line),sharea(area),shcolumn(column),shwaterFall(waterFall),shrangeColumn(rangeColumn),shrangeArea(rangeArea),shcandleStick(candleStick),shohlc(ohlc),shcursorLine(cursorLine),shcursorAxisTooltip(cursorCategoryAxisTooltip,cursorValueAxisTooltip,cursorXAxisTooltip,cursorYAxisTooltip),shcursorSerieTooltip(cursorSerieTooltip),shlegendSymbol(legendSymbol),shlegendSymbolHidden(legendSymbolHidden),shlegendLabel(legendLabel),shlegendLabelHidden(legendLabelHidden),FrameSel(select-overview),shrect(select-overview),FrameFit(frameFit)", /** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. Specifies the mouse cursor to be displayed when pointing over a part of the control. * * The format of cursors property is: * * "cursor(part),cursor(part),..." * * where: * * "cursor", defines the CSS mouse cursor to display while cursor hovers the part * "part", defines the name of the part the cursor is applied on (as defined below) * * The cursors property supports any of the following parts: * * "valuePoint", defines the mouse-cursor when the mouse pointer hovers the value-point * "legend", defines the mouse-cursor when the mouse pointer hovers an object of the legend * "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the ex-HTML part marks an anchor or hyperlink element) * "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field) * * @type {string} * @example * * "pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control */ cursors: "pointer(anchor,legend)", /** * @description The zoom field defines the zoom factor of the control's content. The zoomLevels field defines the levels of the zoom-factor the control is allowed to magnify. Indicates the content's zoom factor in percent. The zoom field can be any value between 10 (10%) and 1000 (1000%). * @type {number} * @example * * null {null}, Specifies normal-view (100%) * 150 {number}, Indicates that the control's content is magnfied to 150% */ zoom: 100, /** * @description The zoomLevels field defines the zoom-levels the user can magnify the control's content. 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 * * null {null}, Specifies that the control's zoom factor is always 100% * 150 {number}, Specifies that the control's zoom factor is always 150% * "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% */ zoomLevels: "25,50,75,100,110,125,150,175,200,250,300,400,500", /** * @description The formatText field specifies the format to display the view's invalid label. * * 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 * * 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 caption right/bottom-aligned */ formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordEllipsis, /** * @description The invalid field specifies the label the control is displaying while no or invalid data. * @type {string} * @example * * null {null}, no label is displayed * "no or invalid data" {number}, defines a label to be shown while the control has no or invalid data */ invalid: "no or invalid data", /** * @description The pad field defines the chart's padding (space between the chart's content and its border). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size. * @type {(number|string|array)} * @example * * null {null}, indicates that the default-padding field is used ([4,4]) * 0 {number}, indicates no padding * "8,4" {string}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels * [8,4] {array}, increases the serie's width with 2 * 8-pixels and serie's height with 2 * 4-pixels */ pad: [4,4], /** * @description The imageSize field defines the size of the serie's image (reserved). * * The imageSize could be of one of the following types: * * {null}, Indicates that the serie's image is displayed as it is (full-sized). * {number}, Specifies that the serie's image is displayed into a square of giving size (same width and height). If 0 the serie displays no image, if negative the serie's image is stretched to giving square, else the serie's picture is scaled to fit the giving rectangle. * {array}, 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 {(null|number|array)} * @example * * null {null}, Indicates that the serie's image is displayed as it is (full-sized). * 0 {number}, no image is displayed * 64 {number}, the image is scaled to fit a 64 x 64 rectangle * -64 {number}, the image is strected to a 64 x 64 rectangle * [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client * [-32,-64] {array}, stretches the image to a 32 x 64 rectangle */ imageSize: 18, /** * @description The imageAlign field defines the alignment of the image within the serie (reserved). * * The imageAlign propery can be any of the following: * * 0, the image is on the left of the serie's caption * 1, the image is on the right of the serie's caption * 2, the image is on the top of the serie's caption * 3, the image is on the bottom of the serie's caption * * @type {number} * @example * * null {null}, the image is aligned left to the caption (default) * 1 {number}, the image is displayed to the right of the serie's caption */ imageAlign: 0, /** * @description The allowActions field customizes the actions the user can perform once the user clicks or touches the control. * * The format of allowActions field is: * * "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..." * * where * * "action", indicates the name of the action. The "action" can have any of the following values: * * "scroll", scrolls the control's content by drag. The "scroll" action allows flags such as: * [view], specifies that the "scroll" is possible once the user clicks the view * [legend], specifies that the "scroll" is possible once the user clicks the legend * "zoom", zooms the control's content at dragging-point * "fit", fits the drag-area into the control's client area. The "fit" action allows flags such as: * [zoom], specifies that the "fit" action magnifies the chart instead resizing it * "value-resize", resizes the column/bar's size for area-compatible chart types (not available if autoFit property is true) * "overview-selection-resize", resizes the graph using the left/right margins of the overview-selection * * "shortcut", defines the serie's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values: * * "Shift", indicates that the SHIFT key is pressed * "Ctrl" or "Control", indicates that the CTRL key is pressed * "Alt" or "Menu", indicates that the ALT key is pressed * "Meta" , indicates that the META key is pressed * "LButton", specifies that the mouse's left-button is pressed * "RButton", specifies that the mouse's right-button is pressed * "MButton", specifies that the mouse's middle/wheel-button is pressed * "Long", specifies that the action requires a "long" click or touch before it begins * "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit") * "+", indicates AND between values * * @type {string} * @example * * null {null}, indicates the control's default allowActions value * "" {string}, specifies that no operation is allowed once the user clicks or touches the control * "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the serie's button or modifier-keys is pressed. * */ allowActions: "overview-selection-resize,fit(Shift+MButton,Alt+MButton),value-resize(Ctrl+MButton),zoom(MButton),select(Shift,Ctrl),scroll", /** * @description The scrollPos field defines the horizontal and vertical scroll-position of the control's default view. Specifies 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 * * {x: 100} {object}, scrolls horizontally to position 100 * {x: 100, y: 50} {object}, scrolls horizontally to position 100, and vertically to 50 */ scrollPos: { /** * @description The x field defines the horizontal scroll-position of the control's default view. * @type {number} * * @example * * 100 {number}, scrolls horizontally to position 100 * */ x: undefined, /** * @description The y field defines the vertical scroll-position of the control's default view. * @type {number} * * @example * * 50 {number}, scrolls vertical to position 50 * */ y: undefined }, /** * @description The toolTipDelay field specifies how long the mouse pointer must point to an object before the tool tip appears * @type {number} * @example * * 0 {number}, the tooltip is shown "immediately" * 128 {number}, the tooltip is displayed in 128 ms. */ toolTipDelay: 500, /** * @description The toolTipPopDelay field specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control * @type {number} * @example * * 0 {number}, no tooltip is shown for any object (disabled) * -1 {number}, the tooltip stays indefinitely (negative) * 1000 {number}, the tooltip is visible for 1 second */ toolTipPopDelay: 5000, /** * @description The toolTipWidth field indicates the max-width of the control's tooltip (in pixels) * @type {number} * @example * * 0 {number}, no tooltip is shown for any object (disabled) * -1 {number}, the tooltip's content is displayed on a single line (without limit the width of it) * 300 {number}, the tooltip's max-width is 300 pixels */ toolTipWidth: -1, /** * @description The data field defines the source the control imports data from, as one of the following: * * A String expression that specifies the URL to a CSV file (contains no eof, eor or str) * A String expression in CSV format * An object that includes the "files" member of FileList type (a local file) * An array of data to load * * The data source can be used by the Data property of the Serie object and categories option of the CategoryAxis property of the control. * * @type {any} * @example * * "sample.csv" {string}, imports data from sample.csv file */ data: null, /** * @description The allowDrop field specifies whether the user can drag and drop local files into the control. * @type {boolean} * @example * * false {boolean}, no file can be drop into the control (default) * true {boolean}, the user can drag and drop files into the control */ allowDrop: false, /** * @description The misc field holds the control's miscellaneous options, as an object of MiscellaneousOptions type * @type {MiscellaneousOptions} */ misc: { /** * @description The baseMajorUnits field defines the base major-units alternatives (separated by comma) the control uses to calculate the major-unit for the axes * @type {string} * @example * * "1,2.5,5" {string}, specifies that values of 1, 2.5 and 5 or any multiple or subdivision can be a major-unit * "1,5" {string}, specifies that values of 1 and 5 or any multiple (10,50,100,...) or subdivision (0.1,0.5,0.01,...) can be a major-unit * */ baseMajorUnits: "1,2,2.5,5", /** * @description The rangeMajorUnits field defines the inferior and superior limits of the number of major-unit intervals an axis can display * @type {array} * @example * * [5,10] {array}, any count of major-unit intervals between 5 and 10 is accepted * */ rangeMajorUnits: [5,10], /** * @description The digits field specifies the number of digits to appear after the decimal point * @type {number} * @example * * -1 {number}, no conversion is performed * 0 {number}, all numeric-values are displayed as integers * 2 {number}, all numeric-values show up to two-decimals * */ digits: 2, /** * @description The extVisibleBeforeAxis field indicates the minimum portion (as a proportion of major unit, as a numeric-value between 0 and 1) to extend the axis before the first value of the serie (minimum value) * @type {number} * @example * * 0 {number}, specifies that the axis is not extended before the first value of the serie (minimum value) * */ extVisibleBeforeAxis: 0, /** * @description The extVisibleAfterAxis field indicates the minimum portion (as a proportion of major unit, as a numeric-value between 0 and 1) to extend the axis after the last value of the serie (maximum value) * @type {number} * @example * * 0 {number}, specifies that the axis is not extended after the last value of the serie (maximum value) * */ extVisibleAfterAxis: 1/2, /** * @description The categoryAxisSize field specifies the size (height for horizontal axis and width for vertical axis) to display the category-axis (line and ticks) * @type {number} * @example * * 0 {number}, specifies that the line and ticks of the category-axis is not shown at all * 4 {number}, the category-axis line and ticks are shown on a portion of 4-pixels tall * */ categoryAxisSize: 4, /** * @description The categoryAxisPad field specifies the padding for labels and title of the category-axis * @type {number} * @example * * 0 {number}, no padding for for labels and title * 4 {number}, sets a 4-pixels padding * */ categoryAxisPad: 4, /** * @description The valueAxisSize field specifies the size (width for horizontal axis and height for vertical axis) to display the value-axis (line and ticks) * @type {number} * @example * * 0 {number}, specifies that the line and ticks of the value-axis is not shown at all * 4 {number}, the value-axis line and ticks are shown on a portion of 4-pixels wide * */ valueAxisSize: 4, /** * @description The valueAxisPad field specifies the padding for labels and title of the value-axis * @type {number} * @example * * 0 {number}, no padding for for labels and title * 4 {number}, sets a 4-pixels padding * */ valueAxisPad: 4, /** * @description The updateRangeOnScroll field specifies the time in ms to update the chart's minimum and maximum values while user scrolls the chart (0 indicates that the chart's minimum and maximum values are updated only when changing the data) * @type {number} * @example * * 0 {number}, the chart's minimum and maximum values are updated once the data is changed * 64 {number}, the chart's minimum and maximum values are updated in 64 ms after user scrolls the chart * */ updateRangeOnScroll: 128, /** * @description The marginValueRatio field specifies the distance (proportionally with the valueSize property) between the first and last value of the same category and its border * @type {number} * @example * * 0 {number}, no margins are defined * 1/4 {number}, the margin is defined as 1/4 of valueSize * */ marginValueRatio: 1/4, /** * @description The paddingValueRatio field specifies the distance (proportionally with the valueSize property) between two values of the same category * @type {number} * @example * * 0 {number}, no distance between values * 1/8 {number}, the margin is defined as 1/8 of valueSize * */ paddingValueRatio: 1/8, /** * @description The valueAxisFitLabel field ensures that the marginal labels of the value-axis ensure fit the axis's client-rectangle * @type {boolean} * @example * * false {boolean}, no change * true {boolean}, the marginal labels are moved to fit the axis's client-rectangle * */ valueAxisFitLabel: false, /** * @description The radarPolygonal field specifies whether the radar-compatible chart-types (radararea,radarline,radarcolumn) show as polygonal instead of circular * @type {boolean} * @example * * false {boolean}, the circular-compatible charts show elliptical * true {boolean}, the circular-compatible charts show polygonal * */ radarPolygonal: false, /** * @description The circularStartAngle field specifies the angle (in degrees) to start the circular-compatible charts (radial or pie) * @type {number} * @example * * 0 {number}, the circular-compatible charts start horizontally * -90 {number}, the circular-compatible charts start vertically * */ circularStartAngle: -90, /** * @description The radialRotateLabels field specifies whether the radial-labels are rotated around the chart * @type {boolean} * @example * * false {boolean}, the labels are horizontally shown * true {boolean}, the labels are rotated shown * */ radialRotateLabels: true, /** * @description The newLayoutOnVisibleChange field specifies whether the control requests for a new layout once the serie's visible property is changed * @type {boolean} * @example * * false {boolean}, the serie is just hidden, while the minimum-maximum values are kept * true {boolean}, the control computes a new layout once the serie's visible property is changed (requests for new minimum-maximum values) * */ newLayoutOnVisibleChange: true, /** * @description The paddingInsidePie field specifies the padding between rings of the "pie" chart-type (should be zero or a positive value) * @type {number} * @example * * null {null}, specifies that no padding between rings of the "pie" chart-type * 12 {number}, the distance between rings of the "pie" chart-type, is 12 pixels * */ paddingInsidePie: 0, /** * @description The valueDistInnerCircular field specifies the distance from the edge of the inner circle where the values are displayed * @type {number} * @example * * 0 {number}, the values are displayed on the edge of the circle * -18 {number}, values are shown inside the circle near the edge * 18 {number}, values are displayed outside the circle near the edge * */ valueDistInnerCircular: 0, /** * @description The valueDistOuterCircular field specifies the distance from the edge of the outer circle where the values are displayed * @type {number} * @example * * 0 {number}, the values are displayed on the edge of the circle * -18 {number}, values are shown inside the circle near the edge * 18 {number}, values are displayed outside the circle near the edge * */ valueDistOuterCircular: 18, /** * @description The valueLineExt field specifies the distance to extend the value-line by * @type {number} * @example * * null {null}, no effect * 4 {number}, the value-line is extended by 4 pixels * */ valueLineExt: 4, /** * @description The valueLineAddAngle field specifies the additional angle (in degrees) the value-line is rotated by, as explained: * * null {null}, no effect * negative or 0 {number}, if negative or zero all value-lines are rotated by exact angle * positive {number}, if positive the value-lines are rotated additionally by specific angle * * @type {number} * @example * * 0 {number}, shows vertically value-lines (the value is displayed on top) * -180 {number}, shows vertically value-lines (the value is displayed on bottom) * -45 {number}, the value-line is rotated anti-clockwise by 45 degrees * 45 {number}, the value-line is rotated additionally by 45 degrees * */ valueLineAddAngle: null, /** * @description The valueLineUpAngle field specifies the angle (in degrees) the value-line is rotated by, when the values goes up. The valueLineUpAngle/valueLineDownAngle has effect for charts of the following types: * * "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) * * @type {number} * @example * * 0 {number}, shows vertically value-lines (the value is displayed on top) * -180 {number}, shows vertically value-lines (the value is displayed on bottom) * -45 {number}, the value-line is rotated anti-clockwise by 45 degrees * 45 {number}, the value-line is rotated clockwidt by 45 degrees * */ valueLineUpAngle: 45, /** * @description The valueLineDownAngle field specifies the angle (in degrees) the value-line is rotated by, when the values goes down. The valueLineUpAngle/valueLineDownAngle has effect for charts of the following types: * * "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) * * @type {number} * @example * * 0 {number}, shows vertically value-lines (the value is displayed on top) * -180 {number}, shows vertically value-lines (the value is displayed on bottom) * -45 {number}, the value-line is rotated anti-clockwise by 45 degrees * 45 {number}, the value-line is rotated clockwidt by 45 degrees * */ valueLineDownAngle: -135, /** * @description The valueSizeRange field specifies the lower and upper margins of the valueSize property. The valueSize field specifies the size to show a column or a bar within the chart of area-compatible type. The valueSizeRange field can be any of the following type: * * valueSizeRange {number}, specifies the lower limit the valueSize can be * valueSizeRange {array}, specifies a two-elements array of [min,max] type that defines the lower and upper margins of the valueSize. The negative max value indicates no upper limit (no effect) * * @type {(number|array)} * @example * * null {number}, by default, the lower limit the valueSize is 2 * 4 {number}, specifies the lower limit the valueSize can be is 4 * [8,128] {number}, specifies the the valueSize can be between 8 and 128= * */ valueSizeRange: 2, /** * @description The showTicksIf option specifies the category-unit's minimum size so the category-ticks are visible * @type {number} * @example * * null {number}, by default, the showTicksIf is 12 * 8 {number}, category-ticks are visible is the category-unit size is greater than 8 pixels * */ showTicksIf: 12, /** * @description The showGridLinesIf option specifies the category-unit's minimum size so the category grid-lines are visible * @type {number} * @example * * null {number}, by default, the showGridLinesIf is 18 * 8 {number}, category grid-lines are visible is the category-unit size is greater than 8 pixels * */ showGridLinesIf: 18, /** * @description The showLabelsIf option specifies the category-unit's minimum size so the category labels are visible * @type {number} * @example * * null {number}, by default, the showLabelsIf is 24 * 18 {number}, category labels are visible is the category-unit size is greater than 18 pixels * */ showLabelsIf: 24, /** * @description The showValueIf option specifies the category-unit's minimum size so the data-values * @type {number} * @example * * null {number}, by default, the showValueIf is 24 * 18 {number}, data-values are visible is the category-unit size is greater than 18 pixels * */ showValueIf: 24, /** * @description The cursorTrans option defines the transitions (separated by comma) the tooltips of the cursor perform while the pointer hovers the chart * @type {string} * @example * * null {null}, the cursor performs linear, ease-in, ease-out and ease transitions * "" {string}, the cursor performs only linear transitions * "ease" {string}, the cursor performs only ease transitions * */ cursorTrans: "linear,ease-in,ease-out,ease", /** * @description The allowValueScroll option indicates a positive number that defines whether the value-scroll is visible or hidden (valid for area-type charts only). The value-scroll is the vertical-scroll bar for horizontal charts (categories goes horizontally), and horizontal scroll bars for vertical charts (categories goes vertically). By default, the control shows no value-scroll. For instance, the value-scroll could be shown if the control is zoomed. * @type {number} * @example * * 0 {number} or null {null}, the value-scroll is not visible * 1 {number}, the value-scroll is visible once the control's zoom is greater than 100 (the control is zoomed) * 2 {number}, the value-scroll is always visible, as the view uses twice the space of the page to show the values * * @since 3.0 */ allowValueScroll: 0 }, /** * @description The background object defines display options to show different parts of the control. * @type {BackgroundOptions} */ background: { /** * @description The seriesColors field defines the default colors for the chart's 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. Each color can be represented as: * * Color Keywords, such as "red", "green", "blue", ... * RGB, such as "rgb(255,0,0)", "rgb(0,255,0)", "rgb(0,0,255)", ... * RGBA, such as "rgba(255,0,0,0.5)", "rgba(0,255,0,0.5)", "rgba(0,0,255,0.5)", ... * HSL, such as "hsl(240, 100%, 50%)", "hsl(240, 50%, 50%)", "hsl(128, 100%, 50%)", ... * HSLA, such as "hsla(240, 25%, 50%, .5)", ... * Hexadecimal Color Values, such as "#FF0000", "#00FF00", "#0000FF" ... * * @type {(string|string[])} * @example * * null {null}, defines the default colors for the chart's series to "blue,teal,pink,green,yellow,orange,turquoise,purple,brown,olive,violet,lime" * "rgb(255,0,0,0.5),green,#0000ff" {string}, defines the default colors for the chart's series to "partial-transparent red,green,blue" * */ seriesColors: "blue,teal,pink,green,yellow,orange,turquoise,purple,brown,olive,violet,lime", /** * @description The seriesColorsDecrease field defines the default colors for the chart's series (when the value goes down). The seriesColors field defines the default colors for the chart's series. 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. Each color can be represented as: * * Color Keywords, such as "red", "green", "blue", ... * RGB, such as "rgb(255,0,0)", "rgb(0,255,0)", "rgb(0,0,255)", ... * RGBA, such as "rgba(255,0,0,0.5)", "rgba(0,255,0,0.5)", "rgba(0,0,255,0.5)", ... * HSL, such as "hsl(240, 100%, 50%)", "hsl(240, 50%, 50%)", "hsl(128, 100%, 50%)", ... * HSLA, such as "hsla(240, 25%, 50%, .5)", ... * Hexadecimal Color Values, such as "#FF0000", "#00FF00", "#0000FF" ... * * Currently, the seriesColorsDecrease field has effect for the following type of charts: * * "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) * "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) * * @type {(string|string[])} * @example * * null {null}, defines no different color for the chart's series (when the value goes down) * "rgb(255,0,0,0.5),green,#0000ff" {string}, defines the default colors for the chart's series to "partial-transparent red,green,blue" * */ seriesColorsDecrease: "red", /** * @description The seriesColorsAreaAlpha field is responsible for defining the alpha channel for the standard colors used in the area-type chart series. It can either be null or any number between zero (completely transparent) and one (completely opaque). The seriesColorsAreaBlend field defines a different color for area-type charts when the background color is blended with the series default color. The seriesColors field defines the default colors for the chart's series. * @type {(null|number)} * @example * * null {null}, no alpha channel applied on default colors for the chart's series * 0, defines fully transparent colors * 0.5, defines semi-transparent colors * 1, defines fully-opaque colors * */ seriesColorsAreaAlpha: 0.5, /** * @description The seriesColorsAreaBlend field defines a different color for area-type charts when the background color is blended with the series default color. The seriesColorsAreaAlpha field is responsible for defining the alpha channel for the standard colors used in the area-type chart series. It can either be null or any number between zero (completely transparent) and one (completely opaque). The seriesColors field defines the default colors for the chart's series. * @type {(null|string)} * @example * * null {null}, no effect (default) * "white", removes the transparency by combining the white background with the series default color * */ seriesColorsAreaBlend: null, /** * @description The toolTipForeground field specifies the tooltip's foreground color. The toolTipBackground field specifies the tooltip's background color. * @type {string} * @example * * null {null}, the tooltip's foreground is black * "lightgray" {string}, the tooltip's foreground is lightgray * "#D8D8D8" {string}, the tooltip's foreground is #D8D8D8 * */ toolTipForeground: "#D8D8D8", /** * @description The toolTipBackground field specifies the tooltip's background color. The toolTipForeground field specifies the tooltip's foreground color. * @type {string} * @example * * null {null}, the tooltip's background is defined by the color of the serie from the point * "white" {string}, the tooltip's background is white * */ toolTipBackground: null, /** * @description The cursorSerieTooltipBlend field defines the color combination for the series tooltip (when the crosshair cursor hovers the charts of the series), which is combined with the series color. The seriesColorsAreaAlpha field is responsible for defining the alpha channel for the standard colors used in the area-type chart series. It can either be null or any number between zero (completely transparent) and one (completely opaque). The seriesColors field defines the default colors for the chart's series. * @type {(null|string)} * @example * * null {null}, no effect (default) * "white", removes the transparency by combining the white background with the series default color * */ cursorSerieTooltipBlend: "white", /** * @description The cursorSerieTooltipAlpha field is responsible for defining the alpha channel for the standard colors used in the tooltip series. It can either be null or any number between zero (completely transparent) and one (completely opaque). The cursorSerieTooltipBlend field defines a different color for tooltips when the background color is blended with the series default color. The seriesColors field defines the default colors for the chart's series. * @type {(null|number)} * @example * * null {null}, no alpha channel applied on default colors for the chart's series * 0, defines fully transparent colors * 0.5, defines semi-transparent colors * 1, defines fully-opaque colors * */ cursorSerieTooltipAlpha: 0.60 }, /** * @description The series field defines the series of data the chart displays, as an object (or an array of) of {category: value} or SerieOptions type. Each serie has a collection of values. Each value represents a category. If the data property of the serie has been provided as an object (not array), each property of the object represents a category. For instance, data: {"meta": 200, "whatsup": 300}, defines two category names meta and whatsup. These custom categories are shown instead of categories defined by the first category axis. * @type {(object|SerieOptions|object[]|SerieOptions[])} * @example * * {data: {"meta": 200, "whatsup": 300}} {object}, sets a single serie to represent, inluding the category names * {data: [1,2,3,4]} {SerieOptions}, sets a single serie to represent * [{data: [1,3,5,7]}, {data: "2,4,6,8"}] {SerieOptions[]}, sets multiple-series to represent * */ series: null, /** * @description The autoFit field specifies whether the control resizes the elements of the series to fit the control's content. The autoFit field has no effect for "radarArea", "radarLine", "radarColumn", "polarArea", "polarLine", "polarScatter" or "pie" chart-types. * @type {boolean} * @example * * false {boolean}, the autofit feature is disabled (default) * true {boolean}, resizes the elements of the series to fit the control's content */ autoFit: false, /** * @description The valueAxis field defines the chart's value axes (oY). The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use.. * @type {(ValueAxisOptions|ValueAxisOptions[])} * @example * * null {null}, the chart displays and uses a single value-axis * {color: "red"} {ValueAxisOptions}, shows the default value-axis in red * [{name: "celsius", min: 0, max: 100, majorUnit: 25}, {name: "kelvin", min: 273.15, max: 373.15, majorUnit: 25}] {ValueAxisOptions[]}, defines two value-axis celsius and kelvin (celsius is the default value axis) */ valueAxis: null, /** * @description The categoryAxis field defines the chart's category axes (oX). * @type {(CategoryAxisOptions|CategoryAxisOptions[])} * @example * * null {null}, the chart displays the category line but no labels for categories * {color: "red"} {CategoryAxisOptions}, shows the default category-axis in red * [{categories: [2001,2002,2003]}, {categories: ["A","B","C"], color: "blue"}] {CategoryAxisOptions[]}, defines two category-axis one that displays the 2001, 2002 and 2003, while another displays A, B and C in blue */ categoryAxis: null, /** * @description The xAxis field defines the configuration-options for x-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble"). * @type {ValueAxisOptions} * @example * * null {null}, the chart displays the default x-axis * {color: "red"} {ValueAxisOptions}, shows the x-axis in red * {min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for x-axis */ xAxis: null, /** * @description The yAxis field defines the configuration-options for y-axis of xy-compatible chart-types ("scatter", "scatterLine" or "bubble"). * @type {ValueAxisOptions} * @example * * null {null}, the chart displays the default y-axis * {color: "red"} {ValueAxisOptions}, shows the y-axis in red * {min: -100, max: 100, majorUnit: 25} {ValueAxisOptions}, redefines the min, max and major intervals for y-axis */ yAxis: null, /** * @description The toolTipFormat field specifies the expression to customize the tooltip (shown while the cursor hovers value-points of the chart). * * The format-expression supports predefined constants, operators and keywords as explained: * * - "value" keyword defines the value to format * - "name" keyword defines the name of the serie * - "category" keyword defines the category the value is in (available only if applicable) * - "percent" keyword defines the percent associated with the value, as a number between 0 and 100 (available only if applicable) * - "inner" keyword indicates the inner-index of the value within the point-data, such as 0(open or from), 1(high or to), 2(low) or 3(close) (available only if applicable) * - "%V0", "%V1", "%V2" or "%V3" keyword gets the value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for colummRange chart-type, %V1 gets the high-value for candleStick chart-type or to for colummRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value") * * @type {string} * @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) */ toolTipFormat: null, /** * @description The valueSize field specifies the size to show a column or a bar within the chart. The valueSize indicates the width for horizontally-oriented charts or height for the vertically-oriented chart types. The valueSize has no effect for xy or circular-compatible chart types. The valueSize has effect for area-compatible chart types as follows: * * "area" {string}, an area chart or area graph displays graphically quantitative data. It is based on the line chart. The area between axis and line are commonly emphasized with colors, textures and hatchings. Commonly one compares two or more quantities with an area chart. (data requires array of numbers, supports vertical field, scrollable) * "line" {string}, a line chart or line graph, also known as curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time - a time series - thus the line is often drawn chronologically. In these cases they are known as run charts. (data requires array of numbers, supports vertical field, scrollable) * "column" {string}, a column chart or column graph is a chart or graph that presents categorical data with rectangular columns with heights proportional to the values that they represent. A horizontal column chart is called a bar chart. (data requires array of numbers, supports vertical field, scrollable) * "waterfall" {string}, a waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. (data requires array of numbers, supports vertical field, scrollable) * "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable) * "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable) * "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable) * "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low and close]], supports vertical field, scrollable) * * @type {number} * @example * * 4 {number}, sets the column/bar's width to 4-pixels * */ valueSize: 16, /** * @description The cursor field holds 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 * * {visible: true}, shows the crosshair over the hover/touch area * */ cursor: null, /** * @description The legend field holds the configuration options to display view's legend (the legend helps you choose which series to show or hide at runtime) * @type {LegendOptions} * @example * * {visible: true}, shows the legend * */ legend: null, /** * @description The sort field defines the list of 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. * @type {string} * @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") * */ sort: null, /** * @description The overview field holds the configuration options to display the overview (the overview displays the map of the entire series without a scroll bar) * @type {OverviewOptions} * @example * * {visible: true}, shows the overview * */ overview: null, } /////////////////////////////////////////////////////////// (exontrol.Graph.ImportOptions) // // The exontrol.Graph.ImportOptions type defines options to import data from CSV format. A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record. Each record consists of one or more fields, separated by commas // // The exontrol.Graph.ImportOptions type supports the following fields: // // limit {number}, specifies the maximum number of rows/items/lines to import // format {string}, determines the format of source to import data from // eor {string}, specifies the characters the row/item/line ends (has effect only if format field is "CSV") // eof {string}, specifies the character to separate fields within the row/item/line (has effect only if format field is "CSV") // str {string}, specifies the character to quote values (has effect only if format field is "CSV") // hdr {boolean}, indicates whether the first line in data represents the control's header (has effect only if format field is "CSV") // /////////////////////////////////////////////////////////// exontrol.Graph.ImportOptions = { /** * @description The limit field specifies the maximum number of rows/items/lines to import * @type {number} Indicates the maximum number of rows/items/lines to import * @example * * undefined {undefined}, specifies unlimited number of rows/items/lines to import * 1000 {number}, limits the items to import to 1,000 */ limit: undefined, /** * @description The format field specifies the format of source to import data form * @type {string} Specifies the format of source to import data form * @example * * null {null}, specifies that the source of import is an array of [[value]] type * "CSV" {string}, specifies that the source of import is a string in CSV format */ format: null, /** * @description The eor (EndOfRow) field specifies the characters the row/item/line ends (has effect only if format field is "CSV") * @type {string} Specifies the end of the row/item/line * @example * * ";" {string}, specifies that the ; character to end each row/item/line */ eor: "\r\n", /** * @description The eof (EndOfField) field specifies the character to separate fields within the row/item/line (has effect only if format field is "CSV") * @type {string} Specifies the character to separate fields within the row/item/line * @example * * "\t" {string}, specifies TAB charactar as field separator */ eof: ",", /** * @description The str field specifies the character to quote values (has effect only if format field is "CSV") * @type {string} Specifies the character to quote values * @example * * "'" {string}, specifies ' character to quote any value that contains other ' or eof character */ str: "\"", /** * @description The hdr field specifies whether the first line indicates the control's header (has effect only if format field is "CSV") * @type {boolean} Specifies whether the first line indicates the control's header * @example * * false {boolean}, specifies the no header line is provided * true {boolean}, the first line defines the control's header */ hdr: true } /////////////////////////////////////////////////////////// (exontrol.Graph.LineOptions) // // The LineOptions object defines the configuration options to show the lines (axis, grid lines, tick lines). // // The LineOptions type defines the following fields: // // width {number}, specifies the line's width or size (1 by default) // color {string}, specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) // style {array}, specifies the dash pattern to show the line (solid by default) // /////////////////////////////////////////////////////////// exontrol.Graph.LineOptions = { /** * @description The width field specifies the line's width or size (1 by default) * @type {number} * @example * * null {null}, indicates lines of 1-pixel wide * 2 {number}, indicates lines of 2-pixels wide */ width: null, /** * @description The color field specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) * @type {string} * @example * * null {null}, indicates a black line * "transparent" {string}, specifies a transparent line * "red" {string}, specifies a red line * "#00FF00" {string}, specifies a green line * "rgba(255,0,0,0.5)" {string}, indicates 50% red line */ color: null, /** * @description The style field defines the style of the line. An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null} or [] {array}, defines solid grid lines * 2 {number}, becomes [2, 2, ...] * [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...] */ style: null } /////////////////////////////////////////////////////////// (exontrol.Graph.GridLinesOptions) // // The GridLinesOptions object defines the configuration options to show the grid lines. The GridLinesOptions type inherits all properties of LineOptions type. // // The GridLinesOptions type defines the following fields: // // width {number}, specifies the line's width or size (1 by default) // color {string}, specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) // style {array}, specifies the dash pattern to show the line (solid by default) // skip {number}, specifies the number of grid lines to skip // step {number}, specifies the step to show the grid lines // /////////////////////////////////////////////////////////// exontrol.Graph.GridLinesOptions = { /** * @description The width field specifies the line's width or size (1 by default) * @type {number} * @example * * null {null}, indicates lines of 1-pixel wide * 2 {number}, indicates lines of 2-pixels wide */ width: null, /** * @description The color field specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) * @type {string} * @example * * null {null}, indicates a black line * "transparent" {string}, specifies a transparent line * "red" {string}, specifies a red line * "#00FF00" {string}, specifies a green line * "rgba(255,0,0,0.5)" {string}, indicates 50% red line */ color: null, /** * @description The style field defines the style of the line. An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null} or [] {array}, defines solid grid lines * 2 {number}, becomes [2, 2, ...] * [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...] */ style: null, /** * @description The skip field specifies the number of grid lines to skip * @type {number} * @example * * null {null}, no grid lines are skipped * 2 {number}, skips the first two grid lines * */ skip: null, /** * @description The step field defines the step to show the grid lines * @type {number} * @example * * null {null}, * 2 {number}, draw the grid lines two by two * */ step: null } /////////////////////////////////////////////////////////// (exontrol.Graph.FormatGridLinesOptions) // // The FormatGridLinesOptions object defines the configuration options to show the grid lines. The FormatGridLinesOptions type inherits all properties of GridLinesOptions type. // // The FormatGridLinesOptions type defines the following fields: // // format {string}, defines the label to display for each grid-line, using an expression that supports keywords like value and index, where value defines the category and the index, the index of the category. The grid-lines are displayed every time the label is changed. // align {exontrol.DrawTextFormatEnum}, specifies the flags to display the label between grid lines // width {number}, specifies the line's width or size (1 by default) // color {string}, specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) // style {array}, specifies the dash pattern to show the line (solid by default) // skip {number}, specifies the number of grid lines to skip // step {number}, specifies the step to show the grid lines // /////////////////////////////////////////////////////////// /** * @class * @description The FormatGridLinesOptions object defines the configuration options to show the grid lines. The FormatGridLinesOptions type inherits all properties of {@Link GridLinesOptions} type. *
*

For instance, the "format" option:

*
* categoryAxis: * { * categories: "x", * overviewGridLines: * { * format: "date(value) format `mmm`", * } * } *
* specifies that the overview shows the grid lines from month to month *
*/ exontrol.Graph.FormatGridLinesOptions = { /** * @description The format field specifies an expression to define the labels between grid lines. The format-expression supports predefined constants, operators and keywords as explained: * * - "index" keyword defines the index of the category * - "value" keyword defines the name of the category * * The grid-lines are displayed every time the label is changed. * @type {string} * @example: * * null {null} or "" {string}, no grid-lines are displayed * "date(value) format `mmm`" {string}, the grid-lines are shown for every month * "year(date(value))" {string}, the grid-lines are shown for every year * "((0:=date(value)) format `mmm`) + (month(=:0) = 1 ? `
` + (=:0 format `YYYY`) : ``)" {string}, the grid-lines are shown for every month, and the label includes the year for every January * "int(index/100)" {string}, the grid-lines are shown every 100 categories * */ format: null, /** * @description The align field specifies the flags to display the label between grid lines. * * 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: * * null {null}, by default, the label is displayed in the lower-left corner (bottom,left) * "center,vcenter" {string} or exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter {exontrol.DrawTextFormatEnum} or 0x5 {number}, centers the label between grid-lines * */ align: null, /** * @description The width field specifies the line's width or size (1 by default) * @type {number} * @example * * null {null}, indicates lines of 1-pixel wide * 2 {number}, indicates lines of 2-pixels wide */ width: null, /** * @description The color field specifies the color to show the line (accepts a valid CSS color string, including hex and rgb) * @type {string} * @example * * null {null}, indicates a black line * "transparent" {string}, specifies a transparent line * "red" {string}, specifies a red line * "#00FF00" {string}, specifies a green line * "rgba(255,0,0,0.5)" {string}, indicates 50% red line */ color: null, /** * @description The style field defines the style of the line. An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null} or [] {array}, defines solid grid lines * 2 {number}, becomes [2, 2, ...] * [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...] */ style: null, /** * @description The skip field specifies the number of grid lines to skip * @type {number} * @example * * null {null}, no grid lines are skipped * 2 {number}, skips the first two grid lines * */ skip: null, /** * @description The step field defines the step to show the grid lines * @type {number} * @example * * null {null}, * 2 {number}, draw the grid lines two by two * */ step: null } /////////////////////////////////////////////////////////// (exontrol.Graph.TicksOptions) (TicksOptions) // // The TicksOptions object defines the configuration options to show the ticks. The TicksOptions type inherits all properties of LineOptions type. // // The TicksOptions type defines the following fields: // // width {number}, specifies the ticks's width or size (1 by default) // color {string}, specifies the color to show the ticks (accepts a valid CSS color string, including hex and rgb) // style {array}, specifies the dash pattern to show the ticks (solid by default) // skip {number}, specifies the number of ticks to skip // step {number}, specifies the step to show the ticks // /////////////////////////////////////////////////////////// exontrol.Graph.TicksOptions = { /** * @description The width field specifies the tick line's width or size (1 by default) * @type {number} * @example * * null {null}, indicates tick-lines of 1-pixel wide * 2 {number}, indicates tick-lines of 2-pixels wide */ width: null, /** * @description The color field specifies the color to show the ticks (accepts a valid CSS color string, including hex and rgb) * @type {string} * @example * * null {null}, indicates a black line * "transparent" {string}, specifies a transparent line * "red" {string}, specifies a red line * "#00FF00" {string}, specifies a green line * "rgba(255,0,0,0.5)" {string}, indicates 50% red line */ color: null, /** * @description The style field defines the style of the ticks. An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null} or [] {array}, defines solid ticks * 2 {number}, becomes [2, 2, ...] * [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...] */ style: null, /** * @description The skip field specifies the number of ticks to skip * @type {number} * @example * * null {null}, no ticks are skipped * 2 {number}, skips the first two ticks * */ skip: null, /** * @description The step field defines the step to show the ticks * @type {number} * @example * * null {null}, * 2 {number}, draw the ticks two by two * */ step: null } /////////////////////////////////////////////////////////// (exontrol.Graph.ValueAxisOptions) // // The ValueAxisOptions object defines the configuration options for chart's value axes (oY). The chart can show multiple value axes. One or more series can be assigned to a value axis, using the axis option of the Serie object. // // The ValueAxisOptions type defines the following fields: // // name {string}, specifies the name of the value axis (null defines the default value axis (unnamed value axis or the first value axis if all named)) // min {(null|number)}, indicates undefined (ignored) or the minimum value of the axis // max {(null|number)}, indicates undefined (ignored) or the maximum value of the axis // majorUnit {(null|number)}, indicates undefined (ignored) or the interval between major divisions // start {number}, defines where the value-axis begins relative to the full axis // end {number}, defines where the value-axis ends relative to the full axis // format {string}, specifies an expression to customize the labels to show on value-axis // visible {boolean}, shows or hides the value-axis (including the labels) // align {exontrol.AlignEnum}, aligns the value-axis to left/top or right/bottom side of the view // reverse {boolean}, specifies the direction of the value-axis // tfi {(string|object)}, holds the font attributes for the title and labels of the value-axis. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // title {string}, specifies the title of the value-axis // angle {object}, specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis // axisLine {LineOptions}, defines the configuration options to show the line of the value-axis // majorTicks {TicksOptions}, defines the configuration options to show the major ticks of the value-axis // majorGridLines {GridLinesOptions}, defines the configuration options to show the major grid lines of the value-axis // shape {any}, defines the shape to apply on the value-axis's background // asPercent {boolean}, indicates whether the value-axis converts the serie's values to [0,1] range, as percentages (the values area always numbers between 0 and 1) // shapeChart {any}, defines the shape to apply on the chart's background right to the value-axis // cursorFormat {string}, specifies an expression to customize the tooltips to show on value-axis, when the crosshair intersects the value-axis // offsetLabel {(number|string|number[]|string[])}, defines the offset to move labels horizontally or vertically in relation to their original positions // /////////////////////////////////////////////////////////// exontrol.Graph.ValueAxisOptions = { /** * @description The name field defines the name of the value axis. The name field has no effect if the control displays a single value-axis * @type {string} * @example * * "kelvin" {string}, defines a value axis named "kelvin" * */ name: null, /** * @description The min field specifies the minimum value of the axis. The start field defines where the value-axis begins relative to the full axis. * @type {number} * @example * * -10 {number}, re-defines the minimum value * */ min: null, /** * @description The max field specifies the maximum value of the axis. The end field defines where the value-axis ends relative to the full axis. * @type {number} * @example * * 10 {number}, re-defines the maximum value * */ max: null, /** * @description The majorUnit field specifies the interval between major divisions. * @type {number} * @example * * 2 {number}, re-defines the major-unit * */ majorUnit: null, /** * @description The start field defines where the value-axis begins relative to the full axis. The axis field specifies the name of the value-axis to use. For instance, you can use the start/end fields to customize the vertical or horizontal position on the chart to visualize a specified serie. * @type {number} * @example: * * null {null}, the start of the value-axis is not changed (no effect) * 0.25 {number}, indicates that the value-axis (and its series) starts from the 1/4 of the height of the view (for horizontal charts) */ start: null, /** * @description The end field defines where the value-axis ends relative to the full axis. The axis field specifies the name of the value-axis to use. For instance, you can use the start/end fields to customize the vertical or horizontal position on the chart to visualize a specified serie. * @type {number} * @example: * * null {null}, the end of the value-axis is not changed (no effect) * 0.75 {number}, indicates that the value-axis (and its series) uses 3/4 of the height of the view (for horizontal charts) */ end: null, /** * @description The format field specifies an expression to customize the labels to show on value axis. The format-expression supports predefined constants, operators and keywords as explained: * * - "value" keyword defines the value to format * * The value is displayed as it is, if the format field is null (undefined). The value can include ex-HTML tags. * @type {string} * @example: * * null {null}, the values are displayed as they are (format is ignored) * "``" {string}, no label is displayed on the value-axis * "value format ``" {string}, the value-axis displays the values using two-decimals (according with the current regional settings) * */ format: null, /** * @description The visible field shows or hides the value-axis (including the labels on the value-axis) * @type {boolean} * @example: * * null {null}, by default, the value-axis is visible (if null the visible property has no effect) * false {boolean}, hides the value-axis * */ visible: null, /** * @description The align field aligns the value-axis to left/top or right/bottom side of the view. If the chart is horizontally oriented (values go vertically, categories go horizontally) the value-axis can be aligned to bottom or top side of the view. If the chart is vertically oriented (values go horizontally, categories go vertically) the value-axis can be aligned to left or right side of the view * @type {exontrol.AlignEnum} * @example: * * null {null}, aligns the value-axis to left/top side of the view (default). * exontrol.AlignEnum.exAlignRight {exontrol.AlignEnum} or 2 {number}, aligns the value-axis to the right side of the view. * */ align: null, /** * @description The reverse field indicates the direction of the value axis * @type {boolean} * @example: * * null {null}, by default values are listed from top to bottom (chart horizontally oriented, values go vertically, categories go horizontally) and from left to right (chart vertically oriented, values go horizontally, categories go vertically) * true {boolean}, the value axis direction will be reversed, it shows values from bottom to top (chart horizontally oriented, values go vertically, categories go horizontally), and right to left (chart vertically oriented, values go horizontally, categories go vertically) * */ reverse: null, /** * @description The tfi field specifies the font attributes to apply on the title and labels of the value-axis. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of tag) * * Any other word within the tfi field that's not recognized as a keyword is interpreted as: * * name of the font (not a number), specifies the font's family (equivalent of tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of 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 tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored (the control's tfi property is used instead) * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null, /** * @description The title field specifies the title of the value-axis. The title supports ex-HTML format. * @type {string} * @example: * * null {null}, no title is shown * "Temperature" {string}, the Temperature title is displayed in bold * */ title: null, /** * @description The angle field specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis. By default, if angle is omitted all angles are set on null(auto) * @type {(string|object)} * @example: * * null {null}, all angles are set on auto (by default). For instance, if the axis is vertically displayed and aligned to the left side of the control, the title is rotated 90 degree anti-clockwise, while the labels are shown not-rotated. if the axis is aligned to the right the title is rotated 90 degree clockwise. * "45,0" {string}, the title is rotated 45 degree clockwise, while the labels are not rotated * {title: -90} {string}, the title is rotated 90 degree anti-clockwise * */ angle: null, /** * @description The axisLine field defines the configuration options to show the line of the value-axis * @type {LineOptions} * @example: * * null {null}, indicates a solid-black 1-pixel wide axis-line * {color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide axis-line * */ axisLine: null, /** * @description The majorTicks field defines the configuration options to show the major ticks of the value-axis * @type {TicksOptions} * @example: * * null {null}, indicates a solid-black 1-pixel wide tick * {color: "red", width: 2, step: 2} {TicksOptions}, indicates a solid-red 2-pixels wide tick, displayed two by two * */ majorTicks: null, /** * @description The majorGridLines field defines the configuration options to show the major grid lines of the value-axis * @type {GridLinesOptions} * @example: * * null {null}, indicates a solid-lightgray 1-pixel wide grid lines for first value axis (default value axis). The other value axes show no grid lines for null (no effect for others) * {color: "red", width: 2, step: 2} {GridLinesOptions}, indicates a solid-red 2-pixels wide grid lines, displayed two by two * */ majorGridLines: null, /** * @description The shape field defines the shape to apply on the value-axis's background. The shape can be a string expression that defines shape's name within the exontrol.Shape.Graph or exontrol.Shape namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type * @type {any} * * @example * * "" {string}, null {null}, no shape is applied * "red" {string}, fills the object's background in red (CSS color) * '{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type) * "xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied) * exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace */ shape: null, /** * @description The asPercent field indicates whether the value-axis converts the serie's values to [0,1] range, as percentages (the values area always numbers between 0 and 1). The format field specifies an expression to customize the labels to show on value axis. * @type {boolean} * * @example * * null {null} or false {boolean}, the serie's values show as normal (by default) * true {boolean}, the serie's values show as percentages (the values area always numbers between 0 and 1) * */ asPercent: null, /** * @description The shapeChart field defines the shape to apply on the chart's background right to the value-axis. The shapeChart option is similar with shape excepts that it fills the chart's background not the value-axis's background. The shapeChart can be a string expression that defines shape's name within the exontrol.Shape.Graph or exontrol.Shape namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type * @type {any} * * @example * * "" {string}, null {null}, no shape is applied * "red" {string}, fills the object's background in red (CSS color) * '{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type) * "xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied) * exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace */ shapeChart: null, /** * @description The cursorFormat field specifies an expression to customize the tooltips to show on value-axis, when the crosshair intersects the value-axis. The format-expression supports predefined constants, operators and keywords as explained: * * - "value" keyword defines the value on the axis * * @type {string} * @example: * * null {null}, no tooltip is shown on value-axis, when the crosshair intersects the value-axis * "value format ``" {string}, displays the values using two-decimals (according with the current regional settings) * */ cursorFormat: null, /** * @description The offsetLabel field defines the offset to move labels horizontally or vertically in relation to their original positions * @type {(number|string|number[]|string[])} * @example: * * null {null}, the labels are shown in their original-positions * 8 {number}, the labels are shown shifted to the right, relative to their original-positions * ",-8" {number}, the labels are shown shifted to the top, relative to their original-positions * [2,4] {number}, the labels are shown with a shift of 2 pixels to the right and 4 pixels down compared to their original positions * */ offsetLabel: null } /////////////////////////////////////////////////////////// (exontrol.Graph.CategoryAxisOptions) // // The CategoryAxisOptions object defines the configuration options for chart's category axes (oX). The chart can show multiple category axes. // Each serie has a collection of values. Each value represents a category. If the data property of the serie has been provided as an object (not array), // each property of the object represents a category. For instance, data: {"meta": 200, "whatsup": 300}, defines two category names meta and whatsup. // These custom categories are shown instead of categories defined by the first category axis. // // The CategoryAxisOptions type defines the following fields: // // categories {(string|string[])}, defines the category names // format {string}, specifies an expression to customize the labels to show on category-axis // visible {boolean}, shows or hides the category-axis (including the labels) // align {exontrol.AlignEnum}, aligns the category-axis to bottom/right or top/left side of the view // reverse {boolean}, specifies the direction of the category-axis // tfi {(string|object)}, holds the font attributes for the title and labels of the category-axis. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // title {string}, specifies the title of the category-axis // angle {object}, specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis // axisLine {LineOptions}, defines the configuration options to show the line of the category-axis // majorTicks {TicksOptions}, defines the configuration options to show the major ticks of the category-axis // majorGridLines {GridLinesOptions}, defines the configuration options to show the major grid lines of the category-axis // shape {any}, defines the shape to apply on the category-axis's background // cursorFormat {string}, specifies an expression to customize the tooltips to show on category-axis, when the crosshair intersects the category-axis // offsetLabel {(number|string|number[]|string[])}, defines the offset to move labels horizontally or vertically in relation to their original positions // overviewGridLines {FormatGridLinesOptions}, defines the configuration options to show the grid lines and labels between for the overview panel // chartGridLines {FormatGridLinesOptions}, defines the configuration options to show the grid lines and labels between for the chart panel // /////////////////////////////////////////////////////////// exontrol.Graph.CategoryAxisOptions = { /** * @description The categories field defines the category names. Each serie has a collection of values. Each value represents a category. If the data property of the serie has been provided as an object (not array), each property of the object represents a category. For instance, data: {"meta": 200, "whatsup": 300}, defines two category names meta and whatsup. These custom categories are shown instead of categories defined by the first category axis. The categories field can be any of the following types: * * categories {number}, the categories property could indicate: * * - a number (if the control's Data property is not set) that defines a single category-name * - the column index from the control's Data (if the control's Data property is set), that provides the category names * * categories {string}, the categories property could indicate: * * - names separated by comma (if the control's Data property is not set) that defines the category names * - the column name or index from the control's Data (if the control's Data property is set), that provides the category names * * categories {string[]}, array of category names * * @type {(string|string[])} * @example * * "x" {string}, specifies single-category named "x" (if the control's Data property is not set), or the column named "x" within the control's Data property provides the category names (if the control's Data property is set) * "2001,<b>2002,2003" {string}, indicates three categories such as "2001", "2002" and "2003", while 2002 is displayed in bold * [2001,2002] {array}, specifies two categories such as "2001" and "2002" * */ categories: null, /** * @description The format field specifies an expression to customize the labels to show on category axis. The format-expression supports predefined constants, operators and keywords as explained: * * - "index" keyword defines the index of the category * - "value" keyword defines the name of the category * * The name of the category is displayed as it is if format field is null (undefined). The name of the category can include ex-HTML tags. * @type {string} * @example: * * null {null}, the names of the categories are displayed as they are (format is ignored) * "``" {string}, no label is displayed on the category-axis * "date(value) format `MMM d, yyyy`" {string}, the category-axis displays the dates in "MMM d, yyy" format * */ format: null, /** * @description The visible field shows or hides the category-axis (including the labels). * @type {boolean} * @example: * * null {null}, by default, the category-axis is visible (if null the visible property has no effect) * false {boolean}, hides the category-axis * */ visible: true, /** * @description The align field aligns the category-axis to bottom/right or top/left side of the view. If the chart is horizontally oriented (values go vertically, categories go horizontally) the category-axis can be aligned to bottom or top side of the view. If the chart is vertically oriented (values go horizontally, categories go vertically) the category-axis can be aligned to left or right side of the view. * The default category-axis can be shown next to 0-origin of value-axis only if: * * misc.updateRangeOnScroll {number} option is 0 (specifies the time in ms to update the chart's minimum and maximum values while user scrolls the chart (0 indicates that the chart's minimum and maximum values are updated only when changing the data)) * align option is 1(exAlignCenter) or 4(exAlignVCenter) * 0 is shown between value-axis minimum and maximum values * * @type {exontrol.AlignEnum} * @example: * * null {null}, aligns the category-axis to bottom/right side of the view (default) * exontrol.AlignEnum.exAlignTop {exontrol.AlignEnum} or 0 {number}, aligns the category-axis to top/left side of the view * "center" {string}, the category-axis is displayed next to 0-origin of value-axis * */ align: null, /** * @description The reverse field indicates the direction of the category axis * @type {boolean} * @example: * * null {null}, by default categories are listed from left to right (chart horizontally oriented, values go vertically, categories go horizontally) and from bottom to top (chart vertically oriented, values go horizontally, categories go vertically) * true {boolean}, the category axis direction will be reversed, it shows categories from right to left (chart horizontally oriented, values go vertically, categories go horizontally), and top to bottom (chart vertically oriented, values go horizontally, categories go vertically) * */ reverse: null, /** * @description The tfi field specifies the font attributes to apply on the title and labels of the category-axis. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of tag) * * Any other word within the tfi field that's not recognized as a keyword is interpreted as: * * name of the font (not a number), specifies the font's family (equivalent of tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of 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 tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored (the control's tfi property is used instead) * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null, /** * @description The title field specifies the title of the category-axis. The title supports ex-HTML format. * @type {string} * @example: * * null {null}, no title is shown * "Years" {string}, the Years title is displayed in blue * */ title: null, /** * @description The angle field specifies an object of {title,labels} type that specifies the rotation angle (in degrees) for the title and labels of the axis. By default, if angle is omitted all angles are set on null(auto) * @type {(string|object)} * @example: * * null {null}, all angles are set on auto (by default). For instance, if the axis is vertically displayed and aligned to the left side of the control, the title is rotated 90 degree anti-clockwise, while the labels are shown not-rotated. if the axis is aligned to the right the title is rotated 90 degree clockwise. * "45,0" {string}, the title is rotated 45 degree clockwise, while the labels are not rotated * {title: -90} {string}, the title is rotated 90 degree anti-clockwise * */ angle: null, /** * @description The axisLine field defines the configuration options to show the line of the category-axis * @type {LineOptions} * @example: * * null {null}, indicates a solid-black 1-pixel wide axis-line * {color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide axis-line * */ axisLine: null, /** * @description The majorTicks field defines the configuration options to show the major ticks of the category-axis * @type {TicksOptions} * @example: * * null {null}, indicates a solid-black 1-pixel wide tick * {color: "red", width: 2, step: 2} {TicksOptions}, indicates a solid-red 2-pixels wide tick, displayed two by two * */ majorTicks: null, /** * @description The majorGridLines field defines the configuration options to show the major grid lines of the category-axis * @type {GridLinesOptions} * @example: * * null {null}, no grid lines are displayed * {color: "red", width: 2, step: 2} {GridLinesOptions}, indicates a solid-red 2-pixels wide grid lines, displayed two by two * */ majorGridLines: null, /** * @description The shape field defines the shape to apply on the category-axis's background. The shape can be a string expression that defines shape's name within the exontrol.Shape.Graph or exontrol.Shape namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type * @type {any} * * @example * * "" {string}, null {null}, no shape is applied * "red" {string}, fills the object's background in red (CSS color) * '{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type) * "xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied) * exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace */ shape: null, /** * @description The cursorFormat field specifies an expression to customize the tooltips to show on category-axis, when the crosshair intersects the category-axis. The format-expression supports predefined constants, operators and keywords as explained: * * - "index" keyword defines the index of the category * - "value" keyword defines the name of the category * * The name of the category can include ex-HTML tags. * @type {string} * @example: * * "``" {string}, no tooltip is shown on category-axis, when the crosshair intersects the category-axis * "date(value) format `MMM d, yyyy`" {string}, the tooltip displays the dates in "MMM d, yyy" format * */ cursorFormat: null, /** * @description The offsetLabel field defines the offset to move labels horizontally or vertically in relation to their original positions * @type {(number|string|number[]|string[])} * @example: * * null {null}, the labels are shown in their original-positions * 8 {number}, the labels are shown shifted to the right, relative to their original-positions * ",-8" {number}, the labels are shown shifted to the top, relative to their original-positions * [2,4] {number}, the labels are shown with a shift of 2 pixels to the right and 4 pixels down compared to their original positions * */ offsetLabel: null, /** * @description The overviewGridLines field defines the configuration options to show the grid lines and labels between for the overview panel * @type {FormatGridLinesOptions} * @example: * * null {null}, no grid lines are displayed * {format: "date(value) format `mmm`", color: "red", width: 2, step: 2} {FormatGridLinesOptions}, indicates a solid-red 2-pixels wide grid lines, every second month * {format: "year(date(value))"} {FormatGridLinesOptions}, a black 1-pixel wide grid-line is shown for every year * */ overviewGridLines: null, } /////////////////////////////////////////////////////////// (exontrol.Graph.Series) // // The exontrol.Graph.Serie object holds a collection of exontrol.Graph.Serie type (serie of the control) // // The exontrol.Graph.Serie object provides the following methods: // // Add(oSerieOpts) {exontrol.Graph.Serie}, creates and adds a new serie into the control // Count/GetCount() {number}, returns the number of series within the collection. // Item(id) {exontrol.Graph.Serie}, gets the serie giving its index, identifier/key or reference // Remove(id), removes the serie giving its index, identifier/key or reference // Clear(), removes all series of the control // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Graph.Serie) // // The exontrol.Graph.Serie object holds information(options) about a serie within the control. // // The exontrol.Graph.Serie object provides the following methods: // // Remove(), removes the serie itself from series collection ( equivalent of Series.Remove(id) method ) // Options/GetOptions()/SetOptions(value) {exontrol.Graph.SerieOptions}, indicates the serie's options (at once) such as visibility, position and so on // Index/GetIndex() {number}, returns the index of the serie (0-based) // Position/GetPosition()/SetPosition(value) {number}, specifies the serie's position (0-based) // Data/GetData()/SetData(value) {(number|string|array|object)}, defines the values of the serie // Type/GetType()/SetType(value) {string}, specifies the way the data is represented // Name/GetName()/SetName(value) {string}, indicates the name of the chart serie which is visible in the legend // Vertical/GetVertical()/SetVertical(value) {boolean}, indicates whether the data is represented vertically or horizontally // Key/GetKey()/SetKey(value) {boolean}, specifies the serie's key (the Series.Serie(key) requests a serie by its index, identifier/key or reference) // Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the serie within the chart-view // Shape/GetShape()/SetShape(value) {any}, the shape for the serie itself // Axis/GetAxis()/SetAxis(value) {string}, indicates the name of the value axis to use // ShowValue/GetShowValue()/SetShowValue(value) {exontrol.Graph.ShowValueEnum}, shows or hides the serie's value-points, value-lines and values // ValueFormat/GetValueFormat()/SetValueFormat(value) {string}, specifies the expression to customize the values to display on the chart (showValue property includes the exValue) // Stack/GetStack()/SetStack(value) {string}, specifies whether the serie is stacked (same value for multiple series of the same type indicates same stacking-group) // Style/GetStyle()/SetStyle(value) {SerieStyleEnum}, indicates the way the values of the serie get connected // CursorFormat/GetCursorFormat()/SetCursorFormat(value) {string}, specifies an expression to customize the tooltips to display, when the crosshair cursor hovers the charts of the series // LegendFormat/GetLegendFormat()/SetLegendFormat(value) {string}, specifies an expression to customize the serie's label to show on the legend // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Graph.SerieOptions) // // The exontrol.Graph.SerieOptions type holds all options a serie can display or own // // The exontrol.Graph.SerieOptions type defines the following fields: // // data {(number|string|array|object)}, defines the values of the serie // type {string}, specifies the way the data is represented // vertical {boolean}, indicates whether the data is represented vertically or horizontally // name {string}, indicates the name of the chart serie which is visible in the legend // visible {boolean}, indicates whether the serie is visible or hidden // key {string}, specifies the key associated with the serie // shape {any}, defines the shape for individual serie // axis {string}, defines the name of the value axis to use // showValue {ShowValueEnum}, shows or hides the serie's value-points, value-lines and values // valueFormat {string}, specifies the expression to customize the values to display on the chart (showValue property includes the exValue) // stack {string}, specifies whether the serie is stacked (same value for multiple series of the same type indicates same stacking-group) // style {string}, indicates the way the values of the serie get connected // cursorFormat {string}, specifies an expression to customize the tooltips to display, when the crosshair cursor hovers the charts of the series // legendFormat {string}, specifies an expression to customize the serie's label to show on the legend // /////////////////////////////////////////////////////////// exontrol.Graph.SerieOptions = { /** * @description The data field defines the values of the chart serie. The data can be of any of the following types: * * data {number}, the data property could indicate: * * - a number (if the control's Data property is not set) that defines the single-value of the serie, for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type * - the column index from the control's Data (if the control's Data property is set), that defines the values for for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type * * data {string}, the data property could indicate: * * - numbers separated by comma (if the control's Data property is not set) that defines the values of the serie, for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type * - the column name or index from the control's Data (if the control's Data property is set), for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type * - a string of two column names or indexes from the control's Data separated by comma (if the control's Data property is set), for "rangeArea", "rangeColumn", "polarArea", "polarLine", "polarScatter", "scatter", "scatterLine" and "scatterArea" chart-types. The first-column refers the "from" or "x" value, while the second-column refers the "to" or "y" value. * - a string of three column names or indexes from the control's Data separated by comma (if the control's Data property is set), for "bubble" chart-type. The first-column refers the "x" value, the second-column refers the "y" value, while the third-column refers the "size" value * - a string of four column names or indexes from the control's Data separated by comma (if the control's Data property is set), for "candleStick" and "ohlc" chart-type. The first-column refers the "open" value, the second-column refers the "high" value, the third-column refers the "low" value, while the forth-column refers the "close"value * * data {array}, the data property could indicate: * * - array of numbers ({number[]}) for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type * - array of array of two-numbers ({array}), such as [[from, to]] for "rangeArea" and "rangeColumn" chart-types * - array of array of two-numbers ({array}), such as [[angle, value]] for "polarArea", "polarLine" and "polarScatter" chart-types, where angle represents a value between 0 and 360 (degree) * - array of array of two-numbers ({array}), such as [[x, y]] for "scatter", "scatterLine" and "scatterArea" chart-types * - array of array of three-numbers ({array}), such as [[x, y, size] for "bubble" chart-type * - array of array of four-numbers ({array}), such as [[open, high, low and close]] for "candleStick" and "ohlc" chart-type * * data {object}, the name of the fields define the categories while the value of the fields define the values of the serie * * The control can display multiple-series or charts within the same view while they are compatible. For instance "area" and "radarArea" are not compatible (they are not generating the same axes). Also, if a serie or chart is shown vertically (vertical field is true for one visible-serie), all series are being displayed vertically. * * @type {(number|string|array|object)} * @example * * [1,2,3,4] {number[]}, adds values for "column" representation (array of numbers) * [[1,2],[2,3],[3,4],[4,5]] {array}, adds values for "rangeArea" representation (array of array of two-numbers, such as [[from, to]] or [[x,y]]) * [[1,2,3],[2,3,4],[3,4,5],[4,5,6]] {array}, adds values for "bubble" representation (array of array of three-numbers, such as [[x, y, size]]) * [[25,42,16,42],[33,59,25,59],[59,59,51,51],[51,51,33,51]] {array}, adds values for "candleStick" representation (array of array of four-numbers such as [open, high, low and close]) * "1,2,3,4" {string}, adds values for "column" chart-type (if the control's Data property is not set) * "value" {string}, the column "value" of the control's Data defines the serie's values, for "column" chart-type (if the control's Data property is set) * "CSCO (open),CSCO (high),CSCO (low),CSCO (close)" {string}, the "CSCO (open)","CSCO (high)","CSCO (low)","CSCO (close)" columns of the control's Data defines the values for "candleStick" chart-types * {"Germany": 1000, "Romania": 2000} {object}, defines a serie of two values (1000, 2000) and two categories ("Germany" and "Romania") * */ data: undefined, /** * @description The type field specifies the way the data is represented, as 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) * "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) * "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) * "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 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) * * The control can display multiple-series or charts within the same view while they are compatible. For instance "area" and "radarArea" are not compatible (they are not generating the same axes). Also, if a serie or chart is shown vertically (vertical field is true for one visible-serie), all series are being displayed vertically. * * @type {string} * @example * * null {null}, shows the data as columns (by default) * "bubble" {null}, shows the data as bubbles * "water" {null}, shows the data as waterfall (the type could be partial complete) * */ type: "column", /** * @description The vertical field indicates whether the data is represented vertically or horizontally. If a serie or chart is shown vertically (vertical field is true for one visible-serie), all series are being displayed vertically. The vertical field is valid for "area", "line", "column", "waterfall", "waterfall", "rangeArea" and "rangeColumn" chart types. The vertical field is not valid for "radarArea", "radarLine", "radarColumn", "polarArea", "polarLine", "polarScatter", "pie", "scatter", "scatterLine" and "bubble" chart-types. * @type {boolean} * @example * * false {boolean} or null {null}, the data is represented horizontally (by default) * true {boolean}, the data is represented vertically, valid for area-compat types. * */ vertical: null, /** * @description The name field indicates the name of the chart serie which is visible in the legend. * @type {string} * @example * * null {null}, defines no name for the serie within the legend * "Germany" {string}, defines the name "Germany" for the current serie * */ name: null, /** * @description The visible field shows or hides the serie within the chart-view (it is still visible within the legend) * @type {boolean} * @example * * false {boolean}, hides the serie within the chart-view * true {boolean}, shows the serie */ visible: true, /** * @description The key field specifies the key associated with the serie. * @type {string} * @example * * "logo" {string}, defines the serie with the giving key (logo). You can use the Series.Item("logo") method to request the serie giving its key. */ key: null, /** * @description The shape field defines the visual appearance to represent the serie. A string expression that defines shape's name within the exontrol.Shape.Graph or exontrol.Shape namespace, a CSS color, a JSON string-representation of an object of exontrol.Def.Shape type, for the serie itself or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type. * @type {any} * @example * * null {null}, no custom shape is applied (default object's shape may be applied) * "" {string}, no custom shape is applied (no default object's shape is be applied) * "red" {string}, fills the object's background in red (CSS color) * '{"fillColor": "red"}' or '{"normal":{"fillColor": "red"}}' {string}, fills the object's background in red (JSON-representation of an object of exontrol.Def.Shape type) * "xxx" {string}, indicates that exontrol.Shapes.Graph.xxx or exontrol.Shapes.xxx is applied on the object's background. If the xxx field is missing, no custom shape is applied (no default object's shape is be applied) * exontrol.Shapes.Button {object}, applies the "Button" shape on the object as defined into exontrol.Shapes namespace */ shape: null, /** * @description The axis field specifies the name of the value-axis to use. The chart can display multiple value axes. The serie uses the default value axis (unnamed value axis or the first value axis if all named) in case the specified value axis does not exit. The unrefered value axes shows the data as provided by the default value axis. The start/end fields define where the value-axis begins/ends relative to the full axis * @type {string} * @example * * null {null}, the current serie uses the default value axis (unnamed value axis or the first value axis if all named) * "temp" {string}, the current serie uses the "temp" value axis (uses the default value axis if specified value axis does not exist) */ axis: null, /** * @description The showValue field shows or hides the serie's value-points, value-lines and values * @type {ShowValueEnum} * @example * * 0 {number}, no value, value-line or value-point is displayed (default) * exontrol.Graph.ShowValueEnum.exValue {ShowValueEnum}, shows the serie's value-labels only * "point,line,value" {string}, equivalent of exontrol.Graph.ShowValueEnum.exPoint | exontrol.Graph.ShowValueEnum.exLine | exontrol.Graph.ShowValueEnum.exValue, and indicates that the value-point, value-line and value-itself are displayed * */ showValue: exontrol.Graph.ShowValueEnum.exHide, /** * @description The valueFormat field specifies the expression to customize the values to display on the chart (showValue property includes the exValue). The format-expression supports predefined constants, operators and keywords as explained: * * - "value" keyword defines the value to format * - "name" keyword defines the name of the serie * - "category" keyword defines the category the value is in (available only if applicable) * - "percent" keyword defines the percent associated with the value, as a number between 0 and 100 (available only if applicable) * - "inner" keyword indicates the inner-index of the value within the point-data, such as 0(open or from), 1(high or to), 2(low) or 3(close) (available only if applicable) * - "%V0", "%V1", "%V2" or "%V3" keyword gets the value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for colummRange chart-type, %V1 gets the high-value for candleStick chart-type or to for colummRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value") * * @type {string} * @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) */ valueFormat: null, /** * @description The stack field specifies whether the serie is stacked (same value for multiple series of the same type indicates same stacking-group). The stack options is supported when series's type is any of the following: * * "column" * "line" * "area" * "radarLine" * "radarArea" * "radarColumn" * * All series in the stack must be of the same type. * * @type {string} * @example * * null {null}, the serie is not part of any stacking-group * "G1" {string}, all series of the same type with the stack option set on "G1", are shown stacked */ stack: null, /** * @description The style field indicates the way the values of the serie get connected. The style has effect if serie's type is one of the following: * * "line" * "area" * "radarLine" * "radarArea" * "polarLine" * "polarArea" * * @type {SerieStyleEnum} * @example * * null {null}, the values will be connected with straight line (by default) * exontrol.Graph.SerieStyleEnum.exSpline {SerieStyleEnum}, the values get connected with a spline curve * */ style: exontrol.Graph.SerieStyleEnum.exNormal, /** * @description The cursorFormat field specifies an expression to customize the tooltips, when the crosshair cursor hovers the charts of the series. The format-expression supports predefined constants, operators and keywords as explained: * * - "value" keyword defines the value to format * - "name" keyword defines the name of the serie * - "category" keyword defines the category the value is in (available only if applicable) * - "%V0", "%V1", "%V2" or "%V3" keyword gets the value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for colummRange chart-type, %V1 gets the high-value for candleStick chart-type or to for colummRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value") * * @type {string} * @example: * * null {null} or "``" {string}, no tooltip is shown * "value format ``" {string}, displays the values using two-decimals (according with the current regional settings) * */ cursorFormat: null, /** * @description The legendFormat field specifies the expression to customize the serie's label to show on the . The format-expression supports predefined constants, operators and keywords as explained: * * "index" keyword defines the index of the category (single data-set of column or pie-type) or the index of the serie * "label" keyword specifies the label to display (could be the category of the name of the serie) * "name" keyword indicates the name of the serie * "visible" keyword specifies whether the item is visible or hidden * "percent" keyword gets the percent of the item (available only if applicable) * * @type {string} * @example: * * null {null} or "name" {string}, by default, it displays the name of the serie * "name + ` ` + (percent format ``) + `%`" {string}, displays the name and the percent of the serie * */ legendFormat: null, }; /////////////////////////////////////////////////////////// (exontrol.Graph.CursorOptions) // // The CursorOptions object defines 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 // // The CursorOptions type defines the following fields: // // visible {boolean}, shows or hides the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes) // smooth {number}, defines the time in ms the cursor goes from one layout to another // showCursorCategoryLine {ShowCursorCategoryLineEnum}, specifies the flags to show the vertical/horizontal category/x-line, when the crosshair cursor hovers the chart // showCursorSerieTooltip {ShowCursorSerieTooltipEnum}, defines the flags to show the tooltips, when the crosshair cursor hovers the charts of the series // showCursorValueLine {boolean}, shows or hides the horizontal/vertical value/y-line, when the crosshair cursor hovers the chart // showCursorXLine {boolean}, shows or hides the vertical x-line, when the crosshair cursor hovers the chart (available for xy-chart types only) // showCursorYLine {boolean}, shows or hides the horizontal y-line, when the crosshair cursor hovers the chart (available for xy-chart types only) // /////////////////////////////////////////////////////////// /** * @class * @description The CursorOptions object defines 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. Use the cursor option to specify different configuration options to show the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes). *
*

For instance, the "visible" option:

*
* cursor: * { * visible: true * } *
* shows the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes) *
*/ exontrol.Graph.CursorOptions = { /** * @description The visible field shows or hides the cursor (crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes). The "cursorLine" shape defines the visual-appearance (frameColor, frameSize, frameDash) to display the crosshair over the hover/touch area. * @type {boolean} * @example: * * null {null}, by default, the cursor is hidden * true {boolean}, shows the crosshair over the hover/touch area, tooltips for some or all nearby series data items, as well as tooltips on axes * */ visible: false, /** * @description The smooth field defines the time in ms the cursor goes from one layout to another. * @type {number} * @example * * null {null}, inherits the smooth option of the control * 0 {number}, no smooth changes once the cursor goes from a layout to another * 125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms. */ smooth: 62, /** * @description The showCursorCategoryLine field specifies the flags to show the vertical/horizontal category/x-line, when the crosshair cursor hovers the chart. * @type {ShowCursorCategoryLineEnum} * @example * * null {null}, no vertical/horizontal category/x-line is shown * "near" {string} or 1 {number}, the vertical/horizontal category/x-line is shown when the pointer is near the category */ showCursorCategoryLine: 2 /*exShowAsIs*/, /** * @description The showCursorSerieTooltip field defines the flags to show the tooltips, when the crosshair cursor hovers the charts of the series. * @type {ShowCursorSerieTooltipEnum} * @example * * null {null}, no tooltip is displayed when the crosshair cursor hovers the chart * "near" {string} or 1 {number}, the vertical/horizontal category/x-line indicates the series whose tooltip is displayed, when the crosshair cursor hovers the chart (default) */ showCursorSerieTooltip: 1 /*exShowNear*/, /** * @description The showCursorValueLine field shows or hides the horizontal/vertical value/y-line, when the crosshair cursor hovers the chart * @type {boolean} * @example * * null {null}, the horizontal/vertical value/y-line is shown * false {boolean}, the horizontal/vertical value/y-line is hidden * true {boolean}, the horizontal/vertical value/y-line is shown when the pointer hovers the chart */ showCursorValueLine: true, /** * @description The showCursorXLine field shows or hides the vertical y-line, when the crosshair cursor hovers the chart (available for xy-chart types only) * @type {boolean} * @example * * null {null}, the vertical y-line is shown * false {boolean}, the vertical y-line is hidden * true {boolean}, the vertical y-line is shown when the pointer hovers the chart */ showCursorXLine: true, /** * @description The showCursorYLine field shows or hides the horizontal x-line, when the crosshair cursor hovers the chart (available for xy-chart types only) * @type {boolean} * @example * * null {null}, the horizontal x-line is shown * false {boolean}, the horizontal x-line is hidden * true {boolean}, the horizontal x-line is shown when the pointer hovers the chart */ showCursorYLine: true, } /////////////////////////////////////////////////////////// (exontrol.Graph.LegendOptions) (LegendOptions) // // The LegendOptions object defines the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime) // // The LegendOptions type defines the following fields: // // visible {boolean}, shows or hides the legend // pad {(number|string|array)}, defines the legend's padding (space between legend's symbol and label) // reverse {boolean}, reverses the order of the items within the legend // formatText {exontrol.DrawTextFormatEnum}, specifies the flags the labels use to display on the legend // labelFixedWidth {number}, indicates the fixed-width of the label // labelFixedHeight {number}, indicates the fixed-height of the label // symbolAlign {LegendSymbolAlignmentEnum}, specifies the alignment of the symbol of the serie relative to the label of the serie // symbolWidth {number}, indicates the width to display the symbol // symbolHeight {number}, indicates the height to display the symbol // dock {PanelDockEnum}, specifies the edge of the container the legend-window is anchored to // flow {LegendFlowEnum}, determines whether the legend objects are arranged from left to right or top to bottom // grid {any}, the number of columns or rows that the legend divides its content into. The grid field can be any of the following: // align {LegendAlignEnum}, specifies the alignment of the legend's content // locked {boolean}, indicates whether the legend is locked(protected) or unlocked // /////////////////////////////////////////////////////////// /** * @class * @description The LegendOptions object defines the configuration options to display the view's legend (the legend helps you choose which series to show or hide at runtime) *
*

For instance, the "visible" option:

*
* legend: * { * visible: true * } *
* shows the legend *
*/ exontrol.Graph.LegendOptions = { /** * @description The visible field shows or hides the legend. * @type {boolean} * @example: * * null {null}, by default, the legend is hidden * true {boolean}, shows the legend * */ visible: false, /** * @description The pad field defines the legend's padding (space between legend's symbol and label). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size. * @type {(number|string|array)} * @example * * null {null}, indicates that the default-padding field is used ([4,4]) * 0 {number}, indicates no padding * 2 {number}, indicates a 2-pixels horizontal padding and 2-pixels vertical padding * "8,4" {string}, indicates 8-pixels horizontal padding and 4-pixels vertical padding * [8,4] {array}, indicates 8-pixels horizontal padding and 4-pixels vertical padding * */ pad: [4,4], /** * @description The reverse field reverses the order of the items within the legend. * @type {boolean} * @example: * * null {null}, by default, the items are ordered by their original-position (as they were added, unless the Position property of the Serie object has not been used) * true {boolean}, reverses the order of the items within the legend * */ reverse: false, /** * @description The formatText field specifies the flags the labels use to display on the legend. * * 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: * * null {null}, by default, the label can display on multiple lines * "center,vcenter,single" {string} or exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextSingleLine {exontrol.DrawTextFormatEnum} or 0x105 {number}, centers the label on a single line * */ formatText: 0, /** * @description The labelFixedWidth field indicates the fixed-width to display the labels * @type {number} * @example: * * null {null} or 0 {number}, by default, the labelFixedWidth has no effect * 64 {number}, fixes the label on a 64-pixel wide rectangle * */ labelFixedWidth: 0, /** * @description The labelFixedHeight field indicates the fixed-height to display the labels * @type {number} * @example: * * null {null} or 0 {number}, by default, the labelFixedHeight has no effect * 64 {number}, fixes the label on a 64-pixel tall rectangle * */ labelFixedHeight: 0, /** * @description The symbolAlign field specifies the alignment of the symbol of the serie relative to the label of the serie. The exTop, exBottom, exLeft and exRight flags can be combined with exStart, exCenter or exEnd flags. * @type {LegendSymbolAlignmentEnum} * @example: * * null {null}, by default, the symbol is placed to the left and vertically centered relative to the label * "right" {string} or exontrol.Graph.LegendSymbolAlignmentEnum.exRight {LegendSymbolAlignmentEnum} or 4 {number}, right-aligns the symbol relative with the label * */ symbolAlign: 0x13 /*exontrol.Graph.LegendSymbolAlignmentEnum.exCenter | exontrol.Graph.LegendSymbolAlignmentEnum.exLeft*/, /** * @description The symbolWidth field indicates the width to display the symbol * @type {number} * @example: * * null {null}, by default, the symbolWidth is equivalent with the font's height * 0 {number}, no symbol is shown * 8 {number}, the symbol's width is fixed to 8-pixels wide * */ symbolWidth: null, /** * @description The symbolHeight field indicates the height to display the symbol * @type {number} * @example: * * null {null}, by default, the symbolHeight is equivalent with the font's height * 0 {number}, no symbol is shown * 4 {number}, the symbol's height is fixed to 4-pixels tall * */ symbolHeight: null, /** * @description The dock field specifies the edge of the container the legend-window is anchored to * @type {PanelDockEnum} * @example: * * null {null}, by default, the legend is anchored to the bottom-side of the view * "left" {string} or exontrol.Graph.PanelDockEnum.exLeft or 3 {number}, the legend is docked to the left side of the control * */ dock: 2 /*exontrol.Graph.PanelDockEnum.exBottom*/, /** * @description The flow field determines whether the legend objects are arranged from left to right or top to bottom * @type {LegendFlowEnum} * @example: * * null {null} or exontrol.Graph.LegendFlowEnum.exLeftToRight or 0 {number}, by default, the legend objects are aligned left to right while the legend panel is anchored to the top or bottom side of the view. Otherwise, the legend objects are vertically arranged. * "top" {string} or exontrol.Graph.PanelDockEnum.exTopToBottom or 1 {number}, indicates that the next legend object gets arranged to the bottom of the current legend object * */ flow: 0 /*exontrol.Graph.PanelDockEnum.exLeftToRight*/, /** * @description The grid field indicates the number of columns or rows that the legend divides its content into. The grid field can be any of the following: * * {number}, defines a number that specifies the number of columns to divide the legend * {string}, defines a string of "columns x rows" type that defines the number of columns and / or rows to arrange the legend objects. The columns and rows can be omitted. * {array}, indicates a two-elements array of [columns,rows] type that specifies the columns and / or rows to arrange the legend objects * * @type {any} * @example: * * null {null}, by default, the number of columns, rows is not defined, so the legend objects are arranged for best fit * "x2" {string} or [0,2] {array}, defines a maxium 2-rows arrangement * "3 x 2" {string} or [3,2] {array}, defines a maxium 3-columns or 2-rows arrangement * */ grid: null, /** * @description The align field specifies the alignment of the legend's content * @type {LegendAlignEnum} * @example: * * null {null} or exontrol.Graph.LegendAlignEnum.exCenter or 1 {number}, by default, centers the legend's content * "start" {string} or exontrol.Graph.LegendAlignEnum.exStart or 0 {number}, the legend's content is aligned to the start (left or top side of the view) * */ align: 1 /*exontrol.Graph.LegendAlignEnum.exCenter*/, /** * @description The locked field indicates whether the legend is locked(protected) or unlocked * @type {boolean} * @example * * false {boolean}, unlocks the legend (can show or hide the serie) * true {boolean}, locks the legend (can't show or hide the serie) */ locked: false, } /////////////////////////////////////////////////////////// (exontrol.Graph.OverviewOptions) // // The OverviewOptions object defines the configuration options to display the overview. The overview displays the map of the entire series without a scroll bar. // // The OverviewOptions type defines the following fields: // // visible {boolean}, shows or hides the overview (the overview displays the map of the entire series without a scroll bar) // dock {PanelDockEnum}, specifies the edge of the container the overview-window is anchored to // size {number}, specifies the size of the control's overview // serie {string}, specifies a serie or multiple series separated by comma to be represented within the overview-map // line {LineOptions}, defines the configuration options for displaying the lines of values in the overview // /////////////////////////////////////////////////////////// /** * @class * @description The OverviewOptions object defines the configuration options to display *
*

For instance, the "visible" option:

*
* overview: * { * visible: true * } *
* shows the overview *
*/ exontrol.Graph.OverviewOptions = { /** * @description The visible field shows or hides the overview. The overview-window is visible only for area-compatible chart types. * @type {boolean} * @example: * * null {null}, by default, the overview is hidden * true {boolean}, shows the overview (the overview displays the map of the entire series without a scroll bar) * */ visible: false, /** * @description The dock field specifies the edge of the container the overview-window is anchored to. The overview map is shown from top to bottom when the overview window is docked to the left or right side of the view. * @type {PanelDockEnum} * @example: * * null {null}, by default, the overview is anchored to the top-side of the view * "bottom" {string} or exontrol.Graph.PanelDockEnum.exBottom or 2 {number}, the overview is docked to the bottom side of the control * */ dock: 1 /*exontrol.Graph.PanelDockEnum.exTop*/, /** * @description The size field specifies the size of the control's overview. * @type {number} * @example: * * null {null}, by default, the overview's size is 64-pixels * 32 {number}, sets the overview's size to 32-pixels tall (if anchored to the top or bottom side) * */ size: 64, /** * @description The serie field specifies a serie or multiple series separated by comma to be represented within the overview-map. The format of a particular element of the serie field is "KEY[\[INNER\]][:[COLOR][-fill [FILLCOLOR]]]", where KEY is the name or the index of the serie, INNER is the inner-index of the value to represent (valid for multi-dimensional array only), COLOR specifies a perticular color to show the overview-line for giving serie (if COLOR is missing, the seriesColors option defines the color to show overview-line) and FILLCOLOR specifies a different color to fill the overview-curve. The overview can show lines or surfaces for one or more series. * @type {string} * @example: * * null {null}, by default, the overview-map shows the first serie (while it is valid and compatible with area-chart types) * "0,1" {string}, indicates that first two series are represented within the overview. * "0:black,0[1]:red,0[2]:blue,0[3]:green" {string}, shows four overview-lines for the first, second, third and forth-dimension of the same serie (the first serie with the index 0) * "2:-fill,0" {string}, the overview shows the first and third series (the third serie is filled) * "0:black-fill rgba(0\\,0\\,0\\,0.25)" {string}, shows the first serie filled with a semi-transparent color and contoured in black * */ serie: "0", /** * @description The line field defines the configuration options for displaying the lines of values in the overview * @type {LineOptions} * @example: * * null {null}, indicates a solid 1-pixel wide overview-line (the color of line is indicated by the color of the serie) * {color: "red", width: 2} {LineOptions}, indicates a solid-red 2-pixels wide overview-line * */ line: null, } /////////////////////////////////////////////////////////// (exontrol.Shapes.Graph) // // The exontrol.Shapes.Graph namespace provides support to customize the visual appearance of different parts of the exontrol.Graph object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.Graph namespace provides support to customize the visual appearance of different parts of the exontrol.Graph object. */ exontrol.Shapes.Graph = { /** * @description The shvaluePoint field specifies the visual appearance to display the value-points * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shvaluePoint: { /** * @description The normal field includes definitions to draw the value-points of the chart * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { size: 8, // {number} specifies the size of the value-point frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: "white", // {string} defines the color to show the object's background primitive: "Circle" // {string} defines the primitive of the shape } }, /** * @description The shvalueLine field specifies the visual appearance to display the value-lines * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shvalueLine: { /** * @description The normal field includes definitions to draw the value-lines of the chart * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { length: 18, // {number} indicates the horizontal distance between the middle and end points of the value-line frameColor: null, // {string} defines the color to show the object's frame } }, /** * @description The shvalueBack field specifies the visual appearance to display the value's background * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shvalueBack: { /** * @description The normal field includes definitions to draw the value's background * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameColor: null, // {string} defines the color to show the object's frame pad: 4 // {number} specifies how much the object's client area is increased or decreased } }, /** * @description The shradarLine field specifies the visual appearance to display the series of "radarLine" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shradarLine: { /** * @description The normal field includes definitions to display the series of "radarLine" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shradarArea field specifies the visual appearance to display the series of "radarArea" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shradarArea: { /** * @description The normal field includes definitions to display the series of "radarArea" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shradarColumn field specifies the visual appearance to display the series of "radarColumn" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shradarColumn: { /** * @description The normal field includes definitions to display the series of "radarColumn" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Pie", // {string} defines the primitive of the shape } }, /** * @description The shpolarLine field specifies the visual appearance to display the series of "polarLine" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shpolarLine: { /** * @description The normal field includes definitions to display the series of "polarLine" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shpolarArea field specifies the visual appearance to display the series of "polarArea" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shpolarArea: { /** * @description The normal field includes definitions to display the series of "polarArea" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shpolarScatter field specifies the visual appearance to display the series of "polarScatter" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shpolarScatter: { /** * @description The normal field includes definitions to display the series of "polarScatter" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { size: 6, // {number} specifies the size of the data-point on the chart frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Circle" // {string} defines the primitive of the shape } }, /** * @description The shpie field specifies the visual appearance to display the series of "pie" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shpie: { /** * @description The normal field includes definitions to display the series of "pie" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: "white", // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "PieRing" // {string} defines the primitive of the shape //fillGradientColor: "rad,null,null,white" // {string}defines the color to show the object's background in gradient colors } }, /** * @description The shscatterLine field specifies the visual appearance to display the series of "scatterLine" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shscatterLine: { /** * @description The normal field includes definitions to display the series of "scatterLine" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shscatterArea field specifies the visual appearance to display the series of "scatterArea" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shscatterArea: { /** * @description The normal field includes definitions to display the series of "scatterArea" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shscatter field specifies the visual appearance to display the series of "scatter" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shscatter: { /** * @description The normal field includes definitions to display the series of "scatter" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { size: 6, // {number} specifies the size of the data-point on the chart frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Circle" // {string} defines the primitive of the shape } }, /** * @description The shbubble field specifies the visual appearance to display the series of "bubble" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shbubble: { /** * @description The normal field includes definitions to display the series of "bubble" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { size: 128, // {number} specifies the maximum-size of the data-point on the chart frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Circle" // {string} defines the primitive of the shape } }, /** * @description The shline field specifies the visual appearance to display the series of "line" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shline: { /** * @description The normal field includes definitions to display the series of "line" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The sharea field specifies the visual appearance to display the series of "area" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ sharea: { /** * @description The normal field includes definitions to display the series of "area" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shcolumn field specifies the visual appearance to display the series of "column" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shcolumn: { /** * @description The normal field includes definitions to display the series of "column" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { //frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background //primitive: "RoundRect" // {string} defines the primitive of the shape } }, /** * @description The shwaterFall field specifies the visual appearance to display the series of "waterFall" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shwaterFall: { /** * @description The normal field includes definitions to display the series of "waterFall" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { //lineSize: 1, // {number} defines size of to draw the lines between columns //frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background //primitive: "RoundRect" // {string} defines the primitive of the shape } }, /** * @description The shrangeColumn field specifies the visual appearance to display the series of "rangeColumn" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shrangeColumn: { /** * @description The normal field includes definitions to display the series of "rangeColumn" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { //frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background //primitive: "RoundRect" // {string} defines the primitive of the shape } }, /** * @description The shrangeArea field specifies the visual appearance to display the series of "rangeArea" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shrangeArea: { /** * @description The normal field includes definitions to display the series of "rangeArea" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background primitive: "Polygon" // {string} defines the primitive of the shape } }, /** * @description The shcandleStick field specifies the visual appearance to display the series of "candleStick" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shcandleStick: { /** * @description The normal field includes definitions to display the series of "candleStick" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { //size: 1, // {number} specifies the size of the stick hollow: true, // {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.) //frameSize: 2, // {number} defines size of the object's frame frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background //primitive: "RoundRect" // {string} defines the primitive of the shape } }, /** * @description The shohlc field specifies the visual appearance to display the series of "ohlc" type * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shohlc: { /** * @description The normal field includes definitions to display the series of "ohlc" type * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { //size: 1, // {number} specifies the size of the stick //hollow: true, // {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.) frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background //primitive: "RoundRect" // {string} defines the primitive of the shape } }, /** * @description The shcursorLine field specifies the visual appearance to display the crosshair over the hover/touch area * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shcursorLine: { /** * @description The normal field includes definitions to display the crosshair over the hover/touch area * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { frameDash: 2 // {{number|number[]}} defines style of the shape's frame } }, /** * @description The shcursorAxisTooltip field specifies the visual appearance to show the cursor's tooltip on the axes * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shcursorAxisTooltip: { /** * @description The normal field includes definitions to show the cursor's tooltip on the axes * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background. */ normal: { tfi: "", // {string} indicates the font-attributes to show the object's caption/text fillColor: "black", // {string} defines the color to show the object's background pad: 2, // {number} specifies how much the object's client area is increased or decreased } }, /** * @description The shcursorSerieTooltip field specifies the visual appearance for the tooltip when the crosshair cursor hovers the charts of the series * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shcursorSerieTooltip: { /** * @description The normal field includes definitions for the tooltip when the crosshair cursor hovers the charts of the series * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background */ normal: { frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background pad: 4, // {number} specifies how much the object's client area is increased or decreased primitive: "Round" // {string} defines the primitive of the shape } }, /** * @description The shlegendSymbol field specifies defines the visual-appearance of the symbols of the visible-series within the map legend * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shlegendSymbol: { /** * @description The normal field includes definitions for the series into the legend * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background */ normal: { frameColor: null, // {string} defines the color to show the object's frame fillColor: null, // {string} defines the color to show the object's background } }, /** * @description The shlegendSymbolHidden field specifies defines the visual-appearance of the symbols of the hidden-series within the map legend * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shlegendSymbolHidden: { /** * @description The normal field includes definitions for the series into the legend * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background */ normal: { tfi: "", // {string} indicates the font-attributes to show the object's caption/text fillColor: "gray", // {string} defines the color to show the object's background opacity: 0.5 // {number} sets the opacity level of the object, as a number between 0.0 (fully transparent) and 1.0 (fully opaque) } }, /** * @description The shlegendLabel field specifies defines the visual-appearance of the labels of the visible-series within the map legend * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shlegendLabel: { /** * @description The normal field includes definitions for the series into the legend * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background */ normal: { } }, /** * @description The shlegendLabelHidden field specifies defines the visual-appearance of the labels of the hidden-series within the map legend * @type {object} Indicates an object of {normal,disabled,hover,click} type */ shlegendLabelHidden: { /** * @description The normal field includes definitions for the series into the legend * @type {object} An object of exontrol.Def.Shape type to be applied on the part's background */ normal: { tfi: "", // {string} indicates the font-attributes to show the object's caption/text opacity: 0.5 // {number} sets the opacity level of the object, as a number between 0.0 (fully transparent) and 1.0 (fully opaque) } }, /** * @description The shrect field specifies a rectangular-primitive * @type {object} Indicates an object of exontrol.Def.Shape type */ shrect: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { primitive: "Rect" } }, }