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
Namespaces
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 specificrecontruct
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 specificrecontruct
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 optionsType:
- 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 specificrecontruct
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 specificrecontruct
method for your desired drawing for more details(Example: STX.Drawing.horizontal#reconstruct)Type:
- number
- Default Value:
-
- 1
-
<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 specificrecontruct
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 detailsExample
// 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 tostx-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:
-
- TBD
-
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:
-
- TBD
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
- ver 15-07-01 gaps are automatically cleaned up unless this flag is set to false
- 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 tostx.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:
-
- 8
-
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 thefetch()
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:
-
- day
-
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:
-
- 1
-
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:
-
- 0
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:
-
- 1
-
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:
-
- 1
-
minimumZoomTicks :number
-
Minimum number of ticks to display when zooming in.
Type:
- number
- Since:
-
- 07-2016-16.6
- Default Value:
-
- 9
-
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 totrue
.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:
-
- 50
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:
-
- 100
-
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
-
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:
-
- 100
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 orfalse
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 totrue
.parameters
object <optional>
Optional parameters to describe the series
Properties
Name Type Argument Description display
string <optional>
Set to the text to display on the legend. If not set, the name of the series will be used (usually symbol)
symbolObject
string <optional>
The symbol to fetch in object format. This will be sent into the fetch() function when
parameters.data.useDefaultQuoteFeed
is set totrue
. You can send anything you want in the symbol object, but you must always include at least a 'symbol' element.field
string <optional>
Specify an alternatve (existing) field to draw data from (other than the name of the series itself)
isComparison
boolean <optional>
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 <optional>
Set to "step" to create a stairstep series rather than smooth lines
shareYAxis
boolean <optional>
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 <optional>
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 <optional>
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 <optional>
Width of line
minimum
number <optional>
Minimum value for the series. Overrides STX.minMax result.
maximum
number <optional>
Maximum value for the series. Overrides STX.minMax result.
color
string <optional>
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 <optional>
Pattern to draw line, array elements are pixels on and off
gaps
object <optional>
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 <optional>
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 <optional>
Fill style for mountain chart (if selected). For semi-opaque use rgba(R,G,B,.1)
permanent
boolean <optional>
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 <optional>
Set to
true
to activate. If active, will create a masterData entry if none exists for that DT.data
object <optional>
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 <optional>
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" inparameters.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();
- If
-
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()
anddraw()
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 <optional>
The chart to append the quotes. Defaults to the default chart.
params
Object <optional>
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 <optional>
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 <optional>
The canvas context. Defaults to the standard context.
confineToPanel
object <optional>
Panel the line should be drawn in, and not cross through. Or set to 'true' to confine to the main chart panel.
parameters
object <optional>
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 for10:20:00
, and one for10:21:30
; where you where probably expecting one for10:20:00
, and one for10:21:00
. But since there is no10: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 dateParameters:
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 detailsLabel 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
andlastTick
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()
-
- 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#setRangeParameters:
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.htmlControlsParameters:
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 CSSstyle stx_mountain_chart
, orstx_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 totrue
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
andstxx.callbacks.studyPanelEdit
must be set before you call STXChart#importLayout. Otherwise your imported studies will not have an edit capabilityIt 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 <optional>
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 <optional>
Which chart to create. Defaults to the default chart.
cb
function <optional>
Optional callback when newChart is loaded.
params
Object <optional>
Parameters to dictate initial rendering behavior
Properties
Name Type Argument Description span
Object <optional>
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 <optional>
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 <optional>
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 <optional>
The canvas context. Defaults to the standard context.
confineToPanel
string <optional>
Define the panel that the line should be drawn in, and not cross through
parameters
object <optional>
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 <optional>
The canvas context. Defaults to the standard context.
confineToPanel
string <optional>
Not currently implemented
parameters
object <optional>
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 usedelete myRenderer
. See example in STX.Renderer.LinesParameters:
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()
beforenewChart()
, with a value less thanminimumCandleWidth
,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()
beforenewChart()
, and the chart will result in a candle width less thanminimumCandleWidth
,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 bytimeUnit
, "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 intick
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 <optional>
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 <optional>
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 <optional>
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 <optional>
Which chart, defaults to "chart"
goIntoFuture
boolean <optional>
If true then the right side of the chart will be set into the future if dtRight is greater than last tick
goIntoPast
boolean <optional>
If true then the left side of the chart will be set into the future if dtLeft is less than first tick
periodicity
object <optional>
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 intick
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 <optional>
Optionally override this value so that the auto-periodicity selected chooses different sized candles.
cb
function <optional>
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 passingperiodicity.interval
andperiodicity.period
to be used in STXChart#setRange , then DO NOT setmaintainPeriodicity
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 theparams.maintainPeriodicity
flag; in which case you want to callsetPeriodicityV2
before you set the span, so the setSpan call will use the pre-set periodicity. Setting a span toparams.multiplier:168
params.span:'days'
orparams.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 settingstxx.dontRoll
totrue
( 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 intick
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 intick
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:
-
- Yes
-
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
anddataZone
Seenow
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>
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 nodataZone
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 <optional>
trade symbol for series streaming
params
Object <optional>
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 ) andstx_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 <optional>
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