Serie class (Graph)

Serie(oSeries, oSerieOpts)

new Serie(oSeries, oSerieOpts)

The Serie object holds the serie of the control. The Serie(id) method returns the serie based on its index or identifier/key.

Every option of the SerieOptions type has associated a property of the Serie object. For instance, the option:

cursor {string}, defines the mouse-cursor for individual serie
is associated with the property:
Cursor {string}, defines the mouse-cursor for individual serie
which means that the following statements are equivalent:
oSerie.Options = {cursor: "pointer"}
oSerie.SetOptions({cursor: "pointer"})
oSerie.Cursor = "pointer"
oSerie.SetCursor("pointer")
where oSerie is an object of Serie type
Parameters:
Name Type Description
oSeries Serie Indicates an object of Series type that's the owner collection of this serie
oSerieOpts SerieOptions Specifies the options to apply on the serie
Serie

Methods

GetAxis() → {string}

The GetAxis() method returns the name of the value axis the current serie uses. The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use...
Returns:
Returns the name of the value axis the current serie uses
Type
string
GetAxis

GetCursorFormat() → {string}

The GetCursorFormat() method 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 inner-value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for columnRange chart-type, %V1 gets the high-value for candleStick chart-type or to for columnRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Returns:
Returns the expression to customize the tooltips, when the crosshair cursor hovers the charts of the series.
Type
string
GetCursorFormat

GetData() → {number|string|array|object}

The GetData() method defines the values of the serie.
Returns:
Returns the values of the serie, as any of the following:
  • {number}, which can 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
  • {string}, which can 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
  • {array}, which can indicate:
    • array of numbers ({number[]}) for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type
    • array of array of two-numbers, 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, such as [[x, y, size] for "bubble" chart-type
    • array of array of four-numbers, such as [[open, high, low, close]] for "candleStick" and "ohlc" chart-type
  • {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
GetData

GetIndex() → {any}

The GetIndex() method retrieves the serie's index.
Returns:
Returns the serie's index (0-based)
Type
any
Example
The following statements are equivalents:

 oSerie.GetIndex(), retrieves the serie's index
 oSerie.Index, retrieves the serie's index

where oSerie is an object of Serie type
GetIndex

GetKey() → {string}

The GetKey() method returns the serie's key.
Returns:
Returns the serie's exHTML key it displays
Type
string
GetKey

GetLegendFormat() → {string}

The GetLegendFormat() method specifies an expression to customize the serie's label to show on the legend. The format-expression supports predefined constants, operators and keywords as explained:
  • "index" keyword gets the index of the serie
  • "name" keyword defines the name of the serie
  • "visible" keyword indicates whether the serie is visible or hidden
  • "percent" keyword defines the percent associated with the serie, as a number between 0 and 100 (available only if applicable)
Returns:
Returns the expression to customize the serie's label to show on the legend.
Type
string
GetLegendFormat

GetName() → {string}

The GetName() method returns the name of the chart serie which is visible in the legend.
Returns:
Returns the name of the chart serie which is visible in the legend
Type
string
GetName

GetOptions() → {object}

The GetOptions() method returns the serie's options at once
Returns:
Returns an object of SerieOptions type
Type
object
Example
The following statements are equivalents:

 oSerie.GetOptions(), returns the serie's options
 oSerie.Options, returns the serie's options

where oSerie is an object of Serie type
GetOptions

GetPosition() → {any}

The GetPosition() method retrieves the serie's position.
Returns:
Returns the serie's position
Type
any
Example
The following statements are equivalents:

 oSerie.GetPosition(), retrieves the serie's position
 oSerie.Position, retrieves the serie's position

where oSerie is an object of Serie type
GetPosition

GetShape() → {any}

The GetShape() method defines the shape for the serie itself.
Returns:
Returns the shape for the serie itself, as one of the following:
  • null, no custom-shape is applied on the object (default-shape may be applied instead)
  • the 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
  • an object of {normal,hover,click,disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type
Type
any
GetShape

GetShowValue() → {exontrol.Graph.ShowValueEnum}

The GetShowValue() method determines whether the serie's values are visible or hidden
Returns:
Returns the flags to display the serie's values
Type
exontrol.Graph.ShowValueEnum
GetShowValue

GetStack() → {string}

The GetStack() method 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.
Returns:
Returns a non-empty value if the serie is stacked
Type
string
GetStack

GetStyle() → {exontrol.Graph.SerieStyleEnum}

The GetStyle() method 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"
Returns:
Returns a SerieStyleEnum expression that specifies how the values of the serie get connected
Type
exontrol.Graph.SerieStyleEnum
GetStyle

GetType() → {string}

The GetType() method returns the type of the serie (the way the data is represented). The type could be partial complete. For instance, "water" means "waterfall", "candle" indicates "candleStick". By default, the chart-type is "column" if the type is unknown.
Returns:
Returns the type of the serie 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)
  • "polarArea" {string}, represents data points connected with straight line segments that enclose a filled area together with the chart pole (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "polarLine" {string}, represents data points connected with straight line segments (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "polarScatter" {string}, shows the serie as non-connected data points (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "scatter" {string}, a scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "scatterLine" {string}, a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "scatterArea" {string}, a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "bubble" {string}, a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables.). Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. (data requires array of array of three-numbers, such as [[x, y, size]], supports vertical field, non-scrollable)
  • "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
  • "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
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
GetType

GetValueFormat() → {string}

The GetValueFormat() method 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 inner-value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for columnRange chart-type, %V1 gets the high-value for candleStick chart-type or to for columnRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Returns:
Returns the format to customize the values
Type
string
GetValueFormat

GetVertical() → {boolean}

The GetVertical() method 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.
Returns:
Returns true if the data is represented vertically or horizontally. The vertical option is valid for "area", "line", "column", "waterfall", "waterfall", "rangeArea" and "rangeColumn" chart types. The vertical option is not valid for "radarArea", "radarLine", "radarColumn", "pie", "polarArea", "polarLine", "polarScatter", "scatter", "scatterLine", "bubble", "candleStick" and "ohlc" chart-types.
Type
boolean
GetVertical

GetVisible() → {boolean}

The GetVisible() method determines whether the serie is visible or hidden
Returns:
Returns true if the serie is visible, or false if the serie is not visible
Type
boolean
GetVisible

Remove()

The Remove() method removes the serie itself from the series collection
Remove

SetAxis(value)

The SetAxis() method sets the name of the value axis the current serie uses. The unrefered value axes shows the data as provided by the default value axis. The axis option of the Serie object specifies the name of the value axis to use...
Parameters:
Name Type Description
value string Specifies the name of the value axis the current serie uses
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)
SetAxis

SetCursorFormat(value)

The SetCursorFormat() method
Parameters:
Name Type Description
value string Specifies the 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 inner-value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for columnRange chart-type, %V1 gets the high-value for candleStick chart-type or to for columnRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Example
null {null} or "``" {string}, no tooltip is shown
 "value format ``" {string}, displays the values using two-decimals (according with the current regional settings)
SetCursorFormat

SetData(value)

The SetData() method sets the values of the serie
Parameters:
Name Type Description
value number | string | array | object Specifies the values of the serie, as any of the following:
  • value {number}, the value parameter 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
  • value {string}, the value parameter 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
  • value {array}, the value parameter could indicate:
    • array of numbers ({number[]}) for "area", "line", "column", "waterfall", "radarArea", "radarLine", "radarColumn" or "pie" chart-type
    • array of array of two-numbers, 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, such as [[x, y, size] for "bubble" chart-type
    • array of array of four-numbers, such as [[open, high, low, close]] for "candleStick" and "ohlc" chart-type
  • value {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.
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, close])
 "1,2,3,4" {string}, adds values for "column" chart-type (if the control's <a href="Graph.html#SetData">Data</a> 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 <a href="Graph.html#SetData">Data</a> 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")
SetData

SetKey(value)

The SetKey() method assigns a new key to the serie
Parameters:
Name Type Description
value string Specifies a new key to be assigned to the serie
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.
SetKey

SetLegendFormat(value)

The SetLegendFormat() method sets the expression to customize the serie's label to show on the
Parameters:
Name Type Description
value string Specifies the expression to customize the serie's label to show on the legend. The format-expression supports predefined constants, operators and keywords as explained:
  • "index" keyword gets the index of the serie
  • "name" keyword defines the name of the serie
  • "visible" keyword indicates whether the serie is visible or hidden
  • "percent" keyword defines the percent associated with the serie, as a number between 0 and 100 (available only if applicable)
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
SetLegendFormat

SetName(value)

The SetName() method sets the name of the chart serie which is visible in the legend
Parameters:
Name Type Description
value string Specifies the name of the chart serie which is visible in the legend
Example
null {null}, defines no name for the serie within the legend
 "Germany" {string}, defines the name "Germany" for the current serie
SetName

SetOptions(oOptions)

The SetOptions() method changes the serie's options (visibility, caption, ...) at once
Parameters:
Name Type Description
oOptions object Specifies an object of SerieOptions type that holds information about the serie, such as caption, image and so on. If the oOptions parameter is not-of object type it indicates the serie's caption instead
Example
oGraph.Serie(0).Options = {shape: "red", height: 32}, changes the serie's height and background
 oGraph.Serie(0).SetOptions({shape: "red", height: 32}), changes the serie's height and background
SetOptions

SetPosition(value)

The SetPosition() method changes the serie's position.
Parameters:
Name Type Description
value number Specifies the serie's new position
SetPosition

SetShape(value)

The SetShape() method changes the shape for the serie itself.
Parameters:
Name Type Description
value any The value could be any of the following:
  • null, no custom-shape is applied on the object (default-shape may be applied instead)
  • the 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
  • an object of {normal,hover,click,disabled} type. The normal, hover, click and disabled are objects of exontrol.Def.Shape type
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
SetShape

SetShowValue(value)

The SetShowValue() method shows or hides the serie's value-points, value-lines and values
Parameters:
Name Type Description
value exontrol.Graph.ShowValueEnum Specifies the flags to show the serie's value-points, value-lines and values
Example
0 {number}, no value, value-line or value-point is displayed
 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
SetShowValue

SetStack(value)

The SetStack() method 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.
Parameters:
Name Type Description
value string Indicates that the series should be stacked in a group with the specified value.
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
SetStack

SetStyle(value)

The SetStyle() method changes 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"
Parameters:
Name Type Description
value exontrol.Graph.SerieStyleEnum Specifies the way the values of the serie get connected, as one of the following values:
  • "normal", the values get connected with straight line
  • "spline", the values get connected with a spline curve
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
SetStyle

SetType(value)

The SetType() method sets the type of the serie (the way the data is represented). The type could be partial complete. For instance, "water" means "waterfall", "candle" indicates "candleStick". By default, the chart-type is "column" if the type is unknown.
Parameters:
Name Type Description
value string Specifies the type of the serie 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)
  • "pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-scrollable)
  • "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
  • "polarArea" {string}, represents data points connected with straight line segments that enclose a filled area together with the chart pole (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "polarLine" {string}, represents data points connected with straight line segments (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "polarScatter" {string}, shows the serie as non-connected data points (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
  • "scatter" {string}, a scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "scatterLine" {string}, a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "scatterArea" {string}, a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
  • "bubble" {string}, a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables.). Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. (data requires array of array of three-numbers, such as [[x, y, size]], supports vertical field, non-scrollable)
  • "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
  • "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
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.
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)
SetType

SetValueFormat(value)

The SetValueFormat() method specifies the expression to customize the values to display on the chart (showValue property includes the exValue)
Parameters:
Name Type Description
value string Indicates the format-expression to cusomize the value. 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 inner-value at specified index, such as %V0 gets the open-value for candleStick chart-type or from for columnRange chart-type, %V1 gets the high-value for candleStick chart-type or to for columnRange chart-type, %V2 gets the low-value for candleStick chart-type, %V3 gets the close-value for candleStick chart-type (if not available gets the "value")
Example
null {null}, the name of the serie followed by the value, "(name ? name + ': ' : '') + value"
 "``" {string}, no value is shown
 "value format ``" {string}, displays the values using two-decimals (according with the current regional settings)
SetValueFormat

SetVertical(value)

The SetVertical() method shows the data 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.
Parameters:
Name Type Description
value boolean Specifies whether the data is represented vertically or horizontally. The vertical option is valid for "area", "line", "column", "waterfall", "waterfall", "rangeArea" and "rangeColumn" chart types. The vertical option is not valid for "radarArea", "radarLine", "radarColumn", "pie", "polarArea", "polarLine", "polarScatter", "scatter", "scatterLine", "bubble", "candleStick" and "ohlc" chart-types.
Example
false {boolean} or null {null}, the data is represented horizontally (by default)
 true {boolean}, the data is represented vertically, valid for "area", "line", "column", "waterfall", "waterfall", "rangeArea" and "rangeColumn" chart types.
SetVertical

SetVisible(value)

The SetVisible() method shows or hides the serie within the chart-view (it is still visible within the legend)
Parameters:
Name Type Description
value boolean Indicates a boolean expression that specifies whether the serie is visible or hidden
Example
false {boolean}, hides the serie within the chart-view
 true {boolean}, shows the serie
SetVisible