ChartIQ SDK Legacy Documentation

new STXChart(config)

This is the constructor that instantiates the basic chart object and links it to its DOM container. Before any chart operations can be performed this constructor must be called.

Multiple STXChart (stx) objects can exist on an HTML document. charts is a member object that can contain multiple charts (in separate panels). For backward compatibility, there is always one chart called stxx.chart which points to the first chart in the charts object. Users can feel free to reference this chart directly if they only ever need to support a single chart panel. chart contains some variables that are applicable to all of the charts on the screen (i.e. canvas, canvasWidth, canvasHeight, etc)

Each "chart" contains a unique set of data. In theory each chart supports a separate scroll position but this is not implemented.

Parameters:

Name	Type	Description
`config`	Object	Configuration object. Any field or object within the config parameter will be preset or added to the STXChart object itself. Generally you will want to at least include {container: }.

Since:

15-07-01 deprecated STXChart#underlayPercentage

Examples

// declare a chart
var stxx=new STXChart({container: $$("chartContainer")});
// override defaults after a chart object is declared (this can be done at any time. If the chart has already been rendered, you will need to call `stx.draw();` to immediately see your changes )
stxx.yaxisLabelStyle="roundRectArrow";
stxx.layout.chartType="bar";

// declare a chart and preset defaults
var stxx=new STXChart({container: $$("chartContainer"),layout:{"chartType": "candle","candleWidth": 16}});

Classes

Chart
Panel
XAxis
XAxisLabel
YAxis

Namespaces

AdvancedInjectable

Members

<static> currentVectorParameters :Object

Each STXChart object will clone a copy of this object template and use it to store the settings for the active drawing tool. The default settings can be found in stx.js, and they can be changed by overriding these defaults on your own files. See Custom Drawing Menu and Colors for details on how to use this template to replace the standard drawing toolbar.
This object can be extended to support additional drawing tools (for instance note the extensive customization capabilities for fibonacci)

Type:

Object

<static> currentVectorParameters.annotation :object

Annotation settings.

Type:

object

Example

annotation:{
	font:{
		style:null,
		size:null,	// override .stx_annotation default
		weight:null, // override .stx_annotation default
		family:null // override .stx_annotation default
	}
}

<static> currentVectorParameters.axisLabel :string

Axis Label. Set to 'true' to display a label on the x axis.
Not all parameters/values are valid on all drawings. See the specific recontruct method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)

Type:

string

Default Value:

true

<static> currentVectorParameters.currentColor :string

Line color.
Not all parameters/values are valid on all drawings. See the specific recontruct method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)

Type:

string

Default Value:

auto

<static> currentVectorParameters.fibonacci :object

Fibonacci settings. See STX.Drawing.fibonacci.#reconstruct parameters object for valid options

Type:

object

Example

fibonacci:{
	trend:{color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	fibs:[
	      {level:-0.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:-0.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:0, color:"auto", parameters:{pattern:"solid", lineWidth:1}},
	      {level:0.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:0.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:0.5, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:1, color:"auto", parameters:{pattern:"solid", lineWidth:1}},
	      {level:1.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
	      {level:1.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}}
	      ],
	extendLeft: false,
	printLevels: true,
	printValues: false,
	timezone:{color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}}
}

<static> currentVectorParameters.fillColor :string

Fill color.
Not all parameters/values are valid on all drawings. See the specific recontruct method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)

Type:

string

Default Value:

#7DA6F5

<static> currentVectorParameters.lineWidth :number

Line width
Not all parameters/values are valid on all drawings. See the specific recontruct method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)

Type:

number

Default Value:

<static> currentVectorParameters.pattern :string

Line pattern.
Valid values for pattern: solid,dotted,dashed,none
Not all parameters/values are valid on all drawings. See the specific recontruct method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)

Type:

string

Default Value:

solid

<static> currentVectorParameters.vectorType :string

Drawing to activate.
See 'Classes' in STX.Drawing for available drawings. Use STXChart#changeVectorType to activate.

Type:

string

<static> htmlControls :Object

Defines raw html for the chart controls. These can be overridden by manually placing HTML elements in the chart container with the same ID. To completely disable a chart control, programatically set controls[controlID]=null where controlID is the control to disable. You can also set any of these components to null in the stx object before creating a chart as outlined in the included examples. Note that only some controls can be disabled.

Type:

Object

Examples

var stxx=new STXChart({container:$$("chartContainer"), controls: {chartControls:null}});

// before calling newChart()
stxx.controls["chartControls"]=null;

<static> htmlControls.annotationCancel

controlID for the Annotation Cancel button (class="stx-btn stx_annotation_cancel").

<static> htmlControls.annotationSave

controlID for the Annotation Save button (class="stx-btn stx_annotation_save").

<static> htmlControls.baselineHandle

controlID for grabber which sits to right of baseline so it can be moved.

<static> htmlControls.chartControls

controlID for the zoom-in and zoom-out buttons (class="stx_chart_controls").

<static> htmlControls.crossX

controlID for the Horizontal Crosshair line (class="stx_crosshair stx_crosshair_x").

<static> htmlControls.crossY

controlID for the Vertical Crosshair line (class="stx_crosshair stx_crosshair_y").

<static> htmlControls.floatDate

controlID for div which floats along the X axis with the crosshair date (class="stx-float-date").

<static> htmlControls.handleTemplate

controlID for div which controls the handle to resize panels (class="stx-ico-handle").

Example

// example to hide the handle and prevent resizing of panels
.stx-ico-handle {
		display: none;
}

<static> htmlControls.home

controlID for the home button (class="stx_jump_today home"). The button goes away if you are showing the most current data. See example to manually turn it off. You can call stxx.home(); programatically. See STXChart#home for more details

Example

// disable the home button
var stxx=new STXChart({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.controls["home"]=null;

<static> htmlControls.iconsTemplate

controlID for the div which hosts the panel title (symbol name, study name ) and the study control icons on the on the upper left hand corner of each panel (class="stx-panel-control") This control can not be disabled, but can be manipulated using the corresponding CSS style classes. On the main chart panel, stx-chart-panel is added to the class definition ( in addition to stx-panel-title which just controls the tile) so you can manipulate the entire chart controls section, separately from the rest of the study panel controls.

Examples

// example to hide the chart symbol title
.stx-panel-control.stx-chart-panel .stx-panel-title{
		display:none;
}

// for backwards compatibility, this is still supported:
.chart-title{
		display	: none;
	}

// example to hide all panels titles
.stx-panel-control .stx-panel-title{
		display:none;
}

<static> htmlControls.mSticky

controlID for the Trash Can button / Series delete panel (id="mSticky"). Also see STXChart#displaySticky

Example

// disable the tool tip that appears when hovering over an overlay ( drawing, line study, etc)
stxx.controls["mSticky"]=null;

allowEquations :boolean

Set to true to allow an equation to be entered into the symbol input. For example, =2*IBM-GM NOTE: the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation.

Type:

boolean

Default Value:

true

allowScroll :boolean

Set to false to disable any user scrolling of the chart

Type:

boolean

Since:

04-2015

Default Value:

true

Example

var stxx=new STXChart({container:$$$(".chartContainer"), allowScroll:false, layout:{"candleWidth": 16, "crosshair":true}});

allowSideswipe :boolean

Set to false to disable 2 finger side swipe motion for scrolling

Type:

boolean

Since:

2015-12-08

Default Value:

true

allowZoom :boolean

Set to false to disable any user zooming on the chart

Type:

boolean

Since:

04-2015

Default Value:

true

Example

var stxx=new STXChart({container:$$$(".chartContainer"), allowZoom:false, layout:{"candleWidth": 16, "crosshair":true}});

axisBorders :boolean

Set to false if you don't want the axis borders drawn. This will override individual settings on yaxis and xaxis.

Type:

boolean

Default Value:

null

callbacks.calculateTradingDecimalPlaces :function

Called to determine how many decimal places the stock trades in. This is used for head's up display and also for the current price pointer label.

Format:
callback({stx:STXChart, chart:STXChart.Chart, symbol: String, symbolObject:Object})

Type:

function

callbacks.drawing :function

Called when a drawing is added or deleted (all the drawings are returned, not just the new one) Format:
callback({stx:STXChart, symbol: String, symbolObject:Object, drawings: Object})

Type:

function

callbacks.layout :function

Called when the layout changes Format:
callback({stx:STXChart, chart:STXChart.Chart, symbol: String, symbolObject:Object, layout: Object})

Type:

function

callbacks.move :function

Called when a user moves on the chart. Not called if a drawing tool is active, panel resizing, etc grab is true if a mouse user has the mouse button down while moving. For touch users it is true if they do not have the crosshair tool enabled.

Format:
callback({stx:STXChart, panel:STXChart.Panel, x:this.cx, y:this.cy, grab:boolean})

Type:

function

callbacks.studyOverlayEdit :function

Called when a user right clicks on an overlay study.

Please note that this callback must be set before you call STXChart#importLayout. Otherwise your imported studies will not have an edit capability

Format:
callback({stx, sd, inputs, outputs, parameters})

Type:

function

callbacks.studyPanelEdit :function

Called when a user clicks the edit button on a study panel. If forceEdit==true then a user has clicked on an edit button (cog wheel) so pull up an edit dialog. Otherwise they have simply right clicked so give them a context menu.

Please note that this callback should be set before you call STXChart#importLayout. Otherwise your imported studies will not have an edit capability

Format:
callback({stx, sd, inputs, outputs, parameters, forceEdit})

Type:

function

callbacks.symbolChange :function

Called when the symbol is changed (when newChart is called), added (addSeries) or removed (removeSeries). Note that this is not called if the symbol change occurs during an importLayout Format:
callback({stx:STXChart, symbol: String, symbolObject:Object, action:["master"|"add-series"|"remove-series"})

Type:

function

Since:

callbacks.tap :function

Called when a user clicks or right clicks on the chart. Not called if the user right clicks on a drawing or study unless stxx.bypassRightClick=true

Format:
callback({stx:STXChart, panel:STXChart.Panel, x:this.cx, y:this.cy})

Type:

function

Since:

Example

stxx.addEventListener("rightClick", function(tapObject){
	alert('right click event at x: ' + tapObject.x + ' y: '+ tapObject.y);
});

callbacks.tap :function

Called when a user clicks or taps on the chart. Not called if a drawing tool is active!

Format:
callback({stx:STXChart, panel:STXChart.Panel, x:this.cx, y:this.cy})

Type:

function

Example

stxx.addEventListener("tap", function(tapObject){
	alert('tap event at x: ' + tapObject.x + ' y: '+ tapObject.y);
});

callbacks.tap :function

Called when a user "long holds" on the chart. By default this is set to 1000 milliseconds. Optionally change the value of stxx.longHoldTime to a different setting, or set to zero to disable.

Format:
callback({stx:STXChart, panel:STXChart.Panel, x:this.cx, y:this.cy})

Type:

function

Since:

2016-06-22

Example

stxx.longHoldTime=... // Optionally override default value of 1000ms
stxx.addEventListener("longhold", function(tapObject){
	alert('longhold event at x: ' + tapObject.x + ' y: '+ tapObject.y);
});

candleWidthPercent :boolean

Adjust to increase or decrease the default width of candles

Type:

boolean

Default Value:

0.65

captureTouchEvents :boolean

Primarily intended for mobile devices, if set to false it will allow up/down swiping (don't capture events) to pass trough the chart container so the main page can manage it. This allows a user swiping up and down to swipe trough the chart instead of having the chart capture the event and prevent the page from continue moving. It therefore produces a more natural up/down swiping motion throughout the page.

Type:

boolean

Since:

12-2015-08

Default Value:

true

changeCallback :function

This is the callback function used to react to STXChart#changeOccurred. Use this for storing chart configurations or drawings real time as users make changes.

Expected format :

    fc(stxChart, eventType);

Currently implemented values for "eventType" are "layout" and "vector".

You can create any additional event types and trigger them by calling 'STXChart.changeOccurred(eventType)'

Note only one changeCallback function can be registered per chart object. As such, you must program it to handle any and all possible events triggered by STXChart#changeOccurred.

Type:

function

Example

stxx.changeCallback=function(stxx, eventType){
		if(eventType=="layout") saveLayout();
		if(eventType=="vector") saveDrawing();
}

chart :object

Holds STXChart.Chart object

Type:

object

charts :object

READ ONLY. The charts on the screen. Will contain at least one item, "chart"

Type:

object

cleanupGaps :boolean

Set to true to have the Chart create missing data points for lightly traded stocks that may have missing ticks for an introday or daily interval. See STXChart#doCleanupGaps

Type:

boolean

Since:

ver 15-07-01 gaps are automatically cleaned up unless this flag is set to false
2015-11-1, gaps are not automatically cleaned unless this flag is set to true

Default Value:

false

cloneDrawing :number

Set to true based on a key stroke, button press, etc, when you want to enable the ability to clone a highlighted drawing. Reset to false when you want the cloning to end. For example, you can set to true when the control key is pressed and disable when it is released.

Type:

number

Since:

07-2016-16.7

Default Value:

false

Example

document.onkeyup=keyup;
document.onkeydown=keydown;

// disable cloning if the ctl key is released
function keyup(e){
	var key = (window.event) ? event.keyCode : e.keyCode;
	if (key == 18 ) stxx.cloneDrawing=false;
}

// enable cloning if the ctl key is pressed
function keydown(e){
	var key = (window.event) ? event.keyCode : e.keyCode;
	if (key == 18 ) stxx.cloneDrawing=true;
}

controls :object

Holds the HTML control elements managed by the chart. Usually this will be a copy of the default htmlControls. These are not the GUI elements around the chart, but rather the HTML elements that the library will directly interact with on the canvas for things like panel resizing, study edit controls, zooming controls, etc. See STXChart#htmlControls for more details.

Type:

object

crosshairTick :number

The value (price) representing the crosshair cursor point

Type:

number

crosshairValue :number

Read Only. The value (price) representing the crosshair cursor point

Type:

number

crosshairXOffset :number

X axis offset for touch devices so that finger isn't blocking crosshair

Type:

number

crosshairYOffset :number

Y axis Offset for touch devices so that finger isn't blocking crosshair

Type:

number

dataCallback :function

This is the callback function used by setPeriodicityV2 when no quotefeed has been attached to the chart. Called if the masterData does not have the interval requested.

Do not initialize if you are using a quotefeed ( STX.QuoteFeed )

Type:

function

Example

stxx.dataCallback=function(){
		// put code here to get the new data in the correct periodicity.
		// use layout.interval and layout.periodicity to determine what you need.
		// finally call stxx.newChart(symbol,data) to load the data and render the chart.
}

dataSetContainsGaps :boolean

Set to true if there may be null quote gaps coming back from your feed, and need to scrub the data to remove them. If set, a new 'scrubbed' dataSet called stx.chart.scrubbed will be created. If disabled 'scrubbed' will still exist, but will be identical to stx.chart.dataSet and will have gaps.

Type:

boolean

Default Value:

true

dataZone :string

Read Only. Timezone of the masterData, set by STXChart#setTimeZone.

Type:

string

displayIconsClose :boolean

Set these to false to not display this panel management component. See STXChart.controls for alternate methods and more details.

Type:

boolean

Default Value:

true

Example

stxx.displayIconsClose=false;

displayIconsSolo :boolean

Set these to false to not display this panel management component. See STXChart.controls for alternate methods and more details.

Type:

boolean

Default Value:

true

Example

stxx.displayIconsSolo=false;

displayIconsUpDown :boolean

Set these to false to not display this panel management component. See STXChart.controls for alternate methods and more details.

Type:

boolean

Default Value:

true

Example

stxx.displayIconsUpDown=false;

displayInitialized :boolean

Read only. This gets set to true when the chart display has been initialized.

Type:

boolean

Default Value:

false

displayPanelResize :boolean

Set these to false to not display this panel management component. See STXChart.controls for alternate methods and more details.

Type:

boolean

Default Value:

true

Example

stxx.displayPanelResize=false;

displayZone :string

Read Only. Timezone to display on the chart, set by STXChart#setTimeZone.

Type:

string

dontRoll :boolean

Set this to true if your server returns data in week or monthly ticks, and doesn't require rolling computation from daily

Type:

boolean

Default Value:

false

drawingObjects :array

Stores a list of active drawing object on the chart. Serialized renditions of drawings can be added using STXChart#createDrawing and removed using STXChart#removeDrawing

Type:

array

Default Value:

[]

eventListeners :array

READ ONLY. Array of event listeners. These listeners will be killed when STXChart#destroy is called.

Type:

array

extendLastTick :boolean

When set to true, line and mountain charts are extended slightly in order to reduce whitespace at the right edge of the chart

Type:

boolean

Since:

05-2016-10 The line will be extended to the end of the chart (full candle width) instead of the candle border, even when using yaxisLabelStyle "roundRectArrow"

Default Value:

false

fetchMaximumBars :object

chart types which require fetching as many bars as possible (since they aggregate data)

Type:

object

Default Value:

{"undefined":1}

hasNTBAxis :object

chart types which have a non-time-based x-axis (since they aggregate data)

Type:

object

Default Value:

{"undefined":1}

layout :object

Contains the current screen layout

Type:

object

Example

// Layout parameters can be preset on a chart as follows:
var stxx=new STXChart({container: $$("chartContainer"),layout:{"interval":"day","periodicity":1,"chartType": "candle","candleWidth": 16}});

layout.adj :boolean

Whether adjusted or nominal prices are being displayed. If true then the chart will look for "Adj_Close" in the masterData as an alternative to "Close".

Type:

boolean

Default Value:

true

layout.aggregationType :string

Type of aggregation to use Available options are: "rangebars" "ohlc" "kagi" "pandf" "heikinashi" "linebreak" "renko" See STXChart#setAggregationType

Type:

string

Default Value:

ohlc

layout.candleWidth :number

Candle Width In pixels ( see Managing Chart Zoom and Range )

Type:

number

Default Value:

layout.chartScale :string

Type of scale to use Available options are: "log", "linear" See STXChart#setChartScale

Type:

string

Default Value:

linear

layout.chartType :string

Sets type of chart to render Available options are: "line", "candle", "bar", "wave", “colored_bar”, "colored_line", “hollow_candle”,”scatterplot”, "baseline_delta", "baseline_delta_mountain", "mountain","colored_mountain", "volume_candle"

Type:

string

Since:

05-2016-10.1 "baseline_delta_mountain" and "colored_mountain" are also available

Default Value:

candle

layout.crosshair :boolean

Whether crosshairs are being displayed

Type:

boolean

Default Value:

false

layout.extended :boolean

Flag for extended hours time-frames. The chart includes the 'extended' parameter in the params object sent into the fetch() call. Your quote feed must be able to provide extended hours data when requested (extended:true) for any extended hours functionality to work. See STX.ExtendedHours and STX.Market for more details on how extended hours are set and used.

Type:

boolean

Default Value:

false

layout.interval :string

Chart interval Available options are: [number] representing minutes, "day", "week", "month" See the Periodicity and Quote feed tutorial.

Type:

string

Default Value:

layout.marketSessions :object

Tracks the extended market sessions to display on the chart.
Once set, call newChart() to enable the corresponding time-frames in the x axis and load the data for these sessions. Session names must match the session names declared in STX.Market. See STX.ExtendedHours and STX.Market for more details on how extended hours are set and used.

Type:

object

Since:

06-2016-02

Default Value:

{}

Example

marketSessions = {
     "session1": true,
     "session2": true,
     "session3": false,
     "pre": true,
     "post": true
}

layout.periodicity :number

Number of periods per interval See the Periodicity and Quote feed tutorial.

Type:

number

Default Value:

manageTouchAndMouse :boolean

If true when the chart initially is rendered, then the STXChart object will register to listen and manage touch and mouse browser events within then canvas by attaching them to the container div.

Set to false to restrict all events registration and optionally turn into a static chart. Users will not be able to zoom or scroll.

It is possible to re-enable the events after the chart has been rendered, but you must call stx.initializeChart(); stx.draw(); to register the events once again.

Type:

boolean

Default Value:

true

Example

// if enabling events after the chart was already rendered, you must reinitialize to re register the browser events.
stxx.manageTouchAndMouse = true;
stxx.initializeChart();
stxx.draw();

markerDelay :number

Only reposition markers this many milliseconds. Set to zero or null for no visible delay. (lower numbers are more CPU intensive). See Markers for more details on adding markers to your charts

Type:

number

Default Value:

Example

stxx.markerDelay=25;

markers :object

READ ONLY. A map of marker objects, sorted by label.

Type:

object

maxDataSetSize :number

Set to maximum size of dataSet allowed (the larger, the more of a performance hit)

Type:

number

Default Value:

20000

minimumCandleWidth :number

Minimum candleWidth (in pixels) allowed when zooming out. This will determine the maximum number of ticks to display on the chart. Anything smaller than 0.5 pixels may cause performance issues when zooming out.

Type:

number

Default Value:

minimumLeftBars :number

Number of bars to always keep on the left of the screen when the user pans forward in time (moves chart from right to left). If this is set to less than 1 then it will be possible to have a blank chart. See STXChart.Chart#allowScrollPast for instructions on how to prevent users from scrolling past the oldest bar on the chart.

Type:

number

Since:

05-2016-10

Default Value:

minimumZoomTicks :number

Minimum number of ticks to display when zooming in.

Type:

number

Since:

07-2016-16.6

Default Value:

mouseWheelAcceleration :boolean

Set to false to turn off mousewheel acceleration

Type:

boolean

Since:

2015-11-1

Default Value:

true

noWicksOnCandles :object

chart types which do not draw wicks on candles

Type:

object

Default Value:

{"undefined":1}

overlays :object

READ ONLY. An array of currently enabled overlay studies

Type:

object

panels :object

READ ONLY. An array of currently enabled panels

Type:

object

plugins :array

Placeholder for plugin data sets. This array will register each plug in object, complete with their functions. See our Plug-in Markers tutorial for complete details and examples on registering and implementing a plug-in.

If defined, Plug-in instances will be called by their corresponding native functions for the following:

consolidate ( called by STXChart#consolidatedQuote)
drawUnder (called by draw before STXChart#displayChart)
drawOver (called by draw after STXChart#displayChart)
STXChart#setMasterData
STXChart#appendMasterData
STXChart#initializeChart
STXChart#createDataSet

Type:

array

preferences :object

Contains the chart preferences

Type:

object

preferences.currentPriceLine :boolean

Draw a horizontal line at the current price. Only drawn if the most recent tick is visible.

Type:

boolean

Since:

05-2016-10

Default Value:

false

preferences.horizontalCrosshairField :string

Locks the crosshair Y value to the value of the field name specified for the tick under the cursor on the primary chart.

For studies create a horizontalCrosshairFieldFN function that will be called by STX.Studies.addStudy. The function must return the field name in the dataSet to reference. The function will not be called when the study is set to overly or underlay the chart's panel.

Type:

string

Since:

04-2016-08

Default Value:

null

Examples

// Have the crosshair lock to the "Close" field of the tick under the cursor
stxx.preferences.horizontalCrosshairField = "Close";

// Have the crosshair lock to the "ATR ATR (14)" field for a ATR study with a period of 14
STX.Studies.studyLibrary["ATR"].horizontalCrosshairFieldFN = function(stx, sd) {
	// returns the field name, which should be created by the study's "calculateFN"
	return "ATR " + sd.name;
};

preferences.labels :boolean

Set to true to display labels on y-axis for line based studies using STX.Studies.displayIndividualSeriesAsLine or STX.Studies.displaySeriesAsLine (this is overridden by the particular y-axis setting of STXChart.YAxis#drawPriceLabels). This flag is checked inside these 2 functions to decide if a label should be set, as such if you do not wish to have a label on a particular study line, you can set this flag to false, before calling the function, and then back to true.

Type:

boolean

Default Value:

true

Example

//do not display the price labels for this study
stxx.preferences.labels=false;
STX.Studies.displaySeriesAsLine(stx, sd, quotes);

//restore price labels to default value
stxx.preferences.labels=true;

preferences.magnet :boolean

Magnetize the crosshairs to datapoints during drawing operations to improve placement accuracy. See STXChart.AdvancedInjectable#magnetize for more details

Type:

boolean

Default Value:

false

preferences.whitespace :number

Initial whitespace on right of the screen in pixels.

Type:

number

Default Value:

Example

// override the default value at declaration time
var stxx=new STXChart({container:$$$(".chartContainer"), preferences:{"whitespace": 20}});

preferences.zoomInSpeed :number

zoom-in speed for mousewheel and zoom button.

Range: 0 -.99999. The closer to 1 the slower the zoom.

Type:

number

Since:

07/01/2015

Default Value:

null

Examples

stxx.preferences.zoomInSpeed=.98;

var stxx=new STXChart({container:$$$(".chartContainer"), preferences:{"zoomInSpeed": .98}});

preferences.zoomOutSpeed :number

zoom-out speed for mousewheel and zoom button.

Range: 1-2. The closer to 1 the slower the zoom.

Type:

number

Since:

07/01/2015

Default Value:

null

Examples

stxx.preferences.zoomOutSpeed=1;

var stxx=new STXChart({container:$$$(".chartContainer"), preferences:{"zoomOutSpeed": 1}});

resizeDetectMS :number

Set to zero to avoid resize checking loop. See STXChart#setResizeTimer for more details

Type:

number

Default Value:

1000

reverseMouseWheel :boolean

Set to true to reverse direction of mousewheel for zooming

Type:

boolean

Default Value:

false

streamParameters :object

Used to control the behavior and throttling of real time updates from streamTrade() or appendMasterData() to prevent overloading the chart engine

Type:

object

streamParameters.fillGaps :boolean

if true, gaps will be filled in the master data from the last tick in the chart to the date of the trade. The close price from the last tick will be used to fill the gaps. This will cause charts to display a straight line instead of a gap. Only applicable when using streamTrade()

Type:

boolean

Since:

2016-03-11

Default Value:

true

streamParameters.maxTicks :number

ticks to wait before allowing update to occur (if this condition is met, the update will occur and all pending ticks will be loaded - exclusive of maxWait)

Type:

number

Default Value:

streamParameters.maxWait :number

ms to wait before allowing update to occur (if this condition is met, the update will occur and all pending ticks will be loaded - exclusive of maxTicks)

Type:

number

Default Value:

1000

timeUnit :string

Time unit for the interval. "millisecond", "second", "minute" or null for daily charts

Type:

string

Default Value:

null

transformDataSetPost :function

Register this function to transform the data set after a createDataSet() event; such as change in periodicity. You can also explicitly call stxx.createDataSet(); stxx.draw(); to trigger this function.

Expected Format :

    fc(stxChart, dataSet, min low price in the dataset, max high price in the dataset);

Type:

function

Example

stxx.transformDataSetPost=function(self, dataSet, min, max){
		for(var i=0;i < dataSet.length;i++){
			// do somethng to the dataset here
		}
}

transformDataSetPre :function

Register this function to transform the data set before a createDataSet() event; such as change in periodicity. You can also explicitly call stxx.createDataSet(); stxx.draw(); to trigger this function.

Expected Format :

    fc(stxChart, dataSet);

Type:

function

Example

stxx.transformDataSetPre=function(stxx, dataSet){
		for(var i=0;i < dataSet.length;i++){
			// do somethng to the dataset here
		}
}

transformMasterDataQuote :function

Register this function if you need setMasterData() to transform each quote returned by your data feed into a properly formatted OHLC object before loading it into the chart. STXChart#setMasterData is called by STXChart#newChart.

This is a useful function if your data is not properly formated as required by the charting library. Instead of having to iterate trough your data to re-format it, and once again within setMasterData() to load it, you can use the transform function to format it as it is being loaded, and thus preventing the dual looping.

Expected Format :

    var formattedOHLCObject = fc(quote);

Type:

function

Example

stxx.transformMasterDataQuote=function(quote){
		var formattedOHLCObject =
			{
				DT:new Date(quote.DT),
				Open:parseFloat(quote.Open),
				Close:parseFloat(quote.Close),
				High:parseFloat(quote.High),
				Low:parseFloat(quote.Low),
				Volume:parseInt(quote.Volume,10)
			};

		return formattedOHLCObject;
}

translationCallback :function

This is the callback function used to translate languages. Should return a translated phrase given the English phrase. See separate translation file for list of phrases.

Expected format :

    var translatedWord = fc(english);

Defaults to STX.I18N.translate

Type:

function

xAxisAsFooter :boolean

Display the xAxis below all panels.

Type:

boolean

Since:

05-2016-10

Default Value:

false

yaxisLabelStyle :string

Set to either "roundRectArrow", "semiRoundRect", "roundRect","tickedRect","rect","noop"

Type:

string

Default Value:

roundRectArrow

Example

var stxx=new STXChart({container: $$("chartContainer")});
stxx.yaxisLabelStyle="roundRectArrow";

yTolerance :number

Number of pixels the mouse needs to move in vertical direction to "unlock" vertical panning/scrolling. Setting to a number larger than the pixels on the canvas will also disable vertical scrolling

Type:

number

Default Value:

Example

//This will disable the tolerance, so panning will immediately follow the user actions without maintaining a locked vertical location when panning left or right.
var stxx=new STXChart({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.yTolerance=0;

Methods

<static> chartShowsHighs(chartType)

Returns true if the chartType is not a line type and therefore displays highs and lows.

Parameters:

Name	Type	Description
`chartType`	String	The chart type (layout.chartType)

Since:

05-2016-10.1 "baseline_delta_mountain" and "colored_mountain" are also available

Returns:

True if the chart type only displays close values

Type: Boolean

<static> hideDates()

Override this function to hide the date which floats along the X axis when crosshairs are enabled. Return true to hide the date or false to display.

<static> isDailyInterval(interval)

Returns true if the interval is based off of a daily interval ("day","week" or "month")

Parameters:

Name	Type	Description
`interval`	string	The interval

Returns:

True if it's a daily interval

Type: Boolean

addEventListener(type, cb)

Add a listener for an emitted chart event. Events are tracked in the STXChart.callbackListeners object.

Parameters:

Name	Type	Description
`type`	string	The event to listen for
`cb`	function	Function to call when event is called

Since:

04-2016-08

Returns:

Object that can be passed to STXChart#removeEventListener

Type: Object

addSeries(field [, parameters] [, cb])

INJECTABLE Adds a series to the chart.

Example

Series can be plotted as additional lines or mountains on the chart or you can use setSeriesRenderer() to group multiple series and draw them together as a stacked histogram, or group of lines sharing similar properties.

Important. There are two ways to set up a series:

If parameters.color is included, the series will be automatically attached to the default seriesRenderer (named _generic_series) and immediately rendered as an overlay . Use this method if you don't need any of the advanced features available through custom renderers. As such, there is no need to then create a renderer and attach this seres to it, unless you also want the series to be part of a different set linked together by another renderer with different settings.
If the color is not defined, the series will be set but not displayed, awaiting grouping and rendering done by a setSeriesRenderer() call. See the 'Examples' section for code illustrations of both methods.

Important. Unless you set the forceData parameter, the dates for the values to be inserted have to perfectly match the dates of the existing chart ticks. This includes hours, minutes, seconds and milliseconds, even for daily ticks.

Parameters:

Name Type Argument Description

field

string

The name of the series. This must match a field in the dataSet items or be a valid symbol fetch() can retrieve when parameters.data.useDefaultQuoteFeed is set to true.

parameters

object

Optional parameters to describe the series

Properties

Name Type Argument Description

display

string

Set to the text to display on the legend. If not set, the name of the series will be used (usually symbol)

symbolObject

string

The symbol to fetch in object format. This will be sent into the fetch() function when parameters.data.useDefaultQuoteFeed is set to true. You can send anything you want in the symbol object, but you must always include at least a 'symbol' element.

field

string

Specify an alternatve (existing) field to draw data from (other than the name of the series itself)

isComparison

boolean

If set to true, shareYAxis is automatically set to true to display relative values instead of the primary symbol's price labels. STXChart#setComparison is also called and set to true. This is only applicable when using the primary Y axis.

type

string

Set to "step" to create a stairstep series rather than smooth lines

shareYAxis

boolean

Set to true so that the series shares the Y-axis and renders along actual values. Otherwise it is superimposed on the chart maintaining the relative shape of the line but not on the actual y axes values (used when rendering multiple series that do not share a common value range). Will automatically override to true if 'isComparison'. This is only applicable when using the primary Y axis.

marginTop

number

Percentage (if less than 1) or pixels (if greater than 1) from top of panel to set the top margin for the series.
Note: this parameter is to be used on subsequent series rendered on the same axis. To set margins for the first series, STXChart.YAxis#initialMarginTop needs to be used.
Note: not applicable if shareYAxis is set.

marginBottom

number

Percentage (if less than 1) or pixels (if greater than 1) from the bottom of panel to set the bottom margin for the series.
Note: this parameter is to be used on subsequent series rendered on the same axis. To set margins for the first series, STXChart.YAxis#initialMarginBottom needs to be used.
Note: not applicable if shareYAxis is set.

width

number

Width of line

minimum

number

Minimum value for the series. Overrides STX.minMax result.

maximum

number

Maximum value for the series. Overrides STX.minMax result.

color

string

Color to draw line. If present, it will force the series to be immediately drawn ( as a line if no parameters.chartType is defined ) and a default renderer named _generic_series will be used to display the series as an overlay.

pattern

array

Pattern to draw line, array elements are pixels on and off

gaps

object

Whether to draw a line through where data points are missing. Set to true to use the same color and pattern as the main line, or define a color-pattern object if different.

Properties

Name	Type	Argument	Description
`color`	string	<optional>	Color to draw line where data points are missing
`pattern`	Array	<optional>	Pattern to draw line where data points are missing, array elements are pixels on and off

chartType

string

Chart type "mountain" to plot mountain chart. Default is "line" chart. Only applicable when using the default renderer. See STX.Renderer#Lines for details on how to render mountain charts using a custom renderer.

fillStyle

string

Fill style for mountain chart (if selected). For semi-opaque use rgba(R,G,B,.1)

permanent

boolean

Set to true to activate. Makes series unremoveable by a user when attached to the default renderer. If explicitly linked to a renderer, it forces it to remain loaded (not necessarily displayed) even if detached from its renderer, allowing it to be re-attach/remain attached to a another renderer without having to recreate the series. See STX.Renderer#attachSeries for details on how to prevent an attached series from being removed by a user.

forceData

boolean

Set to true to activate. If active, will create a masterData entry if none exists for that DT.

data

object

Data source for the series. If omitted and a QuoteFeed is available then the QuoteFeed will be used to fetch data. Otherwise, this should contain an array of objects in {DT,Date,Value} format.

Properties

Name	Type	Description
`DT`	Date	JavaScript date object or epoch representing data point (overrides Date parameter if present)
`Date`	string	string date representing data point ( only used if DT parameter is not present)
`Value`	number	value of the data point ( As an alternative, you can send `parameters.data.Close` since your quote feed may already be returning the data using this element name)

cb

function

Callback function to be executed once the fetch returns data from the quoteFeed. It will be called with an error message if the fetch failed: cb(err);. Only applicable if using "useDefaultQuoteFeed:true" in parameters.data.

Since:

- 04-2015 if `isComparison` is true shareYAxis is automatically set to true and setComparison(true) called. createDataSet() and draw() are automatically called to immediately render the series.
- 15-07-01 if `color` is defined and chartStyle is not set then it is automatically set to "line".
- 15-07-01 ability to use setSeriesRenderer().
- 15-07-01 ability to automatically initialize using the quoteFeed.
- 15-07-01 `parameters.quoteFeedCallbackRefresh` no lonfer used. Instead if `parameters.data.useDefaultQuoteFeed` is set to `true` the series will be initalized and refreshed using the default quote feed. ( Original documentation: {boolean} [parameters.quoteFeedCallbackRefresh] Set to true if you want the series to use the attached quote feed (if any) to stay in sync with the main symbol as new data is fetched (only available in Advanced package). )
- 2015-11-1 `parameters.symbolObject` is now available
05-2016-10 `parameters.forceData` is now available.
TBD `parameters.data.DT` can also take an epoch number.

Returns:

The series object

Type: object

Examples

// add a series using data already in the masterData array
stxx.addSeries(
		"Open",
		{ color: "blue"}
);

// set location of your legend, if you want one.
if(!stxx.chart.legend){
		stxx.chart.legend={
			x: 260,
			y: 10
		};
}

// add a legend relative to the y axis top
if(!stxx.chart.legend) stxx.chart.legend={ x: 260, y: stxx.panels["chart"].yAxis.top+10 };

// add the comparison series with a color to immediately render using default renderer (as lines) and dashes for gaps fillers
stxx.addSeries(symbol1, {display:"Description 1",isComparison:true,data:{useDefaultQuoteFeed:true},color:"purple", gaps:{pattern:[3,3]},width:4,permanent:true});
stxx.addSeries(symbol2, {display:"Description 2",isComparison:true,data:{useDefaultQuoteFeed:true},color:"pink", gaps:{pattern:[3,3]},width:4});
stxx.addSeries(symbol3, {display:"Description 3",isComparison:true,data:{useDefaultQuoteFeed:true},color:"brown", gaps:{pattern:[3,3]},width:4});

// add the comparison series with only default parameters ( no color). The series will not display on the chart after it is added.
stxx.addSeries(symbol1, {display:"Description 1",isComparison:true,data:{useDefaultQuoteFeed:true}});
stxx.addSeries(symbol2, {display:"Description 2",isComparison:true,data:{useDefaultQuoteFeed:true}});
stxx.addSeries(symbol3, {display:"Description 3",isComparison:true,data:{useDefaultQuoteFeed:true}});

// group the series together and select "line" as the rendering type to display the series. Also set a pattern for gaps rendering.
var mdataRenderer=stxx.setSeriesRenderer(new STX.Renderer.Lines({params:{name:"My Line Series", type:"line", gaps:{pattern:[3,3]}, width:4}}))
		.attachSeries(symbol1,{color:"red",permanent:true})
		.attachSeries(symbol2,"blue")
		.attachSeries(symbol3,"yellow")
		.ready();

function callbackFunct(field){
	 return function(err) {
		alert(field);
	}
}

// set	your legend location if you want one
if(!stxx.chart.legend){
	stxx.chart.legend={
		 x: 260,
		 y: 10
	};
}

// add a series with a color to immediately render - this example uses the quotefeed to get initial data and refresh. It also calls callbackFunct after the data is returned from the fetch.
stxx.addSeries(symbol1, {display:"Description",color:"brown",data:{useDefaultQuoteFeed:true}},callbackFunct(symbol1));

// set up the legend creation callback for the histogram renderer
function histogramLegend(colors){
	stxx.chart.legendRenderer(stxx,{legendColorMap:colors, coordinates:{x:260, y:stxx.panels["chart"].yAxis.top+30}, noBase:true});
};

// set up the y axis for the histogram renderer
var axis=new STXChart.YAxis();
axis.position="left";
axis.textStyle="#FFBE00";
axis.decimalPlaces=0;			// no decimal places on the axis labels
axis.maxDecimalPlaces=0;		// no decimal places on the last price pointer

// set up the parameters for the histogram renderer
var params={
	name:				"My stacked histogram",
	type:				"histogram",
	subtype:			"stacked",
	heightPercentage:	.7,	 // how high to go. 1 = 100%
	opacity:			.7,	 // only needed if supporting IE8, otherwise can use rgba values in histMap instead
	widthFactor:		.8,	 // to control space between bars. 1 = no space in between
	yAxis:				axis, 
	callback: 			histogramLegend
};


// create your histogram renderer
var histRenderer=stxx.setSeriesRenderer(new STX.Renderer.Histogram({params:params}));

// set up the call back for your addSeries
// in this case we will have it attach the series to the renderer once the data is loaded
function callbackFunct(field, color,renderer){
	 return function(err) {
		if ( !err) {
			renderer.attachSeries(field,color)
			.ready();  //use ready() to immediately draw the rendering
		}
	}
}

// add the series data and have the callback attach it to the renderer and render
stxx.addSeries(symbol4, {display:"Description 1",data:{useDefaultQuoteFeed:true}},callbackFunct(symbol4,'red',histRenderer));
stxx.addSeries(symbol5, {display:"Description 2",data:{useDefaultQuoteFeed:true}},callbackFunct(symbol5,'black',histRenderer));
stxx.addSeries(symbol6, {display:"Description 3",data:{useDefaultQuoteFeed:true}},callbackFunct(symbol6,'green',histRenderer));

// add series and attach to a y axis on the left.
// See this example working here : http://jsfiddle.net/chartiq/b6pkzrad/
stxx.addSeries("NOK", {display:"NOK",data:{useDefaultQuoteFeed:true},width:4});
stxx.addSeries("SNE", {display:"Sony",data:{useDefaultQuoteFeed:true},width:4});

var axis=new STXChart.YAxis();
axis.position="left";
axis.textStyle="#FFBE00";
axis.decimalPlaces=0;			// no decimal places on the axis labels
axis.maxDecimalPlaces=0;		// no decimal places on the last price pointer


renderer=stxx.setSeriesRenderer(new STX.Renderer.Lines({params:{name:"lines", type:"mountain", yAxis:axis}}));

renderer.removeAllSeries()
	.attachSeries("NOK", "#FFBE00")
	.attachSeries("SNE", "#FF9300")
	.ready();

addYAxis(panel, yAxis)

Adds a yAxis to the specified panel. If the yAxis already exists then nothing is done.

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel to add (i.e. stxx.chart.panel)
`yAxis`	STXChart.YAxis	The YAxis to add (create with new STXChart.YAxis)

adjustDrawings()

Loops through the existing drawings and asks them to adjust themselves to the chart dimensions.

adjustIfNecessary(panel, tick, value)

Returns the unadjusted value for a given value, if an adjustment (split) had been applied. This can return a value relative to the original closing price.

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel to check
`tick`	number	The location in the dataset
`value`	number	The value to adjust

Returns:

The adjusted value

Type: number

append(o, n)

Appends custom developer functionality to an internal chart member. See “Injection API".

Parameters:

Name	Type	Description
`o`	string	Signature of member
`n`	function	Callback function, will be called with "apply"

Since:

- 04-2015 You can append either to an STXChart instance, or to the prototype. The first will affect only a single chart while the latter will affect any chart (if you have multiple on the screen)
- 15-07-01 function returns a descriptor which can be passed in to removeInjection() to remove it later on.

Returns:

Injection descriptor which can be passed in to STXChart#removeInjection to remove it later on.

Type: object

appendMasterData(appendQuotes [, chart] [, params])

INJECTABLE Use this method to stream OHLC data into a chart. An array of quotes should be passed in (even if only appending a single quote). The quotes should be in the same form as taken by STXChart#setMasterData. The method can appended new elements to the end of the master Data or replace existing elements. It will NOT insert new elements in the middle. This is driven by the date of the first element on the appendQuotes array. If newer than the last master Data element, the list will be appended to the end of master Data. Otherwise it will systematically replace each element on the masterData with the new elements (NOT filling in the date gap by pusing existng masterData elements forward, but actually replacing the existing elements) , beginning at the first matching date, and will continue this process even if new elements are required to be append at the end of the master Data to exhaust the submitted list.

Dates in the appendQuotes array must maintain the correct periodicity and order (older to newer) to prevent out of sequence ticks. If your wish is to augment your existing historical data with tick by tick trade data, even though your periodicity is not set to 'tick', you must do this using STXChart#streamTrade instead. StreamTrade will take each tick received by your streaming feed and properly update the last bar or create a new one as needed, ensuring the set periodicity is maintained.

To maintain system performance you can throttle inbound ticks. See STXChart#streamParameters and Streaming tutorial for more details. It is important to note that although the data will always be added to masterData, createDataSet() and draw() will not be called if data is received quicker than the throttle (governor) wait periods. As such, you will not see any changes until the throttle wait periods are met.

Note: this method is not intended to be used as a way to load initial chart data, update individual comparison symbols, or data changes triggered by periodicity changes. See Data Loading for more detail on how to load initial data. See STXChart#streamTrade for more details on how to stream comparison symbols.

Parameters:

Name Type Argument Description

appendQuotes

array

An array of properly formatted OHLC quote objects to append. See Data Format

chart

STXChart.Chart

The chart to append the quotes. Defaults to the default chart.

params

Object

Parameters to dictate behavior

Properties

Name	Type	Argument	Description
`noCreateDataSet`	boolean	<optional>	If true then do not create the data set automatically, just add the data to the masterData
`allowReplaceOHL`	boolean	<optional>	Set to true to bypass internal logic that maintains OHL
`bypassGovernor`	boolean	<optional>	If true then masterdata will be immediatelly updated regardless of STXChart#streamParameters

Since:

2015-11-1 params.bypassGovernor added, allowReplaceOHL added
2015-11-1 params.force deprecated. Every call will update the tick to maintain the proper volume and createDataSet is now controlled by sp.maxTicks, sp.timout or params.bypassGovernor

attachQuoteFeed(quoteFeed [, behavior])

Attaches a quote feed to the chart. This causes the chart to behave in event driven mode, requesting data from the quote feed when necessary.

Parameters:

Name Type Argument Description

quoteFeed

STX.QuoteFeed

A QuoteFeed object.

behavior

object

Parameters that describe the desired charting behavior

Properties

Name	Type	Argument	Description
`refreshInterval`	number	<optional>	If non null, then the chart will poll for updated data that frequently
`callback`	function	<optional>	Function callback after any quote fetch, use this to fetch additional data for instance. It will be called with the same parameters used on the STX.QuoteFeed#fetch call.
`noLoadMore`	number	<optional>	If true, then the chart will not attempt to load any more data after the initial load. Not even the current quote request that automatically takes place right after an initial load.
`loadMoreReplace`	boolean	<optional>	If true, then when loading more the feed should actually reload everything (no end_date)
`noBats`	boolean	<optional>	If true, then the chart will not attempt to load data a real time update from BATS

Since:

2016-03-11 behavior.loadMoreReplace was added.

Example

var quoteBehavior={
	   refreshInterval: 1,
	   callback: STX.quoteFeedCallback
};
stxx.attachQuoteFeed(new STX.QuoteFeed.Demo(),quoteBehavior);

attachTagAlongQuoteFeed(feed)

Attaches an additional STX.QuoteFeed. fetch() will be called on this quote feed after every fetch on the primary quote feed. This allows additional content to be loaded (for instance a custom study that fetches pre-computed data). See STXChart#detachTagAlongQuoteFeed

The data from a tagAlong will be added to the masterData in an object under the label name.

Parameters:

Name Type Description

feed

object

Feed descriptor

Properties

Name	Type	Argument	Description
`quoteFeed`	STX.QuoteFeed		The quote feed object
`behavior`	Object	<optional>	Optional behavior object. This will behave like the primary behavior object except that the refreshInterval will not be respected.
`label`	string		Multiple copies of the same physical QuoteFeed can be used with independent labels. If multiple copies are attached with the same label then a count will be kept to prevent early detachment.

Since:

04-2015

backOutX(x)

Returns the relative canvas position given an absolute X position on the screen

Parameters:

Name	Type	Description
`x`	number	X pixel on the screen

Returns:

Relative X position on canvas

Type: number

backOutY(y)

Returns the relative canvas position given an absolute Y position on the screen

Parameters:

Name	Type	Description
`y`	number	Y pixel on the screen

Returns:

Relative Y position on canvas

Type: number

barFromPixel(x [, chart])

Returns which bar the pixel lies on. Do not reference this into dataSegment without checking bounds because the return value may be negative or greater than the dataSegment array length.

Parameters:

Name	Type	Argument	Description
`x`	number		An X pixel location on the chart
`chart`	STXChart.Chart	<optional>	Which chart to use. Defaults to this.chart.

Returns:

The bar that lies on the X pixel (may be negative/before or after the chart)

Type: number

calculateYAxisMargins(yAxis)

Calculates and sets the value of zoom and scroll for y-axis based on yAxis.initialMarginTop and yAxis.initialMarginBottom. This method will automatically translate those into starting scroll and zoom factors.

Parameters:

Name	Type	Description
`yAxis`	STXChart.YAxis	The yAxis to reset

canvasColor(className [, ctx])

Sets color and globalAlpha (opacity) for the canvas given a css class name. Call this before drawing on the canvas.

Parameters:

Name	Type	Argument	Description
`className`	string		A CSS style. Supports "color" and "opacity"
`ctx`	external:CanvasRenderingContext2D	<optional>	An HTML Context

Example

stxx.canvasColor("myStyle");
// draw a line using canvas primitives, will be color defined in .myStyle

canvasFont(className, ctx)

Sets canvas font context given a css class name. Supports fontStyle, fontWeight, fontSize and fontFamily.

Parameters:

Name	Type	Description
`className`	string	The name of the CSS class to pull font from
`ctx`	external:CanvasRenderingContext2D	An HTML Context

canvasStyle(className)

Returns an object containing the class style given a css class name (used by plotLine() for instance). A caching mechanism is used for performance. If styles are changed dynamically then use STXChart.prototype.clearStyles to reset.

Parameters:

Name	Type	Description
`className`	string	The CSS class name to get the styles

Returns:

An object containing each style, in camel case.

Type: object

changeOccurred(change)

This is called whenever a change to layout or drawings occurs. But can be used to trigger any event. If STXChart#changeCallback has a function registered, then that function will be called with the type of change. The change itself is not passed in. The layout or drawings can be inspected to find the change but typically the entire set of drawings or entire layout is desired and it is mostly just necessary to know that they have changed so that they can be saved.

Parameters:

Name	Type	Description
`change`	string	Type of change that occurred. Any string that STXChart#changeCallback has been programmed to handle is valid.

changeVectorType(value)

Sets the current drawing tool as described by STXChart.currentVectorParameters (color, pattern, etc)

Parameters:

Name	Type	Description
`value`	string	The name of the drawing tool to enable

Example

// activates a drawing type described by currentVectorParameters
stxx.changeVectorType('rectangle');
// deactivates drawing mode
stxx.changeVectorType('');
// clears the drawings
stxx.clearDrawings()

clearDrawings(cantUndo)

Clears all the drawings on the chart. (Do not call abortDrawings directly).

Parameters:

Name	Type	Description
`cantUndo`	boolean	Set to true to make this an "non-undoable" operation

clearMeasure()

Clears the innerHTML value of the mMeasure HTML DOM Node.

clearStyles()

Call this to remove all of the loaded canvas styles, for instance after loading a new css file

cloneStyle(div)

Clones a style from a style object (obtained from getComputedStyle). Any styles are converted to camel case. This method automatically converts from browsers that store styles as numeric arrays rather than as property objects.

Parameters:

Name	Type	Description
`div`	object	A style object derived from getComputedStyle

Returns:

A style object that will match properties

Type: object

colorOrStyle(str)

Detects if a string is a valid CSS color and if so returns that string. Otherwise it returns a style object, assuming that the string is a classname.

Parameters:

Name	Type	Description
`str`	string	Either a color or a className

Returns:

Either the color or a class object

Type: Object

completeAsyncAction()

Studies or plugins that use asynchronous data should call this when their async activities are complete. See STXChart#startAsyncAction

connectTheDots(points, color, type [, context] [, confineToPanel] [, parameters])

Draws a series of connected lines on the canvas. The points are in a straight array for compactness. This is used for instance in the freeform (doodle) drawing tool

Parameters:

Name Type Argument Description

points

array

A series of points in the pattern x0,y0,x1,y1

color

string

Either a color or a Styles object as returned from STXChart#canvasStyle

type

string

The type of line to draw ("segment","ray" or "line")

context

external:CanvasRenderingContext2D

The canvas context. Defaults to the standard context.

confineToPanel

object

Panel the line should be drawn in, and not cross through. Or set to 'true' to confine to the main chart panel.

parameters

object

Additional parameters to describe the line

Properties

Name	Type	Argument	Description
`pattern`	string	<optional>	The pattern for the line ("solid","dashed","dotted")
`width`	number	<optional>	The width in pixels for the line
`opacity`	number	<optional>	Optional opacity for the line

convertToDataZone(browserDate)

Given a browser time it will return the date in dataZone time. See STXChart#setTimeZone for more details. If no dataZone is set, it will return the original date passed in.

Parameters:

Name	Type	Description
`browserDate`	Date	Date in broswr time - as in 'new Date();'

Since:

07-2016-16.6

Returns:

Date converted to dataZone

Type: Date

createDataSet( [dontRoll] [, whichChart])

INJECTABLE Rolls masterData into a dataSet. A dataSet is rolled according to periodicity. For instance, daily data can be rolled into weekly or monthly data. A 1 minute data array could be rolled into a 7 minute dataSet. This method also calls the calculation functions for all of the enabled studies. The paradigm is that calculations are performed infrequently (when createDataSet is called for instance newChart or setPeriodicityV2). Then the data is available for quick rendering in the draw() animation loop.

Aggregation is done by systematically picking the first element in each periodicity range and tracking 'High','Low','Volume' and 'Close' so the aggregated quote has the properly consolidated values. i.e.:

Consolidated High = the highest value for the range
Consolidated Low = the lowest value for the range
Consolidated Volume = the total combined volume for the range
Consolidated Close = the final close value for the range

All other series values will remain as initially set on the first element and will not be aggregated since the library does know their meaning other than being data-points in a series. If you need to also aggregate these series values in a specific manner you can do so by using the following manipulation functions:

STXChart#transformDataSetPre for manipulation before the quotes are combined/aggregated.
STXChart#transformDataSetPost for manipulation after the quotes are combined/aggregated.

Important: if your data has gaps and you are rolling up the master data, you may see unexpected results if your data does not have a tick matching the exact start time for the periodicity selected. This is due to the fact that aggregation process only uses the ticks is has in the master data and no new ticks are added. Example, if you are rolling up seconds into minutes ( stxx.setPeriodicityV2(60, 1, "second"); ) and your master data has objects with the following time stamps: 10:20:00, 10:20:11, 10:20:24, 10:20:50, 10:20:51, 10:21:30, 10:21:45, 10:21:46, 10:21:59, your aggregated results will be an object for 10:20:00, and one for 10:21:30; where you where probably expecting one for 10:20:00, and one for 10:21:00. But since there is no 10:21:00 object in the master data, the very next one will be used as the starting point for the next aggregation...and so on. To eliminate this problem and guarantee that every bar starts on an exact time for the selected aggregation period, you must first fill in the gaps by setting the STXChart#cleanupGaps to true.

Parameters:

Name	Type	Argument	Description
`dontRoll`	boolean	<optional>	If true then don't roll into weeks or months. Do this when masterData contains raw data with weekly or monthly interval. Optionally you can set stxx.dontRoll to always force dontRoll to be true without having to send as a parameter
`whichChart`	STXChart.Chart	<optional>	The chart to roll. Otherwise rolls all charts on screen.

createDrawing(type, parameters)

Creates a new drawing of the specified type with the specified parameters. See Custom Drawing Tools for more details.

Parameters:

Name	Type	Description
`type`	string	Drawing name
`parameters`	object	Parameters that describe the drawing

Returns:

A drawing object

Type: STX.Drawing

createNumericXAxis(chart)

Draws a numeric x-axis, attempting to automatically create "nice" labels for readability. Uses the array "index" of the dataSegment instead of "Date" field to determine the label.

Set chart.xAxis.axisType=="numeric" to activate.

Parameters:

Name	Type	Description
`chart`	STXChart.Chart	Chart object

Returns:

axisRepresentation that can be passed in to STXChart#drawXAxis

Type: Array.<STXChart.XAxisLabel>

createTickXAxisWithDates( [chart])

Draws date based x-axis. It uses an algorithm to determine the best possible labeling, from milliseconds up to years, and uses "pretty" multipliers (such as 5 minutes, 15 minutes, 1 hour, etc).

chart.xAxis.timeUnit and chart.xAxis.timeUnitMultiplier can be hard set to override the algorithm (See Custom X-axis for additional details).

This method is algorithmically designed to create an x-axis that is responsive to various degrees of user panning, zooming, and periodicity selection. It will print different versions of dates or times depending on those factors, attempting to prevent overlaps and evenly spacing labels. If a locale is set, then internationalized dates will be used.

The algorithm is also market hours aware. See STX.Market for details on how to set market hours for the different exchanges.

This method sets the STXChart.chart.xaxis array which is a representation of the complete x-axis including future dates. Each array entry contains an object:
DT – The date/time displayed on the x-axis
date – yyyymmddhhmm string representation of the date
data – If the xaxis coordinate is in the past, then a reference to the chart data element for that date

Parameters:

Name	Type	Argument	Description
`chart`	object	<optional>	The chart to print the xaxis

Returns:

axisRepresentation that can be passed in to STXChart#drawXAxis

Type: Array.<STXChart.XAxisLabel>

createXAxisLabel(panel, txt, x, backgroundColor, color, pointed)

Creates a label on the x-axis. Generally used for drawing labels.

Note: This is not used for the floating crosshair date label wich is styled using stx-float-date See STXChart.AdvancedInjectable#updateChartAccessories and STXChart.AdvancedInjectable#headsUpHR for more details

Label style: stx-float-date ( font only )

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel on which to print the label
`txt`	string	The text for the label
`x`	number	The X position on the canvas for the label. This method will ensure that it remains on the requested panel.
`backgroundColor`	string	The background color for the label.
`color`	string	The foreground color for the label. If none provided then white is used, unless the background is white in which case black is used.
`pointed`	boolean	True to put an arrow above the label

createYAxisLabel(panel, txt, y, backgroundColor, color [, ctx] [, yAxis])

Creates a label on the y-axis unless STXChart.YAxis#drawPriceLabels is false. This can be used for any panel and called multiple times to add multiple labels

Style: stx_yaxis ( font only )

Parameters:

Name	Type	Argument	Description
`panel`	STXChart.Panel		The panel on which to print the label
`txt`	string		The text for the label
`y`	number		The Y position on the canvas for the label. This method will ensure that it remains on the requested panel.
`backgroundColor`	string		The background color for the label.
`color`	string		The foreground color for the label. If none provided then white is used, unless the background is white in which case black is used.
`ctx`	external:CanvasRenderingContext2D	<optional>	The canvas context to use, defaults to the chart
`yAxis`	STXChart.YAxis	<optional>	Optionally specifiy which yAxis if there are multiple for the panel

currentQuote()

Returns the current quote (the final element in the dataSet).

Returns:

The most recent quote

Type: object

dateFromTick(tick [, chart] [, nativeDate])

Returns a date (in yyyymmddhhmm form) given a tick (location in the dataSet). If the tick lies outside of the dataSet then the date will be arrived at algorithmically by calculating into the past or future

Parameters:

Name	Type	Argument	Description
`tick`	number		Location in the dataSet (use STXChart#dateFromBar for dataSegment)
`chart`	STX.Chart	<optional>	An optional chart object
`nativeDate`	boolean	<optional>	True to return as date object otherwise returns in yyyymmddhhmm form

To Do:

Return native date rather than string date

Returns:

The date form dictated by native param

Type: string

defaultMarkerPlacement(params)

Placement functions are responsible for positioning markers in their holder according to each marker's settings. They are called directly form the draw() function in the animation loop. Each Marker placement handler must have a corresponding placementFunction or this method will be used.

firstTick and lastTick can be used as a hint as to whether to display a marker or not.

See STX.Marker and Markers for more details

Parameters:

Name Type Description

params

Object

The parameters

Properties

Name	Type	Description
`arr`	Array	The array of markers
`panel`	Object	The panel to display
`firstTick`	Number	The first tick displayed on the screen
`lastTick`	Number	The last tick displayed on the screen

Since:

2015-09-01 On prior versions you must define your own default function. Example: STXChart.prototype.defaultMarkerPlacement = STX.Marker.AboveCandle.placementFunction;

deleteAllPanels()

Deletes all of the panels (except for the default chart panel)

deleteYAxisIfUnused(panel, yAxis)

Removes the yAxis from the panel if it is not being used by any current renderers. This could be the case if a renderer has been removed. It could also be the case if a renderer is not attached to any series.

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel
`yAxis`	STXChart.YAxis	The axis to be removed

Since:

07/01/2015

destroy()

Clears out a chart, eliminating all references including the resizeTimer, quoteDriver, styles and eventListeners. To destroy the complete chart and related UI use STX.destroy

detachTagAlongQuoteFeed()

See STXChart#attachTagAlongQuoteFeed

Since:

04-2015

determineMinMax(quotes, fields [, sum] [, bypassTransform] [, length])

This method determines the high and low values for the data set. It requires an array of fields to check. For instance the array might contain ["Close","Series1","Series2"] which would return the max and min of all of those values for each quote.

Parameters:

Name	Type	Argument	Description
`quotes`	Array		The array of quotes to evaluate for min and max (typically STXChart.chart.dataSegment)
`fields`	Array		A list of fields to compare
`sum`	Boolean	<optional>	If true then compute maximum sum rather than the maximum single value
`bypassTransform`	Boolean	<optional>	If true then bypass any transformations
`length`	Number	<optional>	Optionally specify how much of the quotes to process

Returns:

A tuple, min and max values

Type: Array

displayAll( [params] [, cb])

Sets a chart to display all data for a security. If the chart is driven by a QuoteFeed then it will first set the periodicity to a daily interval if not already set (monthly if the STXChart#dontRoll flag is set) . It will then call QuoteDriver.loadAll() which makes multiple queries to ensure all data availabe from the quote feed is loaded. Once all the data is loaded, the chart will be set to cover that range using STXChart#setRange

Parameters:

Name	Type	Argument	Description
`params`	object	<optional>	Optional parameters in same format as STXChart#setSpan.
`cb`	function	<optional>	Callback, is called when chart is displayed.

Since:

04-2015

displaySticky(message, backgroundColor, forceShow, noDelete, type)

Displays the "sticky" (tooltip element). The sticky should be in STXChart.controls.mSticky. To disable stickies, set that element to null. See STXChart.htmlControls

Parameters:

Name	Type	Description
`message`	string	The message to display in the sticky
`backgroundColor`	string	The background color to set the sticky (the foreground color will be picked automatically)
`forceShow`	boolean	If true, will always show the sticky (as opposed to only on hover)
`noDelete`	boolean	If true, will hide the delete instructions/button
`type`	string	"study","drawing","series", or whatever is causing the sticky to be displayed.

doCleanupGaps(quotes [, chart])

Inserts bars in an array of quotes for those periods missing a record according to the logic present in STXChart#getNextInterval. See the "Market Hours and the Charts" tutorial for details on how to properly configure the library to your market hours requirements.

The missing bars will have OHLC all set to the previous Close.

This method is automatically called if you are using a quoteFeed and have STXChart#cleanupGaps set to true; but can be manually called if pushing data into the chart.

This method will affect intraday and underlying daily periods only. If the feed is already returning weekly and monthly data rolled up, the clean up will not be done ( see STXChart#dontRoll ).

Parameters:

Name	Type	Argument	Description
`quotes`	array		The quote array to be gap-filled
`chart`	STXChart.Chart	<optional>	Optional chart

Since:

07/01/2015 it now supports cleanups for daily intervals and foreign exchanges insted of just introday equities.

Returns:

The quote array with gaps filled in.

Type: array

draw()

INJECTABLE Animation Loop This is the main rendering function in the animation loop. It draws the chart including panels, axis, and drawings. This method is called continually as a user pans or zooms the chart. This would be a typical place to put an injection to add behavior to the chart after a drawing operation is complete.

drawHeatmap(panelName, params, seriesParams, field, border_color, color, opacity)

Draws a generic heatmap for the chart. This function should not be called directly unless the heatmap is ready to be drawn immediately.

Parameters:

Name Type Description

panelName

string

The name of the panel to put the heatmap on

params

object

Parameters to control the heatmap itself

Properties

Name	Type	Description
`name`	string	Name of the heatmap. Default: 'Data'
`height`	number	Height of each cell, in yaxis units.
`widthFactor`	number	Width of each call as a percentage of the candleWidth, valid values are 0.00-1.00.

seriesParams

Array

Parameters to control color and opacity of each cell. Each array element of seriesParams is an object having the following members:

field

string

Name of the field in the dataSet to use for the part in the stack

border_color

string

Color to use to draw the border (null to not draw)

color

string

Color to use to fill (null to not draw)

opacity

number

Opacity to use to fill (0.0-1.0) or use alpha from colors

Since:

2015-11-1

drawHistogram(panelName, params, seriesParams)

Draws a generic histogram for the chart. The histogram can render bars representing one element each, or each bar can be stacked with multiple elements, each one representing a different part within the bar. This function should not be called directly unless the histogram is ready to be drawn immediately. Note that if negative values are present, the function will not draw bars pointing downwards; instead the baseline of the histogram will be adjusted to the minimum value detected, and all bars will rise upward from there.

Parameters:

Name Type Description

panelName

string

The name of the panel to put the histogram on

params

object

Parameters to control the histogram itself

Properties

Name	Type	Description
`name`	string	Name of the histogram. Default: 'Data'
`type`	string	Optional type of histogram (stacked, clustered, overlaid) default overlaid
`bindToYAxis`	boolean	For a study, set to true to bind the histogram to the y-axis and to draw it
`heightPercentage`	number	The amount of vertical space to use for the histogram, valid values are 0.00-1.00. Ignored when bindToYAxis==true.
`widthFactor`	number	Width of each bar as a percentage of the candleWidth, valid values are 0.00-1.00.

seriesParams

Array

Parameters to control color and opacity of each part (stack) of the histogram. Each array element of seriesParams is an object having the following members:

Properties

Name	Type	Description
`field`	string	Name of the field in the dataSet to use for the part in the stack
`fill_color_up`	string	Color to use to fill the part when the Close is higher than the previous (#RRGGBB format or null to not draw)
`border_color_up`	string	Color to use to draw the border when the Close is higher than the previous (#RRGGBB format or null to not draw)
`opacity_up`	number	Opacity to use to fill the part when the Close is higher than the previous (0.0-1.0)
`fill_color_down`	string	Color to use to fill the part when the Close is lower than the previous (#RRGGBB format or null to not draw)
`border_color_down`	string	Color to use to draw the border when the Close is lower than the previous (#RRGGBB format or null to not draw)
`opacity_down`	number	Opacity to use to fill the part when the Close is lower than the previous (0.0-1.0)

Since:

07/01/2015

drawingClick(panel, x, y)

This is called to send a potential click event to an active drawing, if one is active.

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel in which the click occurred
`x`	number	The X pixel location of the click
`y`	number	The y pixel location of the click

Returns:

Returns true if a drawing is active and received the click

Type: boolean

drawLineChart(panel, style [, colorFunction])

Draws a line chart. Calls STXChart.plotLineChart after setting styles.

Uses CSS style stx_line_chart to control width and color of line charts

- width                - Optional line width

The default color function for the colored line chart uses the following CSS styles:

- stx_line_up        - Color of the uptick portion if the line
- stx_line_down        - Color of the downtick portion if the line

Parameters:

Name	Type	Argument	Description
`panel`	STXChart.Panel		The panel on which to draw the line chart
`style`	string		The style selector which contains the styling for the bar (width and color)
`colorFunction`	function	<optional>	(optional) A function which accepts an STXChart and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that bar. If not passed as an argument, will use a default color.

Since:

15-07-01 Changed signature from `chart` to `panel`

Returns:

Colors used in the plot (as the keys of the object)

Type: object

drawMountainChart(panel, style [, colorFunction])

Draws a mountain chart. Calls STXChart.plotMountainChart after setting styles.

Unless a style is set, uses CSS style stx_mountain_chart, or stx_colored_mountain_chart to control the mountain chart display as follows:

- background-color    - Background color for mountain
- color    - Optional gradient color
- border    - Optional line color ( stx_mountain_chart only )
- width    - Optional line width

The default color function for the colored mountain chart uses the following CSS styles:

- stx_line_up        - Color of the uptick portion if the line
- stx_line_down        - Color of the downtick portion if the line
- stx_line_chart        - Default line color if no up or down is defined.

Parameters:

Name	Type	Argument	Description
`panel`	STXChart.Panel		The panel on which to draw the mountain chart
`style`	string		The style selector which contains the styling for the bar (width and color). Defaults to `stx_mountain_chart`.
`colorFunction`	function	<optional>	(optional) A function which accepts an STXChart and quote as its arguments and returns the appropriate color for drawing that mode. Returning a null will skip that line segment. If not passed as an argument, will use the color set in the calling function.

Since:

15-07-01 Changed signature from `chart` to `panel`
05-2016-10 function now accepts a style, colorFunction argument, and returns colors used in the line plot

Returns:

Colors used in the plot (as the keys of the object)

Type: object

drawWaveChart(chart)

Draws a "wave" chart. A wave chart extrapolates intraday movement from OHLC and creates 4 data points from a single candle, for instance to create a pseudo-intraday chart from daily data.

Parameters:

Name	Type	Description
`chart`	STXChart.Chart	The chart on which to draw the wave chart

Example

// call it from the chart menu provided in the sampe templates
<li stxToggle="stxx.setChartType('wave')">Wave</li>

endClip()

Completes a bounded clipping operation. See STXChart#startClip.

exportLayout(withSymbols)

Exports the current layout into a serialized form. The returned object can be passed into STXChart#importLayout to restore the layout at a future time.

Parameters:

Name	Type	Description
`withSymbols`	boolean	If set to `true', include the chart's current symbols in the serialized object.

Since:

05-2016-10 `withSymbols` parameter is available

Returns:

The serialized form of the layout.

Type: object

findHighlights(isTap, clearOnly)

Finds any objects that should be highlighted by the current crosshair position. All drawing objects have their highlight() method called in order that they may draw themselves appropriately.

Parameters:

Name	Type	Description
`isTap`	Boolean	If true then it indicates that the user tapped the screen on a touch device, and thus a wider radius is used to determine which objects might have been highlighted.
`clearOnly`	Boolean	Set to true to clear highlights

formatPrice(price, panel)

Formats a price according to the decimalPlaces specified in either the panel or chart. It will then format to international standards if the internationalizer is set. This method does not condense prices.

Parameters:

Name	Type	Description
`price`	number	The price to be formatted
`panel`	STXChart.Panel	The panel to use to determine the number of decimal places.

Returns:

The formatted price

Type: number

formatYAxisPrice(price, panel [, requestedDecimalPlaces] [, yAxis])

Formats prices for the Y-axis. Intelligently computes the decimal places based on the size of the y-axis ticks. This can be overriden by manually setting decimalPlaces in the yAxis. You can call this method to ensure that any prices that you are using outside of the chart are formatted the same as the prices on the y-axis.

Parameters:

Name	Type	Argument	Description
`price`	number		The price to be formatted
`panel`	STXChart.Panel		The panel for the y-axis. If the panel is a study panel, then prices will be condensed by condenseInt.
`requestedDecimalPlaces`	number	<optional>	Optionally specify the number of decimal places, otherwise it will be determined by the yaxis setting, or if not set, determined automatically
`yAxis`	STXChart.YAxis	<optional>	Optional yAxis

Returns:

The formatted price

Type: number

futureTickIfDisplayed(marker)

Figures out the position of a future marker but only if it is displayed on the screen.

Parameters:

Name	Type	Description
`marker`	STX.Marker	The marker to check

getCanvasColor(className)

Returns the canvas color specified in the class name

Parameters:

Name	Type	Description
`className`	string	The class name

Returns:

The color specified (May be undefined if none specified)

Type: string

getCanvasFontSize(className)

Returns the font size defined by the requested class name. Defaults to 12 if undefined. Use this to determine vertical heights so that lettering isn't clipped.

Parameters:

Name	Type	Description
`className`	string	Class name

Returns:

The font size (px is stripped)

Type: number

getDefaultColor()

Animation Loop Determines the default color for lines and studies drawn on the screen. This is black unless the background color of the chart has a "value" greater than 65%. The result is that this.defaultColor contains the default color.

getNextInterval(DT [, period] [, useDataZone])

Convenience function returns the next or previous interval from the provided date-time at the current chart's periodicity. See STX.Market and STX.Market.Iterator for more details.

For 'tick' intervals, since there is no predictable periodicity, the next interval will be determined by STXChart.futureTicksInterval

Parameters:

Name	Type	Argument	Default	Description
`DT`	Date			A JavaScript Date representing the base time for the request in STXChart#dataZone timezone.
`period`	number	<optional>		The number of periods to jump. Defaults to 1. Can be negative to go back in time.
`useDataZone`	Boolean	<optional>	true	By default the next interval will be returned in STXChart#dataZone. Set to false to receive a date in STXChart#displayZone instead.

Returns:

The next interval date

Type: Date

getSeriesRenderer(name)

Retrieves a series renderer from the chart

Parameters:

Name	Type	Description
`name`	string	Handle to access the renderer (params.name) return {object} the matching series renderer if found

Since:

07/01/2015

getStartDateOffset()

Returns the offset from the left side of the screen for the first element on the chart screen. Most times this will be zero except when a user has scrolled past the end of the chart in which case it will be a positive number. This can be used to recreate a saved chart.

Returns:

The offset from the left of the chart.

Type: number

getSymbols()

Returns an array of all symbols currently required by the chart. The returned array contains an object for each symbol containing: symbol, symbolObject, interval, periodicity

Since:

2016-03-11

Returns:

The array of symbol objects required

Type: Array

grabbingHand()

Turns on the grabbing hand cursor. It does this by appending the class "grab" to the document body. If this is a problem then just eliminate this function from the prototype.

hideCrosshairs()

Turns crosshairs off

home()

Returns the chart to the home position, where the most recent tick is on the right side of the screen.

Parameters:

Name	Type	Argument	Description
`params.animate`	boolean		Set to true to animate a smooth scroll to the home position.
`params.maintainWhitespace`	Object		Defaults to `true`. Set to `true` to maintain the currently visible white space on the left of the chart.
`params.whitespace`	Object		Override to force a spacific amount of whitespace. Will take presencece over `params.maintainWhitespace`
`params.chart`	STX.Chart	<optional>	Optionally which chart to scroll home

Example

stxx.home({maintainWhitespace:false});

importLayout(config, params)

Imports a layout (panels, studies, candleWidth, etc) from a previous serialization. See STXChart#exportLayout.

Please note that stxx.callbacks.studyOverlayEdit and stxx.callbacks.studyPanelEdit must be set before you call STXChart#importLayout. Otherwise your imported studies will not have an edit capability

It will also load symbols if your STXChart#exportLayout call included symbols. When symbols are included, this function will set the primary symbol ( first on the serialized symbol list) with STXChart#newChart and any overlayed symbol with STXChart#addSeries. Note that you must be using a QuoteFeed to use this workflow; otherwise data updates may break.

Parameters:

Name Type Description

config

object

A serialized layout

params

object

Parameters to dictate layout behaviour

Properties

Name	Type	Argument	Default	Description
`managePeriodicity`	boolean	<optional>		If true then the periodicity will be set from the layout, otherwise periodicity will remain as currently set. It is only possible for this to change the periodicity if this.dataCallback or this.quoteDriver has been set. See STXChart#setPeriodicityV2
`preserveTicksAndCandleWidth`	boolean	<optional>	true	If true then the candleWidth (horizontal zoom) will be maintained up to 50px, otherwise it will be taken from the layout. Note that the candle width will be reset to 8px if larger than 50px. Even if the value comes from a layout import. This is done to ensure a reasonable candle size is available across devices that may have different screen size.
`cb`	function	<optional>		An optional callback function to pass into STXChart#newChart if there are symbols to load.

Since:

2016-06-21 preserveTicksAndCandleWidth now defaults to true

initializeChart( [container])

Initializes a new chart. This is called by STXChart#newChart. This method initializes the chart container events and various internal variables. It also initializes the canvas and creates the chart panel.

Note that the candle width will be rest to 8px if larger than 50px. Even if the value comes from a layout import. This is done to ensure a reasonable candle size is available across devices that may have different screen size.

Parameters:

Name	Type	Argument	Description
`container`	HTMLElement	<optional>	The container object. Note, it is preferred to set this in the constructor for STXChart.

isHome()

Whether the chart is scrolled to a home position.

Since:

2016-06-21

Returns:

true when the scroll position shows the last tick of the dataSet

Type: boolean

leftTick()

Returns the tick position of the leftmost position on the chart.

Returns:

The tick for the leftmost position

Type: number

makeAsyncCallbacks()

Makes the async callbacks only if no pending async activity

modalBegin()

Sets the chart into a modal mode. Crosshairs are hidden and the chart will not respond to click or mouse events. Call this for instance if you are enabling a dialog box and don't want errant mouse activity to affect the chart.

modalEnd()

Ends modal mode. See STXChart#modalBegin

mousemoveinner(epX, epY)

Core logic for handling mouse or touch movements on the chart. If this.grabbingScreen is true then drag operations are performed.

This method sets several variables which can be accessed for convenience:

STXChart.crosshairX and STXChart.crosshairY - The screen location of the crosshair STXChart.insideChart - True if the cursor is inside the canvas this.cx and this.cy - The location on the canvas of the crosshair this.crosshairTick - The current location in the dataSet of the crosshair this.currentPanel - The current panel in which the crosshair is located (this.currentPanel.chart is the chart) this.grabStartX and this.grabStartY - If grabbing the chart, then the starting points of that grab this.grabStartScrollX and this.grabStartScrollY - If grabbing the chart, then the starting scroll positions of the grab this.zoom - The vertical zoom percentage this.scroll - The scroll position of the chart

Parameters:

Name	Type	Description
`epX`	number	The X location of the cursor on the screen (relative to the viewport)
`epY`	number	The Y location of the cursor on the screen (relative to the viewport)

moveMarkers(fromPanelName, toPanelName)

Moves the markers from one panel to another Useful when renaming panels

Parameters:

Name	Type	Description
`fromPanelName`	string	The panel to move markers from
`toPanelName`	string	The panel to move markers to

Since:

2016-07-16

newChart(symbol [, masterData] [, chart] [, cb] [, params])

Renders a chart for a particular instrument from the data passed in or fetches new data from the attached STX.QuoteFeed. This is the method that should be called every time a new chart needs to be drawn for a different instrument.

Note that before using this method you must first instantiate the chart and assign it to a DOM container using stxx=new STXChart({container: $("chartContainer")});

Parameters:

Name Type Argument Description

symbol

string/Object

The symbol for the new chart - a symbol string or an object representing the symbol can be used. After the new chart is initialized, it will contain both a symbol string (stxx.chart.symbol) and a symbol object (stxx.chart.symbolObject). You can send anything you want in the symbol object, but you must always include at least a 'symbol' element. Both these variables will be available for use wherever the STXChart.Chart object is present. For example, if using the fetch() method for gathering data, params.stx.chart.symbolObject will contain your symbol object.

masterData

array

An array of properly formated OHLC objects to create a chart. Each element should at a minimum contain a "Close" field (capitalized). If the charting engine has been configured to use a QuoteFeed (@link STXChart#attachQuoteFeed) then masterData does not need to be passed in. The quote feed will be queried instead.

chart

STXChart.Chart

Which chart to create. Defaults to the default chart.

cb

function

Optional callback when newChart is loaded.

params

Object

Parameters to dictate initial rendering behavior

Properties

Name Type Argument Description

span

Object

Default span to display upon inital rendering. See STXChart#setSpan

Properties

Name	Type	Description
`multiplier`	number	Number of spans to show as required by STXChart#setSpan. To show 3 weeks of data, for example, set this to 3 and `params.span` to 'week'.
`base`	string	The base span to show as required by STXChart#setSpan. "minute","hour","day","week","month","year","all", "ytd" or "today". These spans are market hours sensitive , so if you ask for 1 hour, for example, at the time the markets are close, the span will find the last time the markets where open for the active symbol, and include the last market hour in the span. It will also exclude days when the market is closed. This span will be combined with the multiplier. Example 2 days, 4 months. Please note that "all" will attempt to load all of the data the quotefeed has available for that symbol. Use this span with caution.

periodicity

Object

Default periodicity to be used upon inital rendering. See STXChart#setPeriodicityV2

Properties

Name	Type	Argument	Description
`periodicity`	Number	<optional>	Period as required by STXChart#setPeriodicityV2
`interval`	string	<optional>	An interval as required by STXChart#setPeriodicityV2

stretchToFillScreen

boolean

Increase the candleWidth to fill the left-side gap created by a small dataSet. Respects STXChart#preferences.whitespace. Ignored when params.span is used.

Since:

2015-11-1 newChart is capable of setting periodicity and span via `params` settings
04-2016-08 `params.stretchToFillScreen` is available

Examples

// using a symbol object and embedded span and periodicity requirements
stxx.newChart(
			 	{symbol:newSymbol,other:'stuff'},
			 	null,
			 	null,
			 	callbackFunction(stxx.chart.symbol, newSymbol),
			 	{
			 		span:{base:'day',multiplier:2},
			 		periodicity:{period:1,interval:5},
			 		stretchToFillScreen:true
			 	}
);

// using a symbol string
stxx.newChart(
			 	"IBM",
			 	null,
			 	null,
			 	callbackFunction(stxx.chart.symbol, newSymbol)
);

panelDown(panel)

This moves a panel down one position (when the user clicks the down arrow).

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel to move down.

panelExists(name)

Returns true if the panel exists

Parameters:

Name	Type	Description
`name`	string	Name of panel to search for

Returns:

True if the panel exists

Type: boolean

panelSolo(panel)

This "solos" the panel (when the user clicks the solo button). All panels other than this panel and the chart are temporarily hidden. If the solo panel is the chart then all other panels will be hidden.

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel to be soloed.

panelUp(panel)

This moves a panel up one position (when the user clicks the up arrow).

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel to move up.

pixelFromBar(bar [, chart])

Returns the X pixel give the location of a bar (dataSegment) on the chart.

Parameters:

Name	Type	Argument	Description
`bar`	number		The bar (position on the chart which is also the position in the dataSegment)
`chart`	STXChart.Chart	<optional>	Which chart to use. Defaults to this.chart.

Returns:

The X pixel on the chart

Type: number

pixelFromDate(date, chart)

Returns the X pixel position for a given date. Warning: this can be an expensive operation if the date is not in the dataSet.

Parameters:

Name	Type	Description
`date`	string	String form date
`chart`	STXChart.Chart	The chart to look in

To Do:

Use Date object instead of string form date

Returns:

The pixel location for the date

Type: number

pixelFromPrice(price [, panel] [, yAxis])

Returns the Y pixel from a given price (or value)

Parameters:

Name	Type	Argument	Description
`price`	number		The price
`panel`	STXChart.Panel	<optional>	The panel (defaults to the chart)
`yAxis`	STXChart.YAxis	<optional>	The yAxis to use

Returns:

The Y pixel value

Type: number

pixelFromPriceTransform(price, panel [, yAxis])

A version of STXChart#pixelFromPrice that will apply a transformation such as a comparison chart.

Parameters:

Name	Type	Argument	Description
`price`	number		The price or value
`panel`	STXChart.Panel		A panel object (see STXChart#pixelFromPrice)
`yAxis`	STXChart.YAxis	<optional>	The yaxis to use

Returns:

The y axis pixel location

Type: number

pixelFromTick(tick [, chart])

Returns an X pixel for the given tick. The X pixel will be the center of the tick location. Note that the pixel may be off of the visual canvas and that it might overlap the Y axis.

Parameters:

Name	Type	Argument	Description
`tick`	number		The tick (position in the dataSet array)
`chart`	STXChart.Chart	<optional>	A chart object

Returns:

The X position in pixels (may be negative or may be greater than dataSet.length)

Type: number

pixelFromValueAdjusted(panel, tick, value [, yAxis])

Returns the Y pixel location for the (split) unadjusted price rather than the displayed price. This is important for drawing tools or any other device that requires the actual underlying price.

Parameters:

Name	Type	Argument	Description
`panel`	STXChart.Panel		The panel to get the value from
`tick`	number		The tick location (in the dataSet) to check for an adjusted value
`value`	number		The value
`yAxis`	STXChart.YAxis	<optional>	The yaxis to use

Returns:

The pixel location

Type: number

plotLine(x0, x1, y0, y1, color, type [, context] [, confineToPanel] [, parameters])

Convenience function for plotting a line on the chart.

Parameters:

Name Type Argument Description

x0

number

X starting pixel

x1

number

X ending pixel

y0

number

Y starting pixel

y1

number

Y ending pixel

color

string

Either a color or a Styles object as returned from STXChart#canvasStyle

type

string

The type of line to draw ("segment","ray" or "line")

context

external:CanvasRenderingContext2D

The canvas context. Defaults to the standard context.

confineToPanel

string

Define the panel that the line should be drawn in, and not cross through

parameters

object

Additional parameters to describe the line

Properties

Name	Type	Argument	Description
`pattern`	string	<optional>	The pattern for the line ("solid","dashed","dotted")
`lineWidth`	number	<optional>	The width in pixels for the line
`opacity`	number	<optional>	Optional opacity for the line

plotSpline(points, tension, color, type [, context] [, confineToPanel] [, parameters])

Draws a series of points and splines (smooths the curve) those points

Parameters:

Name Type Argument Description

points

array

A series of points in the pattern x0,y0,x1,y1

tension

number

Spline tension (0-1). Set to negative to not spline.

color

string

Either a color or a Styles object as returned from STXChart#canvasStyle

type

string

The type of line to draw ("segment","ray" or "line")

context

external:CanvasRenderingContext2D

The canvas context. Defaults to the standard context.

confineToPanel

string

Not currently implemented

parameters

object

Additional parameters to describe the line

Properties

Name	Type	Argument	Description
`pattern`	string	<optional>	The pattern for the line ("solid","dashed","dotted")
`width`	number	<optional>	The width in pixels for the line
`opacity`	number	<optional>	Optional opacity for the line

positionSticky(m)

Positions a "sticky" (a tooltip element). It is positioned relative to the cursor but so that it is always available and never accidentally tappable on a touch device.

Parameters:

Name	Type	Description
`m`	HTMLElement	The sticky

postAdjustScroll()

Call this after a resizing operation in order to maintain the scroll position. See STXChart#preAdjustScroll.

preAdjustScroll( [whichChart])

Call this before a resizing operation in order to maintain the scroll position. See STXChart#postAdjustScroll.

Parameters:

Name	Type	Argument	Description
`whichChart`	STXChart.Chart	<optional>	The chart to adjust. Otherwise adjusts the main symbol chart.

prepend(o, n)

Prepends custom developer functionality to an internal chart member. See “Injection API".

Parameters:

Name	Type	Description
`o`	string	Signature of member
`n`	function	Callback function, will be called with "apply"

Since:

- 04-2015 You can append either to an STXChart instance, or to the prototype. The first will affect only a single chart while the latter will affect any chart (if you have multiple on the screen).
- 15-07-01 function returns a descriptor which can be passed in to removeInjection() to remove it later on.

Returns:

Injection descriptor which can be passed in to STXChart#removeInjection to remove it later on.

Type: object

priceFromPixel(y [, panel] [, yAxis])

Returns the price (or value) give a Y pixel location.

Parameters:

Name	Type	Argument	Description
`y`	number		The Y pixel location
`panel`	STXChart.Panel	<optional>	The panel to look. Defaults to the chart itself if not passed in.
`yAxis`	STXChart.YAxis	<optional>	The yAxis to use. Defaults to panel.yAxis.

Returns:

The Y location. This may be off of the visible canvas.

Type: number

rawWatermark(context, x, y, text)

Creates watermarked text on the canvas. See STXChart#watermark to create a watermark relative to a particular panel. CSS style stx_watermark defines the watermark (opacity of .5 is automatically applied)

Parameters:

Name	Type	Description
`context`	external:CanvasRenderingContext2D	[description]
`x`	number	X position on canvas
`y`	number	Y position on canvas
`text`	string	The text to watermark

reconstructDrawings(arr)

Reconstructs drawings from an array originally created by STXChart#serializeDrawings. To immediately render the reconstructed drawing, you must call draw(). See Custom Drawing Tools for more details.

Parameters:

Name	Type	Description
`arr`	array	An array of serialized drawings

Example

// programatically add a rectangle
stxx.reconstructDrawings([{"name":"rectangle","pnl":"chart","col":"transparent","fc":"#7DA6F5","ptrn":"solid","lw":1.1,"d0":"20151216030000000","d1":"20151216081000000","tzo0":300,"tzo1":300,"v0":152.5508906882591,"v1":143.3385829959514}]);
// programatically add a vertical line
stxx.reconstructDrawings([{"name":"vertical","pnl":"chart","col":"transparent","ptrn":"solid","lw":1.1,"v0":147.45987854251013,"d0":"20151216023000000","tzo0":300,"al":true}]);
// now render the reconstructed drawings
stxx.draw();

registerChartDrawnCallback(fc)

Registers a callback for when the chart has been drawn

Parameters:

Name	Type	Description
`fc`	function	The function to call

Returns:

An object that can be passed in to STXChart#unregisterChartDrawnCallback

Type: object

registerTouchAndMouseEvents()

Registers touch and mouse events for the chart (for dragging, clicking, zooming). The events are registered on the container div (not the canvas). Set this.manageTouchAndMouse to false to disable the built in event handling (events will not be registered with the container).

remove(o)

Removes custom developer functionality from an internal chart member. Will remove any and all appends or prepends.

Parameters:

Name	Type	Description
`o`	string	Signature of member

removeDrawing(drawing)

Removes the drawing. Drawing object should be one returned from STXChart#createDrawing. See Custom Drawing Tools for more details.

Parameters:

Name	Type	Description
`drawing`	Object	Drawing object

removeEventListener(obj)

Remove a listener for an emitted chart event. Events are tracked in the STXChart.callbackListeners object.

Parameters:

Name	Type	Description
`obj`	Object	Object from STXChart#addEventListener

Since:

04-2016-08

removeInjection(id)

Removes a specific injection.

Parameters:

Name	Type	Description
`id`	Object	The injection descriptor returned from STXChart#prepend or STXChart#append

Since:

07/01/2015

removeSeries(field [, chart])

Removes a series from the chart INJECTABLE

Parameters:

Name	Type	Argument	Description
`field`	string		The name of the series to remove
`chart`	STXChart.Chart	<optional>	The chart object from which to remove the series

removeSeriesRenderer(renderer)

Detaches a series renderer from the chart and deletes its associated y-axis if no longer used by any other renderer.

Note: the actual series and related data are not deleted with this command and can be attached or continue to be used with other renderers.

Note: the actual renderer (created by using new STX.Renderer.xxxxx) is not deleted but simply detached from the chart. You can re-attach it again if needed. To delete the renderer use delete myRenderer. See example in STX.Renderer.Lines

Parameters:

Name	Type	Description
`renderer`	object	The actual renderer instance to be removed

Since:

07/01/2015

resizeCanvas()

This method resizes the canvas to the dimensions of the containing div. This is called primarily by STXChart#resizeChart and also when the chart is initialized (via newChart).

resizeChart( [dontMaintainScroll])

Resizes the chart and adjusts the panels. The chart is resized to the size of the container div by calling STXChart#resizeCanvas. This method is called automatically if a screen resize event occcurs. The charting engine also attempts to detect size changes whenever the mouse is moved. Ideally, if you know the chart is being resized, perhaps because of a dynamic change to the layout of your screen, you should call this method manually.

Parameters:

Name	Type	Argument	Default	Description
`dontMaintainScroll`	Boolean	<optional>	true	By default the scroll position will remain pegged on the right side of the chart. Set this to false to override.

Since:

TBD resizeChart now also manages the resizing of the crosshairs.

resolveX(x)

Returns the absolute screen position given a X pixel on the canvas

Parameters:

Name	Type	Description
`x`	number	X pixel on the canvas

Returns:

Absolute X screen position

Type: number

resolveY(y)

Returns the absolute screen position given a Y pixel on the canvas

Parameters:

Name	Type	Description
`y`	number	Y pixel on the canvas

Returns:

Absolute Y screen position

Type: number

savePanels(saveLayout)

Saves the panel state in the layout. Called whenever there is a change to panel layout (resizing, opening, closing).

Parameters:

Name	Type	Description
`saveLayout`	boolean	If false then a change event will not be called. See (@link STXChart#changeOccurred)

serializeDrawings()

Serializes all of the drawings on the chart(s) so that they can be saved to an external database and later reconstructed with STXChart#reconstructDrawings.

Returns:

An array of all of the drawing serializations

Type: array

setAdjusted(data)

Sets the charts to adjusted values rather than standard values. Adjusted values are calculated outside of the chart engine (and may be splits, dividends or both). When charts are using adjusted values, a computed ratio for each tick is used for price to pixel calculations which keeps drawings accurate

Parameters:

Name	Type	Description
`data`	boolean	True to use adjusted values (Adj_Close), false to use Close values

setAggregationType(chartType)

Sets the base aggregation type to "rangebars" "ohlc" "kagi" "pandf" "heikinashi" "linebreak" "renko". See the Chart types tutorial for details on how to override aggregation type defaults.

Parameters:

Name	Type	Description
`chartType`	string	The chart type

setCandleWidth(newCandleWidth [, chart])

Sets the candleWidth for the chart. The candleWidth represents the number of horizontal pixels from the start of one bar or candle to the start of the next. This also applies to line charts. It is effectively, the horizontal zoom. The candleWidth can be read from layout.candleWidth.

Note: if calling setCandleWidth() before newChart(), with a value less than minimumCandleWidth, newChart() will reset the candle size to the default candle size (8 pixels).

Parameters:

Name	Type	Argument	Description
`newCandleWidth`	number		The new candle width. If less than or equal to 0, it will be reset to 8
`chart`	STXChart.Chart	<optional>	Which chart to set the candleWidth. Defaults to the default chart.

Example

stxx.setCandleWidth(10);
stxx.home();	// home() is preferred over draw() in this case to ensure the chart is properly aligned to the right most edge.

setChartScale(chartScale)

Sets the chart scale

Parameters:

Name	Type	Description
`chartScale`	string	"log", "linear"

setChartType(chartType)

Sets the base chart type to "line", "candle", "bar", "wave", “colored_bar”, "colored_line", “hollow_candle”,"volume_candle",”scatterplot”, "baseline_delta", "baseline_delta_mountain", "mountain", "colored_mountain"

Parameters:

Name	Type	Description
`chartType`	string	The chart type

Since:

05-2016-10.1 "baseline_delta_mountain" and "colored_mountain" are also available

setComparison(onOff [, chart])

Turns comparison charting on or off and sets the transform

Parameters:

Name	Type	Argument	Description
`onOff`	boolean		Turn on or off
`chart`	STXChart.Chart	<optional>	The specific chart for comparisons

Since:

04-2015 Signature has been revised

setDisplayDate(quote)

Sets the displayDate for the data element in masterData. The displayDate is the timezone adjusted date.

Parameters:

Name	Type	Description
`quote`	object	The quote element to check

setDisplayDates()

Calls STXChart#setDisplayDate for each element in masterData

setLocale(locale)

Sets the locale for the charts. If set, display prices and dates will be displayed in localized format. The locale should be a valid IANA locale. For instance de-AT represents German as used in Austria. Localization is supported through the Intl object which is a W3 standard, however not all browsers support Intl natively. The Intl.js polyfill is included through the inclusion of stxThirdParty.js. To enable localization, the locale-data/jsonp directory should be included and the JSONP loaded. This is done automatically by calling STX.I18N.setLocale rather than calling this method directly.

Once a locale is set, this.internationalizer will be an object that will contain several Intl formatters. These can be overridden manually if the specified format is not acceptable.

Parameters:

Name	Type	Description
`locale`	string	A valid IANA locale

setMarket()

Sets the market definition on the chart. Once set, the definition will not change until it is explicitly set to something else by calling this method again. If a dynamic model is desired, where a new definition is loaded as different instruments are activated, see STXChart#setMarketFactory. See STX.Market for market definition rules and examples. This is only required if your chart will need to know the operating hours for the different exchanges. If using a 24x7 chart, a market does not need to be set.

Parameters:

Name	Type	Description
`marketDefinition.`	Object	A market definition as required by STX.Market

Since:

04-2016-08

Example

stxx.setMarket(marketDefinition);

setMarketFactory(factory)

Links the chart to a method that given a symbol object of form accepted by STXChart#newChart, can return a complete market definition object. Once linked, the market factory it will be used by the chart to ensure the market always matches the active instrument. This is only required if your chart will need to know the operating hours for the different exchanges. If using a 24x7 chart, a market factory does not need to be set.

Parameters:

Name	Type	Description
`factory`	function	A function that takes a symbolObject and returns a market definition. See STX.Market for instruction on how to create a market definition. See STX.Market.Symbology.factory for working example of a factory function.

Since:

04-2016-08

Examples

// example of a market factory that returns a different market definition based on the symbol passed in
sampleFactory=function(symbolObject){
		var symbol=symbolObject.symbol;
		// isTypeX(symbol) is a function you would create to identify the market definition object that should be used.
		if( isType1(symbol) ) return type1DefinitionObject;
		if( isType2(symbol) ) return type2DefinitionObject;
		if( isType3(symbol) ) return type3DefinitionObject;
		return defaultDefinitionObject;
};

// link a market factory to the chart.
stxx.setMarketFactory(sampleFactory);

setMasterData(masterData [, chart])

Sets the master data for the chart. A dataSet is derived from the master data by STXChart#createDataSet.

If a marketFactory has been linked to the chart, this method will also update the market on the chart to match the newly loaded instrument. When no factory is present, the chart assumes that the market will never change and will continue to use market initially set using STXChart#setMarket. If none set, then the chart will operate in 24x7 mode.

This method also calculates the number of decimal places for the security by checking the maximum number in the data. This is stored in chart.decimalPlaces.

Parameters:

Name	Type	Argument	Description
`masterData`	array		An array of quotes. Each quote should at a minimum contain a "Close" field (capitalized) and a Date field which is a string form of the date. This method will set DT to be a JavaScript Date object derived from the string form.
`chart`	STXChart.Chart	<optional>	The chart to put the masterData. Defaults to the default chart.

Since:

2016-03-11 - you can now define STXChart#transformMasterDataQuote to format each masterData element before inserting it into the chart.

setMaxTicks(ticks, params)

Sets the maximimum number of ticks to the requested number. This is effected by changing the candleWidth. See also STXChart#setCandleWidth.

Note: if calling setMaxTicks() before newChart(), and the chart will result in a candle width less than minimumCandleWidth, newChart() will reset the candle size to the default candle size (8 pixels).

Parameters:

Name Type Description

ticks

number

The number of ticks wide to set the chart.

params

object

optional Parameters to use with this function.

Properties

Name	Type	Description
`padding`	number	Whitespace in pixels to add to the right of the chart. Setting this field will home the chart to the most recent tick. To home the chart without padding the right side with whitespace, set padding to 0. Omitting the padding field will keep the chart scrolled to the same position.

Since:

2015-11-1 - params added

Example

stxx.setMaxTicks(300);
stxx.home();	// home() is preferred over draw() in this case to ensure the chart is properly aligned to the right most edge.

setMeasure(price1, price2, tick1, tick2, hover)

INJECTABLE Sets the innerHTML value of the mMeasure HTML DOM Node to contain a measurement (price differential and bars/line distance), usually when a user hovers over a drawing. It is also used to display measurement as a drawing is being created or when using the 'Measure' tool.

Example: 23.83 (-12%) 11 Bars

It requires the UI to include the following div: <div class="currentMeasure"><span id="mMeasure" class="measureUnlit"></span></div>

It can be styled via CSS. See example.

Parameters:

Name	Type	Description
`price1`	number	Beginning price of the drawing
`price2`	number	Ending price of the drawing
`tick1`	number	Beginning tick of the drawing
`tick2`	number	Ending tick of the drawing
`hover`	boolean	True to turn on the measurement, false to turn it off

Examples

// Measuring tool styling CSS sample
			.currentMeasure {
				text-align: left;
				display: inline-block;
				margin: 4px 0 0 20px;
				height: 20px;
				line-height: 20px;
			}

			#mMeasure {
				display: inline-block;
				margin: 0 0 0 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width:140px;
			}

			// if you suppot light color scheme
			.Light .measureUnlit {color:#666;}
			.Light .measureLit {color:#000;}

			// if you support dark color scheme
			.Dark .measureUnlit {color:#cbcccd;}
			.Dark .measureLit {color:#fff;}

// This is an example of the framework to use for writing a prepend to further manipulate/display the measurements
STXChart.prototype.prepend("setMeasure",function(){

 // add your logic to manage the display of the measurements (price1, price2, tick1, tick2)

 //return true; //if you don't want to continue into the regular function
 //return false; //if you want to run trough the standard function once you are done with your custom code.
});

setPeriodicityV2(period, interval [, timeUnit] [, cb])

INJECTABLE Sets the periodicity and interval for the chart. Interval describes the raw data interval (1, 5, 30, "day") while period describes the multiple of that interval (7 minutes, 3 days, 7 X 5 minutes). This method sets the new periodicity and creates a new dataSet. If the interval has changed then the underlying data is no longer valid. If a quoteFeed has been attached to the chart (see STXChart#attachQuoteFeed ) , it will be called to get the new data, otherwise this.dataCallback will be called in an effort to fetch new data. See STXChart#dataCallback. If neither one is set and new data is needed, the function will fail.

This function can be called together with newChart() by setting the proper parameter values. See example in this section and STXChart#newChart for more details and compatibility with your current version.

Note that the kernel is capable of deriving weekly and monthly charts from daily data. Set dontRoll to true to bypass this functionality if you have raw week and month data in the masterData.

See STXChart#createDataSet for important notes on rolling up data with gaps.

Note on 'tick' interval:
When using 'tick', please note that this is not a time based display, as such, there is no way to predict what the time for the next tick will be. It can come a second later, a minute later or even more depending on how active a particular instrument may be. If using the future tick functionality ( STXChart.XAxis#futureTicks ) when in 'tick' mode, the library uses a pre-defined number ( STXChart.XAxis#futureTicksInterval )for deciding what interval to use for future ticks. See below example on how to override this default.

Parameters:

Name	Type	Argument	Description
`period`	number		The number of elements from masterData to roll-up together into one data point on the chart (one candle, for example). If set to 30 in a candle chart, for example, each candle will represent 30 raw elements of `interval` type.
`interval`	string		The type of data to base the `period` on. This can be a numeric value representing minutes, seconds or millisecond as inicated by `timeUnit`, "day","week", "month" or 'tick' for variable time x-axis. "hour" is NOT a valid interval. (This is not how much data you want the chart to show on the screen; for that you can use STXChart#setRange or STXChart#setSpan)
`timeUnit`	string	<optional>	Optional time unit to further qualify the specified numeric interval. Valid values are "millisecond","second","minute",null. If not set, will default to "minute". only applicable and used on numeric intervals
`cb`	function	<optional>	Optional callback after periodicity is changed. First parameter of callback will be null unless there was an error.

Since:

2015-11-1 `second` and `millisecond` periodicities are now supported by setting the `timeUnit` parameter.

Examples

// each bar on the screen will represent 15 minutes (a single 15 minute bar from your server)
stxx.setPeriodicityV2(1, 15, "minute", function(err){});

// each bar on the screen will represent 30 minutes formed by combining two 15-minute bars; each masterData element represening 15 minutes.
stxx.setPeriodicityV2(2, 15, "minute", function(err){});

// each bar on the screen will represent 1 tick and no particular grouping will be done.
stxx.setPeriodicityV2(1, "tick", null, function(err){});

// each bar on the screen will represent 1 day. MasterData elements will represent one day each.
stxx.setPeriodicityV2(1, "day", null, function(err){});

// this sets the periodicity to 5 minute bars when newChart is called
stxx.newChart(
		newSymbol,
		null,
		null,
		finishedLoadingNewChart(
			stxx.chart.symbol,
			newSymbol
		),
		{
			span:{base:'day',multiplier:2},		// this parameter will cause newChart to call setSpan with these parameters
			periodicity:{period:1,interval:5}	// this parameter will cause newChart to call setPeriodicityV2 with these parameters
		}
);

//How to override stxx.chart.xAxis.futureTicksInterval when in 'tick' mode:
var stxx=new STXChart({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.xAxis.futureTicksInterval=1; // to set to 1 minute, for example

setRange(params [, cb])

Sets a chart to the requested date range.

When a quotefeed is attached to the chart (ver 04-2015 and up), and not enough data is available in masterData to render the requested range, setRange will request more from the feed. Also, if no periodicity (params.periodicity) is supplied in the parameters, it may override the current periodicity and automatically choose the best periodicity to use for the requested range. So depending on your UI, you may need to use the callback to refresh the periodicity displayed on your menu.

Therefore, if you choose to let setRange set the periodicity, you should not call setPeriodicityV2 before or after calling this method.

Note: if the chart is in tick periodicity, the periodicity will be automatically selected even if one was provided because in tick periodicity we have no way to know how many ticks to get to fulfill the requested range.

If there is no quotefeed attached (or using a version prior to 04-2015), then setRange will use whatever data is available in the masterData. So you must ensure you have preloaded enough to display the requested range.

This function must be called after newChart() creates a datSet.

Note: versions prior to '2014-12-02' must use the legacy arguments : setRange(dtLeft, dtRight, padding, char, cb())

Parameters:

Name Type Argument Description

params

object

Parameters for the request

Properties

Name Type Argument Description

dtLeft

Date

Date to set left side of chart. If no left date is specified then the right edge will be flushed, and the same interval and period will be kept causing the chart to simply scroll to the right date indicated. Must be in 'dataZone' time if one set. See STXChart#setTimeZone and STXChart#convertToDataZone for more details.

dtRight

Date

Date to set right side of chart. Defaults to right now. Must be in 'dataZone' time if one set. See STXChart#setTimeZone and STXChart#convertToDataZone for more details.

padding

number

Whitespace padding in pixels to apply to right side of chart after sizing for date range. If not present the current whiteSpace will be preserved. Set to 0 to remove whiteSpace.

chart

STXChart.Chart

Which chart, defaults to "chart"

goIntoFuture

boolean

If true then the right side of the chart will be set into the future if dtRight is greater than last tick

goIntoPast

boolean

If true then the left side of the chart will be set into the future if dtLeft is less than first tick

periodicity

object

Override a specific periodicity combination to use with the range. Only available if a quoteFeed is attached to the chart. Note: if the chart is in tick periodicity, the periodicity will be automatically selected even if one was provided because in tick periodicity we have no way to know how many ticks to get to fulfill the requested range.

Properties

Name	Type	Argument	Description
`period`	Number	<optional>	Period as used by STXChart#setPeriodicityV2
`interval`	string	<optional>	An interval as used by STXChart#setPeriodicityV2
`timeUnit`	string	<optional>	A timeUnit as used by STXChart#setPeriodicityV2

pixelsPerBar

Number

Optionally override this value so that the auto-periodicity selected chooses different sized candles.

cb

function

Callback method. Will be called with the error retuned by the quotefeed, if any.

Since:

TBC params.rangePeriodicityMap deprecated in favor of new automatic algorithm

Example

// this will display all of the available data in the current chart periodicity
        	stxx.setRange({
		        dtLeft: stxx.chart.dataSet[0].DT,
		        dtRight: stxx.chart.dataSet[stxx.chart.dataSet.length - 1].DT,
		        periodicity:{period:stxx.layout.periodicity,interval:stxx.layout.interval}
		    });

setResizeTimer(ms)

Set a timer to check for chart resizing. Normally the chart is resized whenever the screen is resized by capturing a screen resize event. However if charts are embedded in a windowing GUI then they may not receive such events when windows are resized. Ideally, stxx.resizeChart() should be called whenever a window is resized however if this is inconvenient then the resize timer can be enabled to cover all bases without too much effort.

On initialization, STXChart.resizeDetectMS is checked for the default resize checking interval. The default is 1,000 milliseconds. To turn off resize checking simply set STXChart.resizeDetectMS=0; when you declare your STXChart object.

Parameters:

Name	Type	Description
`ms`	number	Number of milliseconds to poll. Zero to stop checking.

setSeriesRenderer(renderer)

Adds a series renderer to the chart, or updates it. A series renderer manages a group of series which are rendered on the chart in the same manner. For instance, several series which are part of the same stacked histogram.

You must manage the persistency of a renderer, and remove individual series (STX.Renderer#removeSeries ) , remove all series (STX.Renderer#removeAllSeries) or even delete the renderer (STXChart#removeSeriesRenderer) as needed by your application

Note: once a renderer is set for a chart it will remain loaded with all its series definitions and y axis (if one used) even if a new symbol is loaded. Calling setSeriesRenderer again with the same renderer name, it will cause the renderer to be updated with the params of the renderer sent in. Be careful not to send a different yAxis object unless you have deleted the previous one by completely removing all of its associated series (see STX.Renderer#removeAllSeries). Failure to do this will cause multiple axis to be displayed, the original one becoming orphan.

See STX.Renderer

See STXChart#removeSeriesRenderer for release functionality.

See STXChart#addSeries for additional implementation examples.

Parameters:

Name	Type	Description
`renderer`	STX.Renderer	The renderer

Since:

07/01/2015

Returns:

This seriesRenderer

Type: object

Example

// group the series together and select "line" as the rendering type to display the series.
var mdataRenderer=stxx.setSeriesRenderer(new STX.Renderer.Lines({params:{name:"My Line Series", type:"line", width:4, callback:mdataLegend}}))
		.removeAllSeries()
		.attachSeries(symbol1,{color:"red",permanent:true})
		.attachSeries(symbol2,"blue")
		.attachSeries(symbol3,"yellow")
		.ready()

setSpan(params, cb)

Sets the chart to display the requested span.

setSpan makes use of STXChart#setRange by converting the span requested into a date range. All parameters in setSpan will be sent into setRange (except if 'all' is requested), so you can pre-load things like params.rangePeriodicityMap in setSpan for setRange to use. Just keep in mind that if passing periodicity.interval and periodicity.period to be used in STXChart#setRange , then DO NOT set maintainPeriodicity or it will not pass the requested periodicity.

If a quotefeed is attached to the chart (ver 04-2015 and up), setSpan will attempt to gather more data from the feed (IF NEEDED) to fulfill the requested range AND may override the periodicity to provide the most optimal chart display. So depending on your UI, you may need to use the callback to refresh the periodicity displayed on your menu. Please see STXChart#setRange and STXChart#displayAll for complete details on how the periodicity is calculated. If 'all' data is requested STXChart#displayAll is called first to ensure all quotefeed data for that particular instrument is loaded. Note that 'all' will display the data in monthly periodicity. Calling setPeriodicityV2 immediately after setting a span may cause all of the data to be re-fetched at a different periodicity than the one used by the requested span. Once you have set your initial periodicity for the chart, there is not need to manually change it when setting a new span unless you are using the params.maintainPeriodicity flag; in which case you want to call setPeriodicityV2 before you set the span, so the setSpan call will use the pre-set periodicity. Setting a span to params.multiplier:168 params.span:'days' or params.multiplier:1 params.span:'week', for example, is really the same thing; same span of time. If what you are trying to do is tell the chart how you want the raw data to be fetched, that is done with stxChart.setPeriodvicityV2 or by letting setSpan figure it out as described above. Remember that by default weekly and monthly data is calculated using daily raw ticks. If your feed returns data already rolled up in monthly or weekly ticks, you can override this behavior by setting stxx.dontRoll to true ( see STXChart#dontRoll and the 'Periodicity and your masterData' section in the Data Loading tutorial)

Note: if the chart is in tick periodicity, the periodicity will be automatically selected even if it was requested to be maintained because in tick periodicity we have no way to know how many ticks to get to fulfill the requested range.

If there is no quotefeed attached (or using a version prior to 04-2015), then setStan will use whatever data is available in the masterData. So you must ensure you have preloaded enough to display the requested range.

This function must be called after newChart() creates a datSet, or together with newChart() by setting the proper parameter values. See example in this section and STXChart#newChart for more details and compatibility with your current version.

Setting params.span to "today" will cause the chart to display a market day but extend the chart all the way to market close (as per market hours set in the active market definition - see STX.Market)

Note: versions prior to '2015-05-01' must use the legacy arguments : setSpan(multiplier, span, padding, char,useMarketTZ,cb), and related example in this section.

Parameters:

Name Type Description

params

object

Parameter for the function

Properties

Name	Type	Argument	Description
`multiplier`	number		(params.period in legacy versions) Number of spans to show. To show 3 weeks of data, for example, set this to 3 and `params.span` to 'week'.
`base`	string		(params.interval in legacy versions) The base span to show. "minute","hour","day","week","month","year","all", "ytd" or "today". These spans are market hours sensitive , so if you ask for 1 hour, for example, at the time the markets are close, the span will find the last time the markets where open for the active symbol, and include the last market hour in the span. It will also exclude days when the market is closed. This span will be combined with the multiplier. Example 2 days, 4 months. Please note that "all" will attempt to load all of the data the quotefeed has available for that symbol. Use this span with caution.
`span`	string		(backward compatibility synonym with base)
`maintainPeriodicity`	boolean	<optional>	If set to true, it will maintain the current periodicity for the chart instead of trying to select the most optimal periodicity for the selected range. See STXChart#setRange for default rangePeriodicityMap. Note: if the chart is in `tick` periodicity, the periodicity will be automatically selected even if it was requested to be maintained because in `tick` periodicity we have no way to know how many ticks to get to fulfill the requested range.
`padding`	number	<optional>	Whitespace padding in pixels to apply to right side of chart after sizing for date range. If not set will default whitespace to 0.
`forceLoad`	boolean	<optional>	Forces a complete load (used by newChart)
`chart`	STXChart.Chart	<optional>	Which chart, defaults to "chart"

cb

function

Optional callback

Since:

- 04-2015: added "all", "today", "ytd" and automatic integration with STX.QuoteFeed
- 15-07-01: params.period changed to params.multiplier for clarity
- 15-07-01: params.interval changed to params.span for clarity
- 05-2016-10: save the desired span in stxx.layout to be restored with the layout between sessions

Examples

// this displays 5 days. It can be called anywhere including buttons on the UI
	stxx.setSpan ({
		multiplier: 5,
		span: "day",
		padding: 30
	});

// this displays 2 days as the initial range when newChart is called
stxx.newChart(
		newSymbol,
		null,
		null,
		finishedLoadingNewChart(
			stxx.chart.symbol,
			newSymbol
		),
		{
			span:{base:'day',multiplier:2},		// this parameter will cause newChart to call setSpan with these parameters
			periodicity:{period:1,interval:5}	// this parameter will cause newChart to call setPeriodicityV2 with these parameters
		}
);

setStartDate(dt)

Scrolls the chart so that the leftmost tick is the requested date. The date must be an exact match. There is no effect if the date is not found.

Parameters:

Name	Type	Description
`dt`	Date	The requested date

setStyle(obj, attribute, value)

Convenience method to set a style on the chart

Parameters:

Name	Type	Description
`obj`	string	The object whose style you wish to change (stx_grid, stx_xaxis, etc)
`attribute`	string	The style name of the object you wish to change
`value`	string	The value to assign to the attribute

Examples

stx.setStyle("stx_volume_up","color","green");

stx.setStyle("stx_volume_down","color","red");

setTimeZone(dataZone, displayZone)

Sets the data timezone (dataZone) and display timezone (displayZone) on an introday chart.

If the 'DT' fields have been adjusted prior to loading to reflect the proper time offset between the browser and the data server, or the 'Date' fields are loaded with a an ISO9601 date string such as'2015-01-01T09:10:00Z', there will be no need to use this function to set the dataZone.

If not embedded with a timezone, masterData dates are interpreted in reference to the CIQ.ChartEngine#dataZone (or the browser timezone if no dataZone is specified). The CIQ.ChartEngine#displayZone is then created and used to translate dates based on either the local browser's timezone, or the timezone selected by the end user.

Important: this method is only used to generate a display date when in introday periodicity. No time conversions will be done in daily, weekly or monthly periodicities, which only display a date without a time. As such, if the date has an implied timezone (as in the case of the epoch or ISO9601 date), the date will be displayed in a timezone to match the browser's timezone (12 midnight ET will show as 11 PM the previous day on CT). If the date does not have an implied timezone (as in the case of a string such as 'yyyy-mm-dd' for the Date field ) then the date will be displayed exactly as sent into the chart since the library will assume it is already in the desired timezone.

Time zone and the STX.QuoteFeed#fetch:
It is important to understand that if your quote feed returns a date string such as '07/07/16 9:30' as the time-stamp for a tick, (note there is no timezone specified) , the library will also store that in master data with no timezone specified (which really means the browser is storing it in local time on the 'DT' field). Setting the time zone using this method does not alter the date in the master data array but simply allows the chart to now how to deal with it. On a fetch call, that same raw date from the master data array will be sent in on the parameters object. So if your date did not have a time zone when added, then you must assume there is no time zone for it when provided as a parameter. The easiest way to remove a timezone from a date is to take that exact date and convert it to a string using STX.yyyymmddhhmmssmmm, for example.
If you want all of this to be automatic, then set the 'DT' filed instead with a time zone aware date or use an ISO9601 date string such as'2015-01-01T09:10:00Z' in the 'Date' field. In this case there will be no need to use this function to set the timezone for the data.

Parameters:

Name	Type	Description
`dataZone`	string	A valid timezone from the stxTimeZoneData.js library. This should represent the time zone that the master data comes from.
`displayZone`	string	A valid timezone from the stxTimeZoneData.js library. This should represent the time zone that the user wishes displayed.

setTransform(chart, transformFunction, untransformFunction)

Sets a transformation and untransformation function. Transforms can be used to transform the Y-Axis from absolute to relative values. For instance, comparison charts use a transform that adjusts from price to percentage. After this is called, chart.transformFunc and chart.untransformFunc will be set to those functions.

Parameters:

Name	Type	Description
`chart`	STXChart.Chart	The chart to transform
`transformFunction`	function	A transformation callback function which takes a number and returns the transformation of that number
`untransformFunction`	function	An untransformation callback function

setVolumeUnderlay(data)

Turns on or off the volume underlay indicator

Parameters:

Name	Type	Description
`data`	boolean	True to turn on the underlay

Deprecated:

showCrosshairs()

Turns crosshairs on

standardMarketIterator(begin [, outZone] [, chart])

Convenience function returns a new market iterator at the current chart's periodicity. For 'tick' intervals, since there is no predictable periodicity, the iterator interval will be determined by STXChart.futureTicksInterval See {@link STX.Market} and STX.Market.Iterator for more details.

Parameters:

Name	Type	Argument	Description
`begin`	Date		A JavaScript Date representing the iterator begin date in STXChart#dataZone timezone. See STX.Market#newIterator for details.
`outZone`	string	<optional>	A valid timezone from the stxTimeZoneData.js library. This should represent the time zone for the returned date. Defaults STXChart#dataZone. See STX.Market#newIterator for details.
`chart`	STXChart	<optional>	The chart object.

Returns:

A new iterator.

Type: Object

startAsyncAction()

Charts may require asynchronous data to render. This creates a dilemma for any external process that depends on a fully rendered chart (for instance a process to turn a chart into an image). To solve this problem, external processes can register for a callback which will tell them when the chart has been drawn. See STXChart.registerChartDrawnCallback.

To accommodate this requirement, studies, plugins or injections that render asynchronously should use startAsyncAction and STXChart#completeAsyncAction to inform the chart of their asynchronous activity.

startClip( [panelName] [, allowYAxis])

Initializes boundary clipping on the requested panel. Use this when you are drawing on the canvas and wish for the drawing to be contained within the panel. You must call STXChart#endClip when your drawing functions are complete.

Parameters:

Name	Type	Argument	Default	Description
`panelName`	string	<optional>		The name of the panel. Defaults to the chart itself.
`allowYAxis`	Boolean	<optional>	false	If true then the clipping region will include the y-axis. By default the clipping region ends at the y-axis.

storePanels()

Takes the existing panels and stores them in the layout.

streamTrade(data [, now] [, symbol] [, params])

Use this method to stream "last sale" prices into the chart. (See STXChart.appendMasterData for streaming OHLC data into the chart). This method is designed to append ticks to the master data while maintaining the existing periodicity, appending to the last tick or creating new ticks as needed. It will also fill in gaps if there are missing bars in a particular interval. If a trade has a date older than the begining of the next bar, the last bar will be updated even if the trade belongs to a prior bar; this could happen if a trade is sent in after hours at a time when the market is closed, or if it is received out of order. When in 'tick' interval, each trade will be added to a new bar and no aggregation to previous bars will be done. If the optional timestamp [now] is sent in, and it is older than the next period to be rendered, the last tick on the dataset will be updated instead of creating a new tick.

It is crucial that you ensure the date/time of the trade is in line with your masterData and dataZone See now parameter for more details.

This method leverages STXChart.appendMasterData for the actual data inserion into masterData. Please see STXChart.appendMasterData for additional details and performance throttle setings.

Note: versions prior to 15-07-01 must use the legacy arguments : streamTrade(price, volume, now, symbol)

Parameters:

Name Type Argument Description

data

object

Price & Volume Data, may include any or all of the following:

Properties

Name	Type	Argument	Description
`last`	number		Last sale price
`volume`	number	<optional>	Trade volume
`bid`	number	<optional>	Bid price
`ask`	number	<optional>	Offer/Ask price

now

Date

optional argument to specify date of trade. It must be a java script date [new Date().getTime()]. If omitted, defaults to "right now" in the set dataZone (see STXChart#setTimeZone); or if no dataZone is set, it will default to the browser's timezone (not recommended for international client-base since different users will see different times). It is important to note that this value must be in the same timezone as the rest of the masterData already sent into the charting engine to prevent tick gaps or overlaps.

symbol

string

trade symbol for series streaming

params

Object

Optional params to be passed to STXChart#appendMasterData

tickFromDate(dt [, chart] [, adj] [, forward])

Returns the tick (position in dataSet) given the requested date. The date does not need to match exactly. If the date lies between ticks then the earlier will be returned by default. If the date lies before or after the chart then STXChart#futureTick or {@link STXChart#pastTick} will be used to calculate the tick location.

Parameters:

Name	Type	Argument	Description
`dt`	string		Date in string format
`chart`	STX.Chart	<optional>	Optional chart object
`adj`	number	<optional>	Optional timezone adjustment in minutes to apply to date before getting tick
`forward`	boolean	<optional>	Optional switch to return the next tick as opposed to the previous, in case an exact match is not found

To Do:

Use native dates instead of string form dates.

Returns:

The tick location

Type: number

tickFromPixel(x [, chart])

Returns the tick (dataSet) position given the X pixel

Parameters:

Name	Type	Argument	Description
`x`	number		X pixel location
`chart`	STXChart.Chart	<optional>	A chart object

Returns:

The tick (position in the dataSet)

Type: number

translateIf(english)

Translates a built-in word if this.translationCallback callback function is set.

Parameters:

Name	Type	Description
`english`	string	The word to translate

Returns:

The translated word, or the word itself if no callback is set.

Type: string

undoLast()

Undoes the previous drawing state change. Note: by design this method only manages drawings manually added during the current session and will not remove drawings restored from a previous session. If you wish to remove all drawings use STXChart.clearDrawings. You can also view and interact with all drawings by traversing trough the STXChart.drawingObjects[] array which includes all drawings displayed on the chart, regardless of session. Removing a drawing from this list, will remove the drawing from the chart after a draw() operation is executed.

undoStamp()

Creates an undo stamp for the chart's current drawing state

unregisterChartDrawnCallback(fc, fc)

Removes a callback registration for when the chart has been drawn

Parameters:

Name	Type	Description
`fc`	function	The function to call
`fc`	obj	An object from STXChart#registerDrawnCallback

unsetTransform(The)

Removes a transformation/untransformation pair

Parameters:

Name	Type	Description
`The`	STXChart.Chart	chart to remove transformations from

updateFloatHRLabel(panel)

Redraws the floating price label(s) for the crosshairs tool on the y axis using STXChart#createYAxisLabel and sets the width of the y crosshair line to match pannel width.

Label style: stx-float-price ( for price colors ) and stx_crosshair_y ( for cross hair line )

Parameters:

Name	Type	Description
`panel`	STXChart.Panel	The panel on which to print the label(s)

Example

// controls Light color scheme
.Light .stx-float-price { color:#fff; background-color: yellow;}

valueFromPixel(y [, panel] [, yAxis])

Returns the value (price) given a Y-axis pixel. The value is relative to the the panel or the canvas.

Parameters:

Name	Type	Argument	Description
`y`	number		The y pixel position
`panel`	STXChart.Panel	<optional>	A panel object. If passed then the value will be relative to that panel. If not passed then the value will be relative to the panel that is in the actual Y location.
`yAxis`	STXChart.YAxis	<optional>	Which yAxis. Defaults to panel.yAxis.

Returns:

The value relative to the panel

Type: number

valueFromPixelUntransform(y, panel [, yAxis])

A version of STXChart#valueFromPixel that will untransform a transformation such as a comparison chart.

Parameters:

Name	Type	Argument	Description
`y`	number		The y pixel location
`panel`	STXChart.Panel		A panel object. It is strongly recommended to pass the panel! (see STXChart#valueFromPixel)
`yAxis`	STXChart.YAxis	<optional>	The yaxis to use. Defaults to panel.yAxis.

Returns:

The price or value

Type: number

watermark(panel [, config])

Creates watermarked text relative to a panel on the canvas. Use CSS style stx_watermark to control the text size and color.

Parameters:

Name Type Argument Description

panel

string

The name of the panel

config

object

Parameters for the request

Properties

Name	Type	Argument	Description
`h`	string	<optional>	"left", "right", "center" to place the watermark
`v`	string	<optional>	"top", "bottom", "middle" to place the watermark
`text`	string	<optional>	The text to watermark
`hOffset`	string	<optional>	offset in pixels of upper left corner from left or right margin
`vOffset`	string	<optional>	offset in pixels of upper left corner from top or bottom margin

whichPanel(y)

Returns the panel for the given Y pixel. Used for instance to determine which panel the crosshairs are in.

Parameters:

Name	Type	Description
`y`	number	Y pixel location

Returns:

The panel containing the Y location. Null if the Y location is outside of all panels.

Type: STXChart.Panel

Class: STXChart

new STXChart(config)

Parameters:

Examples

Classes

Namespaces

Members

<static> currentVectorParameters :Object

Type:

<static> currentVectorParameters.annotation :object

Type:

Example

<static> currentVectorParameters.axisLabel :string

Type:

<static> currentVectorParameters.currentColor :string

Type:

<static> currentVectorParameters.fibonacci :object

Type:

Example

<static> currentVectorParameters.fillColor :string

Type:

<static> currentVectorParameters.lineWidth :number

Type:

<static> currentVectorParameters.pattern :string

Type:

<static> currentVectorParameters.vectorType :string

Type:

<static> htmlControls :Object

Type:

Examples

<static> htmlControls.annotationCancel

<static> htmlControls.annotationSave

<static> htmlControls.baselineHandle

<static> htmlControls.chartControls

<static> htmlControls.crossX

<static> htmlControls.crossY

<static> htmlControls.floatDate

<static> htmlControls.handleTemplate

Example

<static> htmlControls.home

Example

<static> htmlControls.iconsTemplate

Examples

<static> htmlControls.mSticky

Example

allowEquations :boolean

Type:

allowScroll :boolean

Type:

Example

allowSideswipe :boolean

Type:

allowZoom :boolean

Type:

Example

axisBorders :boolean

Type:

callbacks.calculateTradingDecimalPlaces :function

Type:

callbacks.drawing :function

Type:

callbacks.layout :function

Type:

callbacks.move :function

Type:

callbacks.studyOverlayEdit :function

Type:

callbacks.studyPanelEdit :function

Type:

callbacks.symbolChange :function

Type:

callbacks.tap :function

Type:

Example

callbacks.tap :function

Type:

Example

callbacks.tap :function

Type:

Example