StockChartX Web & Mobile Class: Chart

new Chart(config)

Describes chart component.

Parameters:

Name Type Description

config

Object

The configuration object.

Properties

Name	Type	Argument	Description
`container`	String		The jQuery selector of html element to hold the chart.
`width`	Number	<optional>	The width of chart.
`height`	Number	<optional>	The height of chart.
`timeInterval`	Number	<optional>	The bars time interval in milliseconds. See StockChartX.TimeSpan for predefined values.
`theme`	Object	<optional>	The theme.
`instrument`	Instrument	<optional>	The instrument.
`priceStyle`	StockChartX.PriceStyle	<optional>	The price style.

Examples

Add div element into the html.

 <div id="chartContainer"></div>

Instantiate chart object.

 var chart = new StockChartX.Chart({
     container: '#chartContainer',
     width: 800,
     height: 600
 });

Also it is possible to use it as jQuery plugin.

 var chart = $('#chartContainer').StockChartX({
     width: 800,
     height: 600
 });

Members

<static, readonly> version :string

Gets chart version.

Type:

string

<readonly> chartPanels :Array.<StockChartX.ChartPanel>

An array of chart panels.

Type:

Array.<StockChartX.ChartPanel>

<readonly> chartPanelsContainer :StockChartX.ChartPanelsContainer

The chart panels container.

Type:

StockChartX.ChartPanelsContainer

<readonly> container :jQuery

The chart's parent container.

Type:

jQuery

<readonly> crossHair :StockChartX.CrossHair

The cross hair object.

Type:

StockChartX.CrossHair

crossHairType :StockChartX.CrossHairType

The cross hair type.

Type:

StockChartX.CrossHairType

<readonly> dataManager :StockChartX.DataManager

The data manager (manages data series).

Type:

StockChartX.DataManager

<readonly> dateScale :StockChartX.DateScale

The date scale.

Type:

StockChartX.DateScale

<readonly> firstVisibleIndex :number

Gets index of first visible record.

Type:

number

firstVisibleRecord :number

The first visible record.

Type:

number

<readonly> indicators :Array.<StockChartX.Indicator>

The array of chart indicators.

Type:

Array.<StockChartX.Indicator>

instrument :Instrument

The instrument.

Type:

Instrument

Example

chart.instrument = {
     symbol: 'GOOG',
     company: 'Google Inc.'
     exchange: 'NSDQ'
 };

isInFullWindowMode :boolean

Determines whether chart is in 'full window' mode.

Type:

boolean

See:

toggleFullWindow to enter/exit 'full window' mode.

keyboardEventsEnabled :boolean

The flag that indicates whether keyboard events should be processed.

Type:

boolean

Default Value:

true

Example

chart.keyboardEventsEnabled = true;     // enable keyboard events
 chart.keyboardEventsEnabled = false;    // disable keyboard events.

<readonly> lastVisibleIndex :number

Gets index of last visible record.

Type:

number

lastVisibleRecord :number

The last visible record.

Type:

number

locale :string

The locale string (e.g. 'en-US').

Type:

string

Default Value:

'en-US'

See:

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation

Example

chart.locale = 'uk-UA';

<readonly> mainPanel :StockChartX.ChartPanel

The main chart panel.

Type:

StockChartX.ChartPanel

priceStyle :StockChartX.PriceStyle

The price style.

Type:

StockChartX.PriceStyle

See:

StockChartX.PriceStyle

Example

chart.priceStyle = StockChartX.PriceStyle.BAR; // set 'bars' price style.

<readonly> recordCount :number

The number of records on the chart.

Type:

number

selectedObject :StockChartX.Drawing

The currently selected object.

Type:

StockChartX.Drawing

showDrawings :boolean

The flag that indicates whether drawings should be drawn.

Type:

boolean

Default Value:

true

size :StockChartX.Size

The size of chart.

Type:

StockChartX.Size

theme :Object

The chart theme.

Type:

Object

timeInterval

The bars time interval in milliseconds.

See:

StockChartX.TimeSpan

Example

chart.timeInterval = StockChartX.TimeSpan.MILLISECONDS_IN_DAY;      // set 1 day time interval
 chart.timeInterval = StockChartX.TimeSpan.MILLISECONDS_IN_HOUR * 4; // set 4 hours time interval

<readonly> valueScale :StockChartX.ValueScale

The value scale.

Type:

StockChartX.ValueScale

Methods

addChartPanel(index, heightRatio, shrinkMainPanel)

Adds new chart panel.

Parameters:

Name	Type	Argument	Description
`index`	Number	<optional>	The index to insert panel at.
`heightRatio`	Number	<optional>	The height ratio of new panel. The value in range (0..1).
`shrinkMainPanel`	Boolean	<optional>	True to shrink main panel, false to shrink all panels.

Returns:

The newly created chart panel.

Type: StockChartX.ChartPanel

Example

chart.addChartPanel();  // Add new chart panel.
 chart.addChartPanel(2); // Insert new chart panel at index 2.

addIndicators(indicators)

Adds one or more indicators.

Parameters:

Name	Type	Description
`indicators`	number \| StockChartX.Indicator \| Array.<number> \| Array.<StockChartX.Indicator>	The indicator(s) to be added. It can be TA indicator number or StockChartX.Indicator instance.

See:

removeIndicators to remove indicators.

Returns:

Added indicators.

Type: StockChartX.Indicator | Array.<StockChartX.Indicator>

Examples

Add bollinger bands indicator

 var bollingerBandsIndicator = chart.addIndicators(BollingerBands);

Add RSI and Bollinger bands indicators.

 var indicators = chart.addIndicators([RelativeStrengthIndex, BollingerBands]);

Configure and add indicator.

 var rsi = new StockChartX.TAIndicator({taIndicator: RelativeStrengthIndex});
 rsi.setParameterValue(StockChartX.IndicatorParam.PERIODS, 20);
 chart.addIndicators(rsi);

addValueScale(valueScale)

Adds new value scale.

Parameters:

Name	Type	Argument	Description
`valueScale`	StockChartX.ValueScale	<optional>	The value scale.

Returns:

StockChartX.ValueScale

appendBars(bars)

Appends values from single bar or an array of bars into the corresponding data series.

Parameters:

Name	Type	Description
`bars`	Bar \| Array.<Bar>	The single bar or an array of bars.

Example

// Append 1 bar
 chart.appendBars({
     date: new Date(),
     open: 100.0,
     high: 101.0,
     low: 99.0,
     close: 100.5,
     volume: 200
 });

 // Append 2 bars
 chart.appendBars({
 [
     {
         date: new Date(),
         open: 100.0,
         high: 101.0,
         low: 99.0,
         close: 100.5,
         volume: 200
     },
     {
         date: new Date(),
         open: 100.5,
         high: 101.0,
         low: 100.0,
         close: 100.2,
         volume: 300
     }
 ]
 });

barDataSeries()

Returns bar data series.

Returns:

An object with date, open, high, low, close, volume properties.

Type: StockChartX.BarDataSeries

Example

var obj = chart.barDataSeries();
 var dates = obj.date;       // Date data series
 var opens = obj.open;       // Open data series
 var highs = obj.high;       // High data series
 var lows = obj.low;         // Low data series
 var closes = obj.close;     // Close data series
 var volumes = obj.volume;   // Volume data series

cancelUserDrawing()

Cancels user drawing.

See:

startUserDrawing to start user drawing.

Example

chart.cancelUserDrawing();

clearDataSeries(dataSeries)

Removes all values from a given data series. Clears all values in all data series if parameter is omitted.

Parameters:

Name	Type	Argument	Description
`dataSeries`	String \| StockChartX.DataSeries	<optional>	The data series name or data series object.

dateRange(startDate, endDate)

Updates visible range to show values in a given date range.

Parameters:

Name	Type	Argument	Description
`startDate`	Date	<optional>	The start date.
`endDate`	Date	<optional>	The end date.

draw()

Draws chart.

findDataSeries(suffix)

Finds data series with a given suffix.

Parameters:

Name	Type	Description
`suffix`	String	The data series suffix.

Returns:

Type: StockChartX.DataSeries

Example

var dataSeries = chart.findDataSeries(StockChartX.OPEN_DATA_SERIES_SUFFIX);

findPanelAt(y)

Returns chart panel at a given Y coordinate.

Parameters:

Name	Type	Description
`y`	number	The Y coordinate.

Returns:

Type: StockChartX.ChartPanel

getBounds()

Returns chart bounds rectangle.

Returns:

Type: StockChartX.Rect

getCommonDataSeries()

Returns bar data series.

Deprecated:

since version 2.12.4

Returns:

Type: StockChartX.BarDataSeries

getDataSeries(name)

Returns data series with a given name.

Parameters:

Name	Type	Description
`name`	String	The data series name.

Returns:

Type: StockChartX.DataSeries

Example

var dataSeries = chart.getDataSeries("OpenInterest");

layout()

Layouts chart elements.

loadDrawingsState(state)

Loads drawings.

Parameters:

Name	Type	Description
`state`	String \| Object	The drawings state serialized by saveDrawingsState function.

See:

saveDrawingsState to save drawings.

Example

var state = chart.saveDrawingsState();
 chart.loadDrawingsState(state);

loadIndicatorsState(state)

Loads indicators state.

Parameters:

Name	Type	Description
`state`	String \| Object	The indicators state serialized by saveIndicatorsState function.

See:

saveIndicatorsState to save indicators.

Example

<caption>Save and load indicators state</caption
 var state = chart.saveIndicatorsState();
 chart.loadIndicatorsState(state);

loadState(state)

Loads chart state.

Parameters:

Name	Type	Description
`state`	String \| Object	The chart state serialized by saveState function.

See:

saveState to save state.

Example

var state = chart.saveState();
 chart.loadState(state);

recordRange(firstRecord, lastRecord)

Updates visible range to show records in a given range.

Parameters:

Name	Type	Argument	Description
`firstRecord`	number		The first record to show. Or number of last records to show if second argument is omitted.
`lastRecord`	number	<optional>	The last record to show.

removeDataSeries(dataSeries)

Removes given data series. Removes all data series if parameter is omitted.

Parameters:

Name	Type	Argument	Description
`dataSeries`	String \| StockChartX.DataSeries	<optional>	The data series object or data series name.

Example

chart.removeDataSeries('OpenInterest'); // Removes 'OpenInterest' data series.
 chart.removeDataSeries();               // Removes all data series.

removeDrawings()

Removes all drawings.

See:

saveDrawingsState to save drawings.
loadDrawingsState to load drawings.

Example

chart.removeDrawings();

removeIndicators(indicators, removePanelIfNoPlots)

Removes one or more indicators.

Parameters:

Name	Type	Argument	Description
`indicators`	StockChartX.Indicator \| Array.<StockChartX.Indicator>	<optional>	Indicator(s) to remove. All indicators are removed if omitted.
`removePanelIfNoPlots`	boolean	<optional>	The flag that indicates if panel should be removed if there are no plots on it any more. True by default.

See:

addIndicators to add indicators.

Examples

Remove all indicators from the chart.

chart.removeIndicators();

Remove RSI indicator

// Assume that rsi indicator was added already.
// var rsi = chart.addIndicators(RelativeStrengthIndex);

chart.removeIndicators(rsi);

Remove all indicators

chart.removeIndicators();

saveDrawingsState()

Saves all drawings.

See:

loadDrawingsState to load drawings.

Returns:

The array of drawing states.

Type: Array.<Object>

Example

var state = chart.saveDrawingsState();

saveImage(saveCallback)

Saves chart as image.

Parameters:

Name	Type	Argument	Description
`saveCallback`	CanvasImageCallback	<optional>	The callback for custom saving.

saveIndicatorsState()

Saves indicators state.

See:

loadIndicatorsState to load indicators.

Returns:

An array of indicator states.

Type: Array.<Object>

Example

var state = chart.saveIndicatorsState();

saveState()

Saves chart state (including indicators and drawings).

See:

loadState to load state.

Returns:

The chart state.

Type: Object

Example

var state = chart.saveState();

scrollOnPixels(pixels)

Scrolls chart on a given number of pixels.

Parameters:

Name	Type	Description
`pixels`	number	The number of pixels to scroll.

scrollOnRecords(records)

Scrolls chart on a given number of records.

Parameters:

Name	Type	Description
`records`	number	The number of records to scroll.

selectObject(obj)

Selects new chart object. E.g. drawing.

Parameters:

Name	Type	Description
`obj`	StockChartX.Drawing

Returns:

True if selection is changed, false otherwise.

Type: boolean

setNeedsAutoScale()

Marks that all value scales need to be auto-scaled on next layout.

setNeedsAutoScaleAll()

Marks that auto-scaling needs to be performed on next layout (affects all scales, including date scale).

startUserDrawing(drawing)

Starts new user drawing.

Parameters:

Name	Type	Description
`drawing`	StockChartX.Drawing	The new user drawing object.

See:

cancelUserDrawing to cancel user drawing.

Example

var line = new StockChartX.LineSegmentDrawing();
 chart.startUserDrawing(line);

toggleFullWindow()

Enters/Exits full window mode.

trimDataSeries(maxLength)

Trims all data series to a given maximum length.

Parameters:

Name	Type	Description
`maxLength`	number	The new maximum length of data series.

update()

Layouts and draws chart.

updateIndicators()

Updates all indicators. It needs to be called after data series values are changed.

See:

addIndicators to add indicators.
removeIndicators to remove indicators.

Example

chart.updateIndicators();

zoomOnPixels(pixels)

Zooms chart on a given number of pixels.

Parameters:

Name	Type	Description
`pixels`	number	The number of pixels to zoom.

zoomOnRecords(records)

Zooms chart on a given number of records.

Parameters:

Name	Type	Description
`records`	number	The number of records to zoom.