new SerieOptions()
The SerieOptions type holds all options an Serie can display or own
Every option of the SerieOptions type has associated a property of the Serie object. For instance, the option:
visible {boolean}, shows or hides the serie within the chart-view (it is still visible within the legend)is associated with the property:
Visible {boolean}, shows or hides the serie within the chart-view (it is still visible within the legend)which means that the following statements are equivalent:
oSerie.Options = {visible: false}where oSerie is an object of Serie type
oSerie.SetOptions({visible: false})
oSerie.Visible = false
oSerie.SetVisible(false)
Members
(static) axis :string
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)(static) cursorFormat :string
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 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")
Type:
- string
(static) data :number|string|array|object
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, 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
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, 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")(static) key :string
The key field specifies the key associated with the serie. Specifies the key associated with the serie. If no key is provided, the serie's plain-caption can be used to request a serie. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on.
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.(static) legendFormat :string
The legendFormat field defines the expression used to customize the label of the series displayed on the legend panel. 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
- "label" keyword specifies the label to display (could be the category or 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)
Type:
- string
(static) name :string
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(static) shape :any
The shape field defines the visual appearance to represent the serie.
The shape field can be any of the following:
- 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
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(static) showValue :exontrol.Graph.ShowValueEnum
The showValue field shows or hides the serie's value-points, value-lines and values.
Type:
- exontrol.Graph.ShowValueEnum
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(static) stack
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"
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(static) style :SerieStyleEnum
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"
Type:
- SerieStyleEnum
Example
null {null}, the values will be connected with straight line (by default)
Graph.SerieStyleEnum.exSpline {SerieStyleEnum}, the values get connected with a spline curve(static) type :string
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)
- "pie" {string}, a pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. (data requires array of numbers, non-scrollable)
- "rangeArea" {string}, a range chart displays sets of data points, each of which is defined by multiple values for the same category, and emphasizes the distance between the two values. The category labels are displayed on the category axis. The plain Range chart fills in the area between the top and the bottom value for each data point. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
- "rangeColumn" {string}, a range column chart displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to; in multiple-series range column charts, values are grouped by categories. (data requires array of array of two-numbers, such as [[from, to]], supports vertical field, scrollable)
- "polarArea" {string}, represents data points connected with straight line segments that enclose a filled area together with the chart pole (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "polarLine" {string}, represents data points connected with straight line segments (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "polarScatter" {string}, shows the serie as non-connected data points (data requires array of array of two-numbers, such as [[angle, value]], non-scrollable)
- "scatter" {string}, a scatter plot (also called a scatterplot, scatter graph, scatter chart, scattergram, or scatter diagram) is a type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "scatterLine" {string}, a scatter line chart is similar with "scatter" type, excepts that lines are shown between scatter plots. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "scatterArea" {string}, a scatter area chart is similar with "scatterLine" type, excepts that scatter plots zone is filled. (data requires array of array of two-numbers, such as [[x, y]], supports vertical field, non-scrollable)
- "bubble" {string}, a bubble chart or bubble plot is a type of chart that displays three dimensions of data (a bubble chart is an extension of the scatter plot used to look at relationships between three numeric variables.). Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk's xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. (data requires array of array of three-numbers, such as [[x, y, size]], supports vertical field, non-scrollable)
- "candleStick" {string}, a candlestick chart (also called Japanese candlestick chart or K-line) is a style of financial chart used to describe price movements of a security, derivative, or currency. While similar in appearance to a bar chart, each candleStick represents four important pieces of information for that day: open and close in the thick body, and high and low in the "candle wick". Being densely packed with information, it tends to represent trading patterns over short periods of time, often a few days or a few trading sessions. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
- "ohlc" {string}, an open-high-low-close chart (also OHLC) is a type of chart typically used to illustrate movements in the price of a financial instrument over time. Each vertical line on the chart shows the price range (the highest and lowest prices) over one unit of time, e.g., one day or one hour. Tick marks project from each side of the line indicating the opening price (e.g., for a daily bar chart this would be the starting price for that day) on the left, and the closing price for that time period on the right. The bars may be shown in different hues depending on whether prices rose or fell in that period. (data requires array of array of four-numbers, such as [[open, high, low, close]], supports vertical field, scrollable)
Type:
- string
Example
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)(static) valueFormat :string
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 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")
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)(static) vertical :boolean
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", "pie", "polarArea", "polarLine", "polarScatter", "scatter", "scatterLine", "bubble", "candleStick" and "ohlc" 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", "line", "column", "waterfall", "waterfall", "rangeArea" and "rangeColumn" chart types.(static) visible :boolean
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 from the chart-view
true {boolean}, shows the serie