Class: ChartEngine

CIQ. ChartEngine


new ChartEngine(config)

Previously STXChart. 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 CIQ.ChartEngine (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 CIQ.ChartEngine object itself. Generally you will want to at least include {container: }.

Since:

  • • 15-07-01 deprecated CIQ.ChartEngine#underlayPercentage
    • m-2016-12-01 deprecated renamed `CIQ.ChartEngine` from `STXChart`
Examples
// declare a chart
var stxx=new CIQ.ChartEngine({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 CIQ.ChartEngine({container: $$("chartContainer"),layout:{"chartType": "candle","candleWidth": 16}});

Classes

Chart
Driver
Panel
XAxis
XAxisLabel
YAxis

Namespaces

AdvancedInjectable

Members


currentVectorParameters :object

Each CIQ.ChartEngine 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 changed by overriding these defaults on your own files. See Custom Drawing Toolbar 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

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, programmatically 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 CIQ.ChartEngine({container:$$("chartContainer"), controls: {chartControls:null}});
// before calling newChart()
stxx.controls["chartControls"]=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. See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed syntax.

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 CIQ.ChartEngine({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 CIQ.ChartEngine({container:$$$(".chartContainer"), allowZoom:false, layout:{"candleWidth": 16, "crosshair":true}});

animations :object

Animations. These can be overridden with customized EaseMachines To disable an animation replace with an EaseMchine with one ms as the second parameter.

Type:
  • object
Example
stxx.animations.zoom=new CIQ.EaseMachine(Math.easeOutCubic,1);

autoPickCandleWidth :object

Allow the candle width to be determined dynamically when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap

Type:
  • object
Since:
  • m-2016-12-01
Default Value:
  • {"turnOn":false,"candleWidth":5}
Example
autoPickCandleWidth:{
					turnOn: true,
					candleWidth: 5
				}

autoPickCandleWidth[`candleWidth`] :number

Set if you want to set a specific candle width when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap. Set to '0' if you want the candle width to be determined according to chart type

Type:
  • number
Default Value:
  • 5

autoPickCandleWidth[`turnOn`] :boolean

Turn to 'true' if you want the periodicity to be determined dynamically when using CIQ.ChartEngine#setRange. This will require a valid CIQ.ChartEngine#dynamicRangePeriodicityMap

Type:
  • boolean

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

barsHaveWidth :object

Chart types whose bars have width, as opposed to a line-type chart whose "bars" are just a point on the chart. This is useful when the engine adjusts the chart for smooth scrolling and homing.

Type:
  • object
Since:
  • 4.0.0
Default Value:
  • {"undefined":true}

bypassRightClick :boolean

Set to true to disable right click to delete functionality for studies, series and drawings. Also see CIQ.ChartEngine#callbacks.rightClick

Type:
  • boolean
Since:
  • 2016-07-16

callbacks :object

Specify a callback by assigning a function to the event. Once the event triggers the callback will be executed.

Note: All callbacks have been deprecated in favor of CIQ.ChartEngine#addEventListener

Type:
  • object
Deprecated:
  • 4.0.0
Examples
// using event listener
stxx.addEventListener("callbackNameHere", function(callBackParametersHere){
	alert('triggered!');
});
// using callback function
stxx.callbacks.callbackNameHere=function(callBackPatamerersHere){
	alert('triggered!');
};

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:CIQ.ChartEngine, chart:CIQ.ChartEngine.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:CIQ.ChartEngine, symbol: String, symbolObject:Object, drawings: Object})

Type:
  • function

callbacks[`layout`] :function

Called when the layout changes

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

Type:
  • function

callbacks[`longhold`] :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:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy})

Type:
  • function
Since:
  • 2016-06-22
Examples
// using event listener
stxx.longHoldTime=... // Optionally override default value of 1000ms
stxx.addEventListener("longhold", function(lhObject){
	alert('longhold event at x: ' + lhObject.x + ' y: '+ lhObject.y);
});
// using callback function
stxx.longHoldTime=... // Optionally override default value of 1000ms
stxx.callbacks.longhold=function(lhObject){
	alert('longhold event at x: ' + lhObject.x + ' y: '+ lhObject.y);
});

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:CIQ.ChartEngine, panel:CIQ.ChartEngine.Panel, x:this.cx, y:this.cy, grab:boolean})

Type:
  • function

callbacks[`preferences`] :function

Called when preferences are changed calback({stx:CIQ.ChartEngine})

Type:
  • function

callbacks[`rightClick`] :function

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

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

Type:
  • function
Since:
  • 09-2016-19
Example
// using event listener
stxx.addEventListener("rightClick", function(rcObject){
	alert('right click event at x: ' + rcObject.x + ' y: '+ rcObject.y);
});

callbacks[`studyOverlayEdit`] :function

Called when a user right clicks on an overlay study. 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 must be set before you call CIQ.ChartEngine#importLayout. Otherwise your imported studies will not have an edit capability

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

The following CSS entry must also be present to enable the Right click to Manage text on the mouse-over context menu (div id="mSticky" generated by CIQ.ChartEngine.htmlControls):

.rightclick_study #mouseManageText {
display: inline; }

See CIQ.Studies.addStudy for more details.

Type:
  • function

callbacks[`studyPanelEdit`] :function

Called when a user clicks the edit button on a study panel.

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

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

See CIQ.Studies.addStudy for more details.

Type:
  • function

callbacks[`symbolChange`] :function

Called when the symbol is changed (when newChart is called), added (addSeries, addStudy) or removed (removeSeries, removeStudy). Note that this is not called if the symbol change occurs during an importLayout

Format:
callback({stx:CIQ.ChartEngine, symbol: String, symbolObject:Object, action:["master"|"add-series"|"remove-series"})

Type:
  • function
Since:
  • 06-2016-21

callbacks[`symbolImport`] :function

Called when the symbol is first imported into the layout.

Format:
callback({stx:CIQ.ChartEngine, symbol: String, symbolObject:Object, action:"master"})

Type:
  • function
Since:
  • 4.0.0

callbacks[`tap`] :function

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

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

Type:
  • function
Examples
// using event listener
stxx.addEventListener("tap", function(tapObject){
	alert('tap event at x: ' + tapObject.x + ' y: '+ tapObject.y);
});
// using callback
// this example  uses barFromPixel() to get the actual bar from the pixel location
stxx.callbacks.tap= function(tapObject){
	var msg= 'tap event at x: ' + tapObject.x + ' y: '+ tapObject.y;
	var bar=this.barFromPixel(this.cx);
 if(this.chart.dataSegment[bar]) {
	  msg+=' Date:' + this.chart.dataSegment[bar].DT;
	  msg+=' Close:' + this.chart.dataSegment[bar].Close;
 }
 alert (msg);
};

callbacks[`theme`] :function

Called when a theme is changed

Format:
callback({stx:CIQ.ChartEngine})

Type:
  • function

candleWidthPercent :boolean

Adjust to increase or decrease the default width of candles

Type:
  • boolean
Default Value:
  • 0.65

captureMouseWheelEvents :boolean

If set to false it will allow up/down mouseWheel / touchPad swiping 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 sliding of the page.

Type:
  • boolean
Since:
  • m-2016-12-01.4
Default Value:
  • true

captureTouchEvents :boolean

Primarily intended for mobile devices, if set to false it will allow up/down swiping 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 CIQ.ChartEngine#changeOccurred.

This function has been deprecated. Please use CIQ.ChartEngine#addEventListener instead.

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 'CIQ.ChartEngine.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 CIQ.ChartEngine#changeOccurred.

Type:
  • function
Since:
  • 4.0.0 - Deprecated
Deprecated:
  • Yes
Example
stxx.changeCallback=function(stxx, eventType){
		if(eventType=="layout") saveLayout();
		if(eventType=="vector") saveDrawing();
}

chart :object

Holds CIQ.ChartEngine.Chart object

Type:
  • object

charts :object

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

Type:
  • object

cleanupGaps :string

If set, CIQ.ChartEngine#doCleanupGaps will be automatically called when using a quoteFeed to have the chart create missing data points for lightly traded stocks that may have missing ticks for an intra-day or daily interval. If you are pushing data into the chart, you can still manually clean up your data as outlined in the example section.


carry will cause the closing price to be carried forward, resulting in dashes on a candle/bar chart or continuous line on a line or mountain chart.
gap will cause physical breaks to occur on the chart in the gapped position.

Note: the clean up process leverages the current periodicity and the active market definition, if any. So you must first set those to ensure proper clean up. If no market definition is enabled, the clean up will assume gaps need to be added during the entire 24 hours period, every day. See "CIQ.Market" for details on how to properly configure the library to your market hours requirements.
No gaps will be cleaned for tick since by nature it is no a predictable interval.

Type:
  • string
Since:

  • • 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
    • m-2016-12-01.4 "carry" and "gap" values now supported. Setting to non-false will default to "carry" for backward compatibility with prior versions.
Examples

Manually set and call the gaps cleaner function when pushing data into the chart

var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer")});
stxx.setMarketFactory(CIQ.Market.Symbology.factory);
stxx.cleanupGaps='gap';
stxx.setPeriodicity({period:1, interval:5, timeUnit:"minute"});
var cleanedData= stxx.doCleanupGaps(missingPointsData);
stxx.newChart("SPY", cleanedData);

If using a quoteFeed, just set the parameter will automatically call CIQ.ChartEngine#doCleanupGaps

var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer")});
stxx.attachQuoteFeed(yourFeed,{refreshInterval:1});
stxx.setMarketFactory(CIQ.Market.Symbology.factory);
stxx.cleanupGaps='carry';
stxx.setPeriodicity({period:1, interval:5, timeUnit:"minute"});
stxx.newChart("SPY");

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
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;
				}

colorByCandleDirection :boolean

Color a colored bar or a volume bar based on difference between open and close, rather than difference between previous close and close.

Type:
  • boolean
Since:
  • 4.0.0

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 CIQ.ChartEngine#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

cx :number

READ ONLY. Mouse pointer X pixel location in reference to the chart canvas. where cx=0 and cy=0 is the upper left corner of the chart.

Type:
  • number

cy :number

READ ONLY. Mouse pointer Y pixel location in reference to the chart canvas. where cx=0 and cy=0 is the upper left corner of the chart.

Type:
  • number

dataCallback :function

This is the callback function used by CIQ.ChartEngine#setPeriodicity 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 ( CIQ.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.
}

dataZone :string

READ ONLY. Timezone of the masterData, set by CIQ.ChartEngine#setTimeZone.

Type:
  • string

disableBackingStoreDuringTouch :boolean

On touch devices, when set to true, the backing store will be turned off while a user is panning or zooming the chart. This increases performance during the operation by reducing resolution. Resolution is restored once the user lifts their finger. Generally, you'll want to enable this dynamically when you know that a particular device has poor canvas performance. This defaults to true but can be disabled by setting to false.

Type:
  • boolean
Since:
  • 4.0.0

displayGridLinesInStudies :boolean

Set to true to display horizontal grid lines on studies. This parameter is only used when a custom y axis is not defined for the study.

Type:
  • boolean
Since:
  • 3.0.0

displayIconsClose :boolean

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

Type:
  • boolean
Since:
  • 3.0.7
Default Value:
  • true
Example
stxx.displayIconsClose=false;

displayIconsSolo :boolean

Set these to false to not display this panel management component. See CIQ.ChartEngine.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 the up and down arrows in the panel management component. See CIQ.ChartEngine.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

displayPanelResize :boolean

Set these to false to not display this panel management component. See CIQ.ChartEngine.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 CIQ.ChartEngine#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.

If set to false:

  • 'weekly' bars will be aligned to the first open market day of the week according to the active market definitions (Weeks start Sunday).
  • 'monthly' bar will be aligned to the first market day or the month according to the active market definitions.
Type:
  • boolean

drawingObjects :array

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

Type:
  • array
Default Value:
  • []

dynamicRangePeriodicityMap :array

Map of multiples to be used to dynamically determine periodicity (candle width) upon range selection when using CIQ.ChartEngine#setRange Used when CIQ.ChartEngine#autoPickCandleWidth is enabled

Default Value:

                [
                    {
                        interval : 1,
                        rangeInMS : CIQ.MINUTE
                    },
                    {
                        interval : 5,
                        rangeInMS : CIQ.MINUTE * 5
                    },
                    {
                        interval : 30,
                        rangeInMS : CIQ.MINUTE * 30
                    },
                    {
                        interval : 60,
                        rangeInMS : CIQ.MINUTE * 60
                    },
                    {
                        interval : "day",
                        rangeInMS : CIQ.DAY
                    },
                    {
                        interval : "month",
                        rangeInMS : CIQ.MONTH
                    },
                    {
                        interval : "year",
                        rangeInMS : CIQ.YEAR
                    }
                ]
Type:
  • array
Since:
  • 11-2016-29

escapeOnSerialize :boolean

When true serialize methods may escape their values with encodeURIComponent.

Type:
  • boolean
Since:
  • 4.1.0
Default Value:
  • true

eventListeners :array

READ ONLY. Array of event listeners. These listeners will be killed when CIQ.ChartEngine#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"

fetchMaximumBars :object

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

Type:
  • object
Default Value:
  • {"undefined":true}

grabbingScreen :boolean

READ ONLY.. Toggles to true when the screen is being panned

Type:
  • boolean

highLowBars :object

Chart types which plot more than one data field (OHLC charts). Putting a chart type here will disable the use of CIQ.ChartEngine.Chart#defaultPlotField.

Type:
  • object
Since:
  • 4.0.0
Default Value:
  • {"undefined":true}

layout :object

Contains the current screen layout

Type:
  • object
Example
// Layout parameters can be preset on a chart as follows:
var stxx=new CIQ.ChartEngine({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

READ ONLY. Active aggregation for the chart. See CIQ.ChartEngine#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

READ ONLY. Active scale for the chart. See CIQ.ChartEngine#setChartScale

Replaces CIQ.ChartEngine.layout.semiLog

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", "histogram", "step", "colored_step", "hlc", "colored_hlc"

Type:
  • string
Since:

  • • 05-2016-10.1 "baseline_delta_mountain" and "colored_mountain" are now available
    • 3.0.0 "histogram" and "step" are now available
    • 3.0.7 "hlc" now available
    • 4.0.0 "colored_step", "colored_hlc" is now available
Default Value:
  • candle

layout[`crosshair`] :boolean

Whether crosshairs are being displayed

Type:
  • boolean

layout[`extended`] :boolean

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

Type:
  • boolean

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 CIQ.Market. See CIQ.ExtendedHours and CIQ.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 CIQ.ChartEngine 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
Example
stxx.markerDelay=25;

markers :object

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

Type:
  • object

maxDataSetSize :number

Set a maximum size for the dataSet to prevent it from growing excessively large. Older data will be sliced off of the end (historical) of the dataSet array as new bars arrive. Set to 0 to let it grow forever.

Type:
  • number
Default Value:
  • 20000

maxMasterDataSize :number

Set a maximum size for masterData to prevent it from growing excessively large. Older data will be sliced off of the end of masterData array as new bars arrive. By default (set to 0) masterData is unlimited and will grow forever. Note: when rolling up data due to periodicity, you should anticipate large enough masterData to accomodate the desired chart length.

Type:
  • number
Since:
  • 3.0.0
Default Value:
  • false

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 CIQ.ChartEngine.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":true}

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

pinchingScreen :boolean

READ ONLY.. Toggles to true when the screen is being pinched

Type:
  • boolean

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:

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.

See CIQ.ChartEngine.AdvancedInjectable#drawCurrentHR

Type:
  • boolean
Since:
  • 05-2016-10

preferences[`highlightsRadius`] :number

Pixel radius for the invisible intersection box around the cursor used to determine if it has intersected with an element to be highlighted. Used on items removed with a right click such as series and drawings.

Only applicable if the user has not tapped on the screen to set the location of the cross-hair.

Type:
  • number
Since:
  • 3.0.0
Default Value:
  • 10

preferences[`highlightsTapRadius`] :number

Pixel radius for the invisible intersection box around the cursor used to determine if it has intersected with an element to be highlighted. Used on items removed with a right click such as series and drawings.

Only applicable if the user has tapped on the screen to set the location of the cross-hair.

Type:
  • number
Since:
  • 3.0.0
Default Value:
  • 30

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 CIQ.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
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
CIQ.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 CIQ.Studies.displayIndividualSeriesAsLine or CIQ.Studies.displaySeriesAsLine (this is overridden by the particular y-axis setting of CIQ.ChartEngine.YAxis#drawPriceLabels). This flag is checked inside these 2 functions to decide if a label should be set, as such if you do not wish to have a label on a particular study line, you can set this flag to false, before calling the function, and then back to true.

Type:
  • boolean
Default Value:
  • true
Example
//do not display the price labels for this study
					stxx.preferences.labels=false;
					CIQ.Studies.displaySeriesAsLine(stx, sd, quotes);

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

preferences[`language`] :String

Set by the user and the default language picker.

Type:
Since:
  • 4.0.0

preferences[`magnet`] :boolean

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

Type:
  • boolean

preferences[`timezone`] :String

Sets a prefered timezone for the chart to display intraday data in. Called by CIQ.ChartEngine.setTimeZone to load a users display preferences.

Type:
Since:
  • 4.0.0

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 CIQ.ChartEngine({container:$$$(".chartContainer"), preferences:{"whitespace": 20}});

preferences[`zoomAtCurrentMousePosition`] :boolean

Mouse wheel zooming is centered by the mouse position.

Type:
  • boolean
Since:
  • 4.0.0

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
Examples
stxx.preferences.zoomInSpeed=.98;
var stxx=new CIQ.ChartEngine({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
Examples
stxx.preferences.zoomOutSpeed=1;
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), preferences:{"zoomOutSpeed": 1}});

resizeDetectMS :number

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

Type:
  • number
Default Value:
  • 1000

reverseMouseWheel :boolean

Set to true to reverse direction of mousewheel for zooming

Type:
  • boolean

singleDrawingHighlight :boolean

Set to true to have drawings highlight only the last applied drawing if more than one is intersected at a time.

Type:
  • boolean
Since:
  • 5.0.0
Default Value:
  • true

soloPanelToFullScreen :boolean

Set this to true to hide even the chart panel when soloing a non-chart panel. Normally chart panels are not hidden when soloing.

Type:
  • boolean
Since:
  • 3.0.7
Example
stxx.soloPanelToFullScreen=true;

standaloneBars :object

Chart types whose bars represent a stand-alone entity as opposed to a vertex in a line-type chart. This is important when the engine tries to render the data points right off the chart; in a stand-alone bar, the points right off the chart need not be considered.

Type:
  • object
Since:
  • 4.0.0
Default Value:
  • {"undefined":true}

staticRangePeriodicityMap :array

Map of default values to be used to statically set periodicity (candle width) upon range selection when using CIQ.ChartEngine#setRange

Default Value:

                [
                    {
                        rangeInMS : CIQ.WEEK,    // Any range less than a week, load 5 minute bars
                        periodicity : 1,
                        interval : 5,
                        timeUnit : 'minute'
                    },
                    {
                        rangeInMS : CIQ.MONTH,    // Any range less than a month, load 30 minute bars
                        periodicity : 1,
                        interval : 30,
                        timeUnit : 'minute'
                    },
                    {
                        rangeInMS : CIQ.YEAR,    // Any range less than a year, load day bars
                        periodicity : 1,
                        interval : "day"
                    },
                    {
                        rangeInMS : CIQ.DECADE,    // Any range less than 10 years, load weekly bars
                        periodicity : 1,
                        interval : "week"
                    },
                    {
                        rangeInMS : CIQ.DECADE * 10,    // Any range less than a century, load monthly bars
                        periodicity : 1,
                        interval : "month"
                    },
                    {
                        rangeInMS : Number.MAX_VALUE,    // Anything greater than a century, load yearly bars
                        periodicity : 12,
                        interval : "month"
                    }
                ]
Type:
  • array
Since:
  • m-2016-12-01

streamParameters :object

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

Type:
  • object

streamParameters[`fillGaps`] :boolean

If true then CIQ.ChartEngine#doCleanupGaps is called so long as CIQ.ChartEngine#cleanupGaps is also set to true. This will esnure gaps will be filled in the master data from the last tick in the chart to the date of the trade. Only applicable when using streamTrade().
Reminder: tick does not fill any gaps as it is not a precitable interval.

Type:
  • boolean
Since:
  • 2016-03-11
Deprecated:
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

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 something 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 something 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. CIQ.ChartEngine#setMasterData is called by CIQ.ChartEngine#newChart.

This is a useful function if your data is not properly formated as required by the charting library. Instead of having to iterate through 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.valueOf()),
		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 CIQ.I18N.translate

Type:
  • function

useBackingStore :boolean

When set to true, the backing store for the canvas is used. This results in crisper display but with a noticeable performance penalty in some browsers. The default is true. If improved performance is necessary, set the variable as shown in the example. The example allows mobile devices (android/ipad/iphone) to continue using the backing store while being bypassed in others (desktop browsers).

Type:
  • boolean
Since:
  • 3.0.0
Default Value:
  • true
Example
stxx.useBackingStore=CIQ.isMobile;

xAxisAsFooter :number

Set to true to display the xAxis below all panels and extend the vertical grid lines accordingly. By default, the x axis will be rendered right under the main panel and the grid lines will not extend to secondary (study) panels under it.

Type:
  • number
Since:

  • • 05-2016-10
    • 4.1.0 now defaults to true
Default Value:
  • true

xaxisHeight :boolean

Sets the x axis height in pixels.

Type:
  • boolean
Since:
  • 4.1.0 Now defaults to 30 px
Default Value:
  • 30

yaxisLabelStyle :string

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

Type:
  • string
Default Value:
  • roundRectArrow
Example
var stxx=new CIQ.ChartEngine({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 CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.yTolerance=0;

crosshairX :number

READ ONLY. Current X screen coordinate of the crosshair.

Type:
  • number

crosshairY :number

READ ONLY. Current Y screen coordinate of the crosshair.

Type:
  • number

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
					}
				}

currentVectorParameters[`axisLabel`] :string

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

Type:
  • string
Default Value:
  • true

currentVectorParameters[`currentColor`] :string

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

Type:
  • string
Default Value:
  • auto

currentVectorParameters[`fibonacci`] :object

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

Type:
  • object
Since:
  • 3.0.9 '0.786' and '-0.786' levels added
Example
fibonacci:{
					trend:{color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
					fibs:[
						  {level:-0.786, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
					      {level:-0.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:-0.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:0, color:"auto", parameters:{pattern:"solid", lineWidth:1}, display: true},
					      {level:0.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:0.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:0.786, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}},
					      {level:0.5, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:1, color:"auto", parameters:{pattern:"solid", lineWidth:1}, display: true},
					      {level:1.382, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true},
					      {level:1.618, color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}, display: true}
					      ],
					extendLeft: false,
					printLevels: true,
					printValues: false,
					timezone:{color:"auto", parameters:{pattern:"solid", opacity:0.25, lineWidth:1}}
				}

currentVectorParameters[`fillColor`] :string

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

Type:
  • string
Default Value:
  • #7DA6F5

currentVectorParameters[`lineWidth`] :number

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

Type:
  • number
Default Value:
  • 1

currentVectorParameters[`pattern`] :string

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

Type:
  • string
Default Value:
  • solid

currentVectorParameters[`vectorType`] :string

Drawing to activate.
See 'Classes' in CIQ.Drawing for available drawings. Use CIQ.ChartEngine#changeVectorType to activate.

Type:
  • string

drawingLine :boolean

READ ONLY. Toggles to true when a drawing is initiated

Type:
  • boolean

htmlControls[`baselineHandle`]

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


htmlControls[`chartControls`]

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


htmlControls[`floatDate`]

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


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;
}

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 CIQ.ChartEngine#home for more details

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

htmlControls[`iconsTemplate`]

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

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

// for backwards compatibility, this is still supported:
.chart-title{
		display	: none;
	}
// example to hide all panels titles
.stx-panel-control .stx-panel-title{
		display:none;
}

insideChart :boolean

READ ONLY. Toggles to true whenever the mouse cursor is within the chart (canvas)

Type:
  • boolean

ipadMaxTicks :number

This setting limits the maximum number of bars to be drawn on an iOS device to help address performance limitations on that OS.

Type:
  • number
Default Value:
  • 1500

overXAxis :boolean

READ ONLY. Toggles to true if the mouse cursor is over the X Axis.

Type:
  • boolean

overYAxis :boolean

READ ONLY. Toggles to true if the mouse cursor is over the Y Axis.

Type:
  • boolean

resizingPanel :boolean

READ ONLY. Toggles to true when a panel is being resized

Type:
  • boolean

useAnimation :boolean

Browser animation API is on by default.

Type:
  • boolean
Default Value:
  • true

Methods


chartShowsHighs(chartType)

Returns true if the chartType displays OHL data.

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
Deprecated:
  • Yes
Returns:

True if the chart type only displays close values

Type
boolean

hideDates()

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

Returns:
Type
false

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, callback)

Register a listener to a chart event in the chart engine instance. Events are tracked in the CIQ.ChartEngine.callbackListeners object. Valid listeners:

Parameters:
Name Type Description
type string/array

The event to listen for. (See the description above for valid options.)

callback function

The listener to call when the event is triggered.

Since:

  • • 04-2016-08
    • 4.0.0 'doubleTap' is now available
    • 4.0.0 type can be an array of event options
Returns:

An object containing the type and cb. It can be passed to CIQ.ChartEngine#removeEventListener later to remove the event.

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

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

INJECTABLE Adds a series to the chart.

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.

Example 1

Example 2

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.
Parameters:
Name Type Argument Description
id string

The name of the series. If not passed then a unique ID will be assigned. (parameters.symbol and parameters.symbolObject will default to using id if they are not set explicitly.)

parameters object <optional>

Optional parameters to describe the series

Properties
Name Type Argument Default 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)

symbol string <optional>

The symbol to fetch in string format. This will be sent into the fetch() function.

symbolObject string <optional>

The symbol to fetch in object format. This will be sent into the fetch() function, if no data is provided. 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 field to draw data from (other than the symbol)

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. CIQ.ChartEngine#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 and print its corresponding current price label on the y axis. When set to false the series is superimposed on the chart maintaining the relative shape of the line but not on the actual y axes values and no current price will be displayed(used when rendering multiple series that do not share a common value range). Will automatically override to true if 'isComparison' is set. 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, CIQ.ChartEngine.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, CIQ.ChartEngine.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 CIQ.minMax result.

maximum number <optional>

Maximum value for the series. Overrides CIQ.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.

baseColor string <optional>

Color for the base of a mountain series. Defaults to the containerColor.

pattern array <optional>

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

fillGaps object <optional>

Will fill any missing points in the series relative to masterData. Set to "carry" to carry forward the last point. Note that this is independent of {CIQ.ChartEngine#cleanupGaps} which ensures (for all series and masterData) that a point exists for each valid market date

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 CIQ.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). If not provided a gradient is created with color and baseColor.

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, see CIQ.Renderer#attachSeries for details on how to prevent an attached series from being removed by a user.

data object <optional>

Data source for the series.

• If this field is omitted, the library will connect to the QuoteFeed (if available) to fetch initial data ( unless parameters.loadData is set to false), and manage pagination and updates.

• If data is sent in this field, it will be loaded into the masterData, but series will not be managed by the QuoteFeed (if available) for pagination or updates. This should contain an array of objects in {DT,Date,Value} format as outlined by the following properties:

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)

panel string <optional>

the panel name on which the series should display

action string <optional>
"add-series"

Optionally override what action is sent in symbolChange events. Set to null to prevent a symbolChange event.

loadData boolean <optional>
true

Optionally include and set to false if you know the initial data is already in the masterData array or will be loaded by another method. The series will be added but no data requested. Note that if you remove this series, the data points linked to it will also be removed which may create issues if required by the chart. If that is the case, you will need to manually remove from the renderer linked to it instead of the underlying series itself.

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 no data is provided.

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 longer used. Instead if `parameters.data.useDefaultQuoteFeed` is set to `true` the series will be initialized 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.
    • 09-2016-19 `parameters.data.DT` can also take an epoch number.
    • 09-2016-19 `parameters.data.useDefaultQuoteFeed` no longer used. If no `parameters.data` is provided the quotefeed will be used.
    • 3.0.8 `parameters.forceData` no longer used, now all data sent in will be forced.
    • 3.0.8 parameters.loadData added.
    • 4.0.0 Added parameters.symbol (string equivalent of parameters.symboObject)
    • 4.0.0 Multiple series can now be added for the same underlying symbol. parameters.field or parameters.symbolObject can be used to accomplish this.
    • 4.0.0 Added `parameters.baseColor`.
Returns:

The series object

Type
object
Examples
// add a series without requesting initial data from the quoteFeed.
stxx.addSeries(
		"Close",
		{color:"purple",
		loadData:false}
);
// add a series and display it as a dashed line.
stxx.addSeries(
		symbolGoesHere,
		{color:"purple",pattern:[3,3]}
);
// add a series and then enable a study using for it.
// In the case we are adding a Moving average for the series.

	stxx.addSeries("ge", {color:"yellow",shareYAxis:true},function(){

			// in this case we are adding a moving average study
		    var inputs = {
	        "Period": 20,
	        "Field": "ge",
	        "Type": "ma"
	    };
	    var outputs = {
	        "MA": "red"
	    };
	    CIQ.Studies.addStudy(stxx, "ma", inputs, outputs);
	});
// set location of your legend, if you want one.
var mySymbol={symbol:"GE", source:"realtimedb"};
var mySymbol2={symbol:"GDP", source:"fundamentaldb"};

stxx.addSeries(null, {color:"purple", symbolObject:mySymbol});
stxx.addSeries(null, {color:"green", symbolObject:mySymbol2});
// add a legend relative to the y axis top
// The engine is smart enough to use the series symbol, or "Close" if the symbol doesn't exist in the returned data from your quotefeed
// but if you want to use any other field then you'll need to specify it like this.

stxx.addSeries("GE", {color:"purple", field: "Open"});
// 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,color:"purple", gaps:{pattern:[3,3]},width:4,permanent:true});
	stxx.addSeries(symbol2, {display:"Description 2",isComparison:true,color:"pink", gaps:{pattern:[3,3]},width:4});
	stxx.addSeries(symbol3, {display:"Description 3",isComparison: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});
	stxx.addSeries(symbol2, {display:"Description 2",isComparison:true});
	stxx.addSeries(symbol3, {display:"Description 3",isComparison: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 CIQ.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);
		}
	}

	// add a series with a color to immediately render. It also calls callbackFunct after the data is returned from the fetch.
	stxx.addSeries(symbol1, {display:"Description",color:"brown"},callbackFunct(symbol1));
// 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",width:4});
	stxx.addSeries("SNE", {display:"Sony",width:4});

	var axis=new CIQ.ChartEngine.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 CIQ.Renderer.Lines({params:{name:"lines", type:"mountain", yAxis:axis}}));

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

addYAxis(panel, yAxis)

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

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to add (i.e. stxx.chart.panel)

yAxis CIQ.ChartEngine.YAxis

The YAxis to add (create with new CIQ.ChartEngine.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 CIQ.ChartEngine.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 CIQ.ChartEngine 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 CIQ.ChartEngine#removeInjection to remove it later on.

Type
object

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

INJECTABLE Use this method to add new OHLC bars to the end of the chart, replace existing bars, or stream individual last sale data tick by tick as they are received from a streaming feed.

Note that this method will NOT insert new elements in the middle of the chart, but rather overwrite overlapping data.

The following rules apply when adding new OHLC bars to the end of the chart or replacing existing bars:

  • The process 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/update (see params.allowReplaceOHL) 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 masterData 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.

The following rules apply when streaming individual last sale data tick by tick as they are received from a streaming feed:

  • This method is designed to update the chart while maintaining the existing periodicity, augmenting existing ticks or creating new ticks as needed.
  • For a primary series, the Close, High and Low prices will be updated to maintain the integrity of the bar, and the volume will be added to the existing bar's volume.
  • For a secondary series, the series field will be set or updated with the price sent, creating new bars where none existed, but also respecting the periodicity.
  • When in 'tick' interval, each trade will be added to a new bar and no aggregation to previous bars will be done.

Performance:

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

Additional Notes:

  • It is crucial that you ensure the date/time of the trade is in line with your masterData and dataZone See DT parameter for more details.
  • This method is not intended to be used as a way to load initial chart data, or data changes triggered by periodicity changes.

See the Data Integration tutorial for more detail on how to load initial data.

See the Streaming tutorial for more the details.

Parameters:
Name Type Argument Description
appendQuotes array/object

An array of properly formatted OHLC quote object(s). See Data Format and CIQ.ChartEngine#setMasterData.
Or a last sale object with the following elements:

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

DT number <optional>

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

chart CIQ.ChartEngine.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 immediately updated regardless of CIQ.ChartEngine#streamParameters

fillGaps boolean <optional>

If true then CIQ.ChartEngine#doCleanupGaps is called so long as CIQ.ChartEngine#cleanupGaps is also set to true. This will esnure gaps will be filled in the master data from the last tick in the chart to the date of the trade.
Reminder: tick does not fill any gaps as it is not a precitable interval.

secondarySeries boolean <optional>

Set to the name of the element ( valid comparison symbol, for example) to load data as a seconday series. Calls CIQ.addMemberToMasterdata.

useAsLastSale boolean <optional>

If not using a 'last sale' formatted object in appendQuotes, you can simply set this parameter to true to force the data as a last sale price; or further define it by creating an object including other settings as needed. This option is available in cases when a feed may always return OHLC formatted objects or a 'Close' field instead of a 'Last' field, even for last sale streaming updates. By definition a 'last' sale can only be a single record indicating the very 'last' sale price. As such, even if multiple records are sent in the appendQuotes array when this flag is enabled, only the last record's data will be used. Specifically the 'Close' and 'Volume' fields will be streamed.

Properties
Name Type Argument Description
aggregatedVolume boolean <optional>

If your last sale updates send current volume for the bar instead of just the trade volume, set this parameter to 'true' in the params.useAsLastSale object. The sent in volume will be used as is instead of being added to the existing bar's volume.

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.timeout or params.bypassGovernor
    • 3.0.0 `appendQuotes` now also takes last sale data to allow streaming capabilities. This can now be used instead of streamTrade.
    • 3.0.0 new params.fillGaps, params.secondarySeries, params.useAsLastSale
    • 4.0.0 last sale streaming will now update a bar in the past to comply with the date sent in; instead of just updating the current tick.
    • 4.0.3 params.useAsLastSale.aggregatedVolume is now available.
Examples
// this example will stream the last price on to the appropriate bar and add 90 to the bar's volume.
	  stxx.appendMasterData(
		  {
			  Last: 50.94,
			  Volume: 90
		  }
	  );
// this example will stream the last price on to the appropriate bar and set the volume for that bar to 90.
	  stxx.appendMasterData(
		  {
			  Last: 50.94,
			  Volume: 90
		  },
		  null,
		  {useAsLastSale: {aggregatedVolume:true}}
	  );
// this example will add or replce a complete OHLC bar.
	  stxx.appendMasterData(
		  [
		  	{"Date":"2015-04-16 16:00","Open":152.13,"High":152.19,"Low":152.08,"Close":152.11,"Volume":4505569},
		  	{"Date":"2015-04-17 09:30","Open":151.76,"High":151.83,"Low":151.65,"Close":151.79,"Volume":2799990},
		  	{"Date":"2015-04-17 09:35","Open":151.79,"High":151.8,"Low":151.6,"Close":151.75,"Volume":1817706}
		  ]
	  );

attachEngineQuoteFeed( [quoteFeed] [, behavior])

Attaches a quote feed to the charting engine. This causes the chart to pull data from the quotefeed as needed.

Parameters:
Name Type Argument Description
quoteFeed object <optional>

your quoteFeed object.

behavior object <optional>

Optional behavior object to initialize quotefeed

Properties
Name Type Argument Description
refreshInterval number <optional>

If non null, then sets the frequency for fetchUpdates (if null or zero then fetchUpdate will not be called)

callback function <optional>

Optional callback after any fetch to enhance functionality. It will be called with the params object used with the fetch call.

noLoadMore number <optional>

If true, then the chart will not attempt to load any more data after the initial load.

loadMoreReplace boolean <optional>

If true, then when paginating, the driver will replace the masterData instead of prepending. Set this if your feed can only provide a full data set of varying historical lengths.

Since:
  • 2016-12-01
Example

Attach a quotefeed and have the driver call fetchUpdateData once per second

stxx.attachEngineQuoteFeed(yourQuotefeed, {refreshInterval: 1});

attachQuoteFeed( [quoteFeed] [, behavior])

Attaches a quote feed to the charting engine. This causes the chart to pull data from the quotefeed as needed.

Parameters:
Name Type Argument Description
quoteFeed object <optional>

your quoteFeed object.

behavior object <optional>

Optional behavior object to initialize quotefeed

Properties
Name Type Argument Description
refreshInterval number <optional>

If non null, then sets the frequency for fetchUpdates (if null or zero then fetchUpdate will not be called)

bufferSize number <optional>

Set to the number of undisplayed historical ticks always buffered in the masterData. Useful to prevent temporary gaps on studies while paginating.

callback function <optional>

Optional callback after any fetch to enhance functionality. It will be called with the params object used with the fetch call.

noLoadMore number <optional>

If true, then the chart will not attempt to load any more data after the initial load.

loadMoreReplace boolean <optional>

If true, then when paginating, the driver will replace the masterData instead of prepending. Set this if your feed can only provide a full data set of varying historical lengths.

adjustmentMethod string <optional>

Set to override the quotefeed's default dividend/split adjustment method. The value will depend on the particular quotefeed implementation.

Since:

  • • 2016-12-01
    • 5.0.0 behavior.bufferSize is now available.
Example

Attach a quotefeed and have the driver call fetchUpdateData once per second

stxx.attachQuoteFeed(yourQuotefeed, {refreshInterval: 1});

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 the position (array index) of the first dataSegment element encountered given the X pixel. Do not reference this into dataSegment without checking bounds, because the return value may be negative or greater than the dataSegment array length.

See CIQ.ChartEngine.tickFromPixel if you wish to locate the dataSet position.

Parameters:
Name Type Argument Description
x number

An X pixel location on the chart

chart CIQ.ChartEngine.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. If the combined initial values are greater than the y-axis height, then both zoom and scroll will be rest to 0;

Parameters:
Name Type Description
yAxis CIQ.ChartEngine.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

Since:
  • 4.0.0 Allow color:"transparent" to pass through and not use defaultColor. Instead, use defaultColor if there is no style.color.
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 CIQ.ChartEngine.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, drawings or theme occurs. But can be used to trigger any event. If CIQ.ChartEngine#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 CIQ.ChartEngine#changeCallback has been programmed to handle is valid.


changeVectorParameter(value, value)

Sets the current drawing parameter as described by CIQ.ChartEngine.currentVectorParameters (color, pattern, etc)

Parameters:
Name Type Description
value string

The name of the drawing parameter to change (currentColor, fillColor, lineWidth, pattern, axisLabel, fontSize, fontStyle, fontWeight, fontFamily)

value string

The value of the parameter

Since:
  • 3.0.0
Returns:

True if property was assigned

Type
boolean
Example
this.stx.changeVectorParameter("currentColor","yellow");  // or rgb/hex
		this.stx.changeVectorParameter("axisLabel",false);  // or "false"
		this.stx.changeVectorParameter("lineWidth",5);  // or "5"
		this.stx.changeVectorParameter("fontSize","12");  // or 12 or "12px"
		this.stx.changeVectorParameter("pattern","dotted");

changeVectorType(value)

Sets the current drawing tool as described by CIQ.ChartEngine.currentVectorParameters (segment, line, 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(styleObject)

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
styleObject object

A style object derived from getComputedStyle

Returns:

A new 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 CIQ.ChartEngine#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 CIQ.ChartEngine#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 CIQ.ChartEngine#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 browser time - as in 'new Date();'

Since:
  • 07-2016-16.6
Returns:

Date converted to dataZone

Type
Date

createDataSet( [dontRoll] [, whichChart] [, params])

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 setPeriodicity). 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:

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.setPeriodicity({period:60, interval:1, timeUnit:"second"}); ) and your master data has objects with the following time stamps: 10:20:00, 10:20:11, 10:20:24, 10:20:50, 10:20:51, 10:21:30, 10:21:45, 10:21:46, 10:21:59, your aggregated results will be an object for 10:20:00, and one for 10:21:30; where you where probably expecting one for 10:20:00, and one for 10:21:00. But since there is no 10:21:00 object in the master data, the very next one will be used as the starting point for the next aggregation...and so on. To eliminate this problem and guarantee that every bar starts on an exact time for the selected aggregation period, you must first fill in the gaps by setting the CIQ.ChartEngine#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 CIQ.ChartEngine.Chart <optional>

The chart to roll. Otherwise rolls all charts on screen.

params object <optional>

Additional parameters

Properties
Name Type Description
appending boolean

Set to true if called after appending to end of masterdata (CIQ.ChartEngine#appendMasterData). It will execute a partial regeneration to increase performance.


createDrawing(type, parameters)

Creates a new drawing of the specified type with the specified parameters. See Using and Customizing 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
CIQ.Drawing

createTickXAxisWithDates( [chart])

Draws date based x-axis.

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 CIQ.Market for details on how to set market hours for the different exchanges.

CIQ.ChartEngine.XAxis#timeUnit and {@linkCIQ.ChartEngine.XAxis#timeUnitMultiplier} can be hard set to override the algorithm (See Custom X-axis for additional details).

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

Parameters:
Name Type Argument Description
chart object <optional>

The chart to print the xaxis

Since:
  • 3.0.0 Using x axis formatter now is available for year and month boundaries.
Returns:

axisRepresentation that can be passed in to CIQ.ChartEngine#drawXAxis

Type
Array.<CIQ.ChartEngine.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 CIQ.ChartEngine.AdvancedInjectable#updateChartAccessories and CIQ.ChartEngine.AdvancedInjectable#headsUpHR for more details

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

Parameters:
Name Type Description
panel CIQ.ChartEngine.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 CIQ.ChartEngine.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 CIQ.ChartEngine.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 CIQ.ChartEngine.YAxis <optional>

Optionally specifiy which yAxis if there are multiple for the panel

Since:

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

chart CIQ.ChartEngine.Chart <optional>

An optional chart object

nativeDate boolean <optional>

True to return as date object otherwise returns in yyyymmddhhmm form

Returns:

The date form dictated by native param

Type
string

defaultMarkerPlacement(params)

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

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

See CIQ.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: CIQ.ChartEngine.prototype.defaultMarkerPlacement = yourPlacementFunction;

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 CIQ.ChartEngine.Panel

The panel

yAxis CIQ.ChartEngine.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 CIQ.destroy


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 CIQ.ChartEngine.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 no feed is attached, it will simply display all the data loaded in the present periodicity.
If the chart is driven by a QuoteFeed and no periodicity is requested, it will default to 'monthly'. It will then call QuoteDriver.loadAll() which makes multiple queries to ensure all data available from the quote feed is loaded. Once all the data is loaded, the chart will be set to cover that range using CIQ.ChartEngine#setRange

Parameters:
Name Type Argument Description
params object <optional>

Optional parameters in same format as CIQ.ChartEngine#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 CIQ.ChartEngine.controls.mSticky. To disable stickies, set that element to null. See CIQ.ChartEngine.htmlControls

Parameters:
Name Type Description
message string

The message to display in the sticky

backgroundColor string

The background color to set the sticky (the foreground color will be picked automatically)

forceShow boolean

If true, will always show the sticky (as opposed to only on hover)

noDelete boolean

If true, will hide the delete instructions/button

type string

"study","drawing","series", or whatever is causing the sticky to be displayed.


doCleanupDates(quotes, interval)

Method to convert DT object of quote to a JS Date and strip off the time. Must be a daily interval or function will not make changes.

Note that this will not apply to the 'Date' field!!!!!

Parameters:
Name Type Description
quotes array

The quote array to be gap-filled

interval string

Interval of the quotes ("day", etc).

Since:
  • 4.0.0

doCleanupGaps(quotes [, chart] [, params])

If CIQ.ChartEngine#cleanupGaps is set, this method will insert bars in an array of quotes for those periods missing a record according to the market hours and the current periodicity. See "CIQ.Market" for details on how to properly configure the library to your market hours requirements.

This method will not be called for tick since by nature it is no a predictable interval.

This method is automatically called if you are using a quoteFeed and have CIQ.ChartEngine#cleanupGaps set, but can be manually called if pushing or streaming 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 CIQ.ChartEngine#dontRoll ).

See CIQ.ChartEngine#cleanupGaps, for more details.

Parameters:
Name Type Argument Description
quotes array

The quote array to be gap-filled

chart CIQ.ChartEngine.Chart <optional>

Optional chart

params object <optional>

Optional parameters

Properties
Name Type Argument Description
cleanupGaps string <optional>

Optionally pass this in to override the default

Since:

  • • 07/01/2015 it now supports cleanups for daily intervals and foreign exchanges instead of just intraday equities.
    • 3.0.7 added params.cleanupGaps to allow developers to use this function standalone
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.


drawBarChartHighPerformance(panel, style, condition)

Animation Loop This method draws bars on the chart when no custom colorFunction is defined. It is highly tuned for performance. This method should rarely if ever be called directly. Instead see CIQ.ChartEngine.AdvancedInjectable#displayChart and CIQ.ChartEngine#draw

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel on which to draw the bars

style object

The canvas style

condition enum

The quested condition to be drawn. Available types are:

- CIQ.ChartEngine.NONE    // no evaluation (black bars)

if CIQ.ChartEngine.prototype#colorByCandleDirection is false :

- CIQ.ChartEngine.CLOSEUP    // today's close greater than yesterday's close
- CIQ.ChartEngine.CLOSEDOWN    // today's close less than yesterday's close
- CIQ.ChartEngine.CLOSEEVEN    // today's close the same as yesterday's close

if CIQ.ChartEngine.prototype#colorByCandleDirection is true :

- CIQ.ChartEngine.CANDLEUP    // today's close greater than today's open
- CIQ.ChartEngine.CANDLEDOWN    // today's close less than today's open
- CIQ.ChartEngine.CANDLEEVEN    // today's close equal to today's open

drawHeatmap(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
params object

Parameters to control the heatmap itself

Properties
Name Type Description
panel string

The name of the panel to put the heatmap on

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(params, seriesParams)

Animation Loop Draws a generic histogram for the chart.

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.

Visual Reference -stacked:
stacked

Visual Reference -clustered:
clustered

Visual Reference -overlaid:
overlaid

Parameters:
Name Type Description
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.

borders boolean

Set to false to stop drawing borders (programmatic alternative to using styles)

seriesParams Array.<Object>

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

seriesParams[].field string

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

seriesParams[].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)

seriesParams[].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)

seriesParams[].opacity_up number

Opacity to use to fill the part when the Close is higher than the previous (0.0-1.0)

seriesParams[].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)

seriesParams[].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)

seriesParams[].opacity_down number

Opacity to use to fill the part when the Close is lower than the previous (0.0-1.0)

seriesParams[].color_function function

configure colors for each bar (will be used instead of fill_color and border_color. Opacity will be 1).

Parameters:

NameTypeDescription
quoteObjecta CIQ.ChartEngine.Chart#dataSegment element used to decide the color of that particular bar

Returns:

  • Object with the following elements:
    NameTypeDescription
    fill_colorStringused for fill actions, hex format (#RRGGBB)
    border_colorStringused for line actions, hex format (#RRGGBB)

Example:

seriesParams[0].color_function= function(quote){
    if(quote.Low > 100 ) {
        return {
                    fill_color: '#FFFFFF',
                    border_color: '#00ff87'
                }
    } else {
        return {
                    fill_color: '#000000',
                    border_color: '#0000FF'
                }
    }
};
Since:

  • • 07/01/2015
    • 3.0.0 seriesParams.color_function added to determine the colors of a series bar
    • 3.0.0 added params.borders optional component to easily turn borders off
Example
var params = {
	name: 'Volume',
	type: 'overlaid',
	heightPercentage: 0.2,
	widthFactor: 0.85
};
var seriesParams = [{
	field: 'Volume',
	color_function: function(bar) {
		var value = bar[this.field];
		var colorTuple = {
			fill_color: value > 500 ? '#05FF1F' : '#05054A';
			border_color: '#ABABAB'
		};
		return colorTuple;
	}
}];
stxx.drawHistogram(params, seriesParams);

drawHLCBox(params)

Draws a "high/low/close" box on the chart. It can be called on the primary chart panel or on a study panel.

Visual Reference: Default
hlc_box

Visual Reference: Shaded Box
hlc_shaded_box

Parameters:
Name Type Description
params object

Rendering parameters

Properties
Name Type Argument Default Description
shaded boolean <optional>

True for shaded box

fillColor string <optional>

Interior color of bar

borderColor string <optional>

Border color of bar

shadeColor string <optional>

Shading/Close color of bar

panel CIQ.ChartEngine.Panel <optional>

Panel to render upon

high string <optional>
High

Optional override of High field name

low string <optional>
Low

Optional override of Low field name

close string <optional>
Close

Optional override of Close field name

clip boolean <optional>
true

Set to false to disable clipping to plot area

widthFactor number <optional>

If set, will use as the fraction of the candlewidth to use for the width of the bars

Since:
  • 4.0.0
Examples

Basic Call :

stxx.drawHLCBox({panel:stxx.chart.panel, fillColor:"red", borderColor:"blue", shadeColor:"blue", shaded:true});

Used as a primary chart type with an injection API call :

//select the chart type you want to see
stxx.layout.chartType="hlc_box"; // or set to "hlc_shaded_box";
// add the injection that will activate it when you set stxx.layout.chartType
stxx.prepend("displayChart",function(chart){
	if(this.layout.chartType!="hlc_box" && this.layout.chartType!="hlc_shaded_box") return false;
	this.drawHLCBox({panel:chart.panel, fillColor:"cyan", shadeColor:"blue", borderColor:"blue", shaded:this.layout.chartType=="hlc_shaded_box"});
	return true;
});

Used as in a study pannel :

CIQ.Studies.studyLibrary["Bollinger Profile"]={
	"name": "Bollinger Profile",
	"calculateFN": CIQ.Studies.calculateBollinger,
	"seriesFN": function(stx,sd,quotes){
		CIQ.Studies.createYAxis(stx, sd, quotes, stx.panels[sd.panel]);
		stx.drawHLCBox({
			panel:stx.panels[sd.panel],
			fillColor:sd.outputs["Bollinger Profile Top"],
			shadeColor:sd.outputs["Bollinger Profile Median"],
			shaded:true,
			high:"Bollinger Profile Top "+sd.name,
			low:"Bollinger Profile Bottom "+sd.name,
			close:"Bollinger Profile Median "+sd.name,
			widthFactor:0.9
		});
	},
	"inputs": {"Field":"field", "Period":20, "Standard Deviations": 2, "Moving Average Type":"ma", "Channel Fill": true},
	"outputs": {"Bollinger Profile Top":"auto", "Bollinger Profile Median":"auto", "Bollinger Profile Bottom":"auto"},
	"attributes": {
		"Standard Deviations":{min:0.1,step:0.1}
	}
};

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 CIQ.ChartEngine.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] [, params])

Draws a line chart.

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 CIQ.ChartEngine.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 CIQ.ChartEngine 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.

params object <optional>

(optional) Listing of parameters to use when plotting the line chart.

Properties
Name Type Argument Description
skipTransform boolean <optional>

If true then any transformations (such as comparison charting) will not be applied

label boolean <optional>

If true then the y-axis will be marked with the value of the right-hand intercept of the line

noSlopes boolean <optional>

If set then chart will draw horizontal bars with no vertical lines.

step boolean <optional>

If set then chart will resemble a step chart. Horizontal lines will begin at the center of the bar.

labelDecimalPlaces boolean <optional>

Optionally specify the number of decimal places to print on the label. If not set then it will match the y-axis.

Since:

  • • 15-07-01 Changed signature from `chart` to `panel`
    • 3.0.0 added params argument
Returns:

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

Type
object

drawMountainChart(panel, params [, colorFunction])

Animation Loop Draws a mountain chart.

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

  • background-color - Background color for mountain (top of the mountain, if grading in combination with 'color')
  • color - Optional gradient color (bottom of the mountain, if grading in combination with background-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 Default Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the mountain chart

params object

Configuration parameters

parameters.yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

parameters.style string <optional>

The CSS style selector which contains the styling for the bar (width and color). Defaults to stx_mountain_chart.

parameters.reverse boolean <optional>

Set to true to draw a "reverse" mountain chart

parameters.field string <optional>

Set to override the field to be plotted. Default is chart.defaultPlotField which defaults to "Close"

colorFunction function <optional>

(optional) A function which accepts an CIQ.ChartEngine 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
    4.0.0 change style to an object argument called `parameters` so yAxis, field and reverse can be supported.
    4.0.0 return value is now an object
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

drawPointFigureChart(panel, style, condition)

Draws the Point and Figure Chart. Called by CIQ.ChartEngine.AdvancedInjectable#displayChart

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

Panel to draw chart in.

style string

Style to use for coloring. Uses stx_pandf_down and stx_pandf_up styles for colors. See example for exact format.

condition string

The condition to draw, 'X' or 'O'

Version:
  • ChartIQ Advanced Package
Since:
  • 2015-04-24
Example
.stx_pandf_down {
		color: #FF0000;
		padding: 2px 0px 2px 0px;
		width: 2px;
	}
	.stx_pandf_up {
		color: #00FF00;
		padding: 2px 0px 2px 0px;
		width: 2px;
	}

drawWaveChart(panel)

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
panel string

The panel on the chart engine instance 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 CIQ.ChartEngine#startClip.


exportDrawings()

Exports all of the drawings on the chart(s) so that they can be saved to an external database and later imported with CIQ.ChartEngine#importDrawings.

Since:
  • 3.0.0 Replaces serializeDrawings
See:
Returns:

An array of objects representing each drawing

Type
array

exportLayout(withSymbols)

Exports the current layout into a serialized form. The returned object can be passed into CIQ.ChartEngine#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 from any CIQ.ChartEngine#addSeries operation; if they are using a quoteFeed. Studies will be excluded from this object. The resulting list will be in thesymbols` element of the serialized object.

Since:

  • • 05-2016-10 `withSymbols` parameter is available
    • 5.0.0 obj.symbols will be explicitly removed from the serialization if `withSymbols` is not true.
Returns:

The serialized form of the layout.

Type
object

exportPreferences()

Exports the CIQ.ChartEngine#preferences for external storage. Can then be imported again after being parsed with CIQ.ChartEngine#importPreferences

Since:
  • 4.0.0
Returns:
Type
CIQ.ChartEngine#preferences

fillScreen()

Adjusts the candleWidth to eliminate left-side gaps on the chart if not enough bars are loaded.

Since:
  • 4.0.0 this function in now public

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

Since:

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 CIQ.ChartEngine.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. If the panel is a study panel, then prices will be condensed by CIQ.condenseInt if equal or over 1000. This can be overridden by manually setting CIQ.ChartEngine.YAxis#decimalPlaces. 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 CIQ.ChartEngine.Panel

The panel for the y-axis.

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 CIQ.ChartEngine.YAxis <optional>

Optional yAxis

Since:
  • 4.0.0 condenseInt will be called only if equal or over 1000 rahter than 100.
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 CIQ.Marker

The marker to check


getBarBounds(quote)

The above_candle and below_candle y-positioner will usually use the high and low to place the marker. However, some chart renderings will draw the extent of the bar either inside or outside the high/low range. For those chart types, this function will return the actual high/low to be used by the marker placement function. This is only valid when CIQ.ChartEngine#highLowBars contains the property corresponding to the layout.chartType. Currently this function will handle p&f and histogram chart types. For any other chart type, define "markerHigh" and "markerLow" for each bar in the dataSet/dataSegment and these will be honored and returned. Note: This function may be used with any markerPlacement function to give the lowest and highest point of the bar.

Parameters:
Name Type Description
quote Object

The bar's data. This can come from the chart.dataSet

Since:
  • 3.0.0
Returns:

The high and low for the marker

Type
Object

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.


getLabelOffsetInPixels(stx, chart, chartType)

Returns the minimum spacing required between the latest tick on the chart and the price label.

Parameters:
Name Type Description
stx CIQ.ChartEngine

The charting object

chart CIQ.ChartEngine.Chart

The specific chart

chartType string

The chart rendering type (candle, line, etc)

Since:
  • 4.0.0
Returns:

pixels to offset

Type
number

getNextBar(chart, field, bar)

Finds the next element after dataSegment[bar] in the dataSet which has data for field

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

An instance of CIQ.ChartEngine.Chart

field string

The field to check for data

bar number

The index into the dataSegment

Since:
  • 4.0.0
Returns:

dataSet element which has data

Type
object

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

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

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

Parameters:
Name Type Argument Default Description
DT Date

A JavaScript Date representing the base time for the request in CIQ.ChartEngine#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 CIQ.ChartEngine#dataZone. Set to false to receive a date in CIQ.ChartEngine#displayZone instead.

Returns:

The next interval date

Type
Date

getPreviousBar(chart, field, bar)

Finds the previous element before dataSegment[bar] in the dataSet which has data for field

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

An instance of CIQ.ChartEngine.Chart

field string

The field to check for data

bar number

The index into the dataSegment

Since:
  • 4.0.0
Returns:

dataSet element which has data

Type
object

getSeriesRenderer(name)

Retrieves a series renderer from the chart

Parameters:
Name Type Description
name string

Handle to access the renderer (params.name)

Since:
  • 07/01/2015
Returns:

the matching series renderer if found

Type
object

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(params)

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

Parameters:
Name Type Description
params object

Control parameters

Properties
Name Type Argument Description
include-parameters boolean <optional>

Set to true to put the series parameters in the return object

exclude-studies boolean <optional>

Set to true to not include study symbols

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 "stx-drag-chart" to the chart container. If this is a problem then just eliminate this function from the prototype.


hideCrosshairs()

Turns crosshairs off


home(params)

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

Parameters:
Name Type Description
params object

Object containing the following keys:

Properties
Name Type Argument Default Description
animate boolean <optional>
false

Set to true to animate a smooth scroll to the home position.

maintainWhitespace boolean <optional>
true

Set to true to maintain the currently visible white space on the left of the chart.

whitespace number <optional>
0

Override to force a specific amount of whitespace. This will take precedence over params.maintainWhitespace

chart CIQ.ChartEngine.Chart <optional>

Optionally which chart to scroll home

Example
stxx.home({maintainWhitespace:false});

importDrawings(arr)

Imports drawings from an array originally created by CIQ.ChartEngine#exportDrawings. To immediately render the reconstructed drawings, you must call draw(). See Using and Customizing Drawing Tools for more details.

Important: Calling this function in a way that will cause it to run simultaneously with importLayout will damage the results on the layout load. To prevent this, use the CIQ.ChartEngine#importLayout or CIQ.ChartEngine#newChart callbacks.

Parameters:
Name Type Description
arr array

An array of serialized drawings

Since:
  • 4.0.0 Replaces reconstructDrawings
See:
Example
// programatically add a rectangle
stxx.importDrawings([{"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.importDrawings([{"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();

importLayout(config, params)

QuoteFeed required if params.noDataLoad is set to true

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

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

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

Important: Do not call addSeries, importDrawings or newChart in a way that will cause them to run simultaneously with this method, or the results of the layout load will be unpredictable. Instead use this method's callback to ensure data is loaded in the right order.

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.
If the span was saved in the layout, it will be restored using the most optimal periodicity as determined by CIQ.ChartEngine#setSpan.
Periodicity can only be managed if a quote feed is attached to the chart. See CIQ.ChartEngine#setPeriodicity.

preserveTicksAndCandleWidth boolean <optional>
true

If true then the current candleWidth (horizontal zoom) on the chart will be maintained, otherwise it will be taken from the layout and restored.

noDataLoad boolean <optional>
false

If true then any automatic data loading from the quotefeed will be skipped.

cb function <optional>

An optional callback function to pass into CIQ.ChartEngine#newChart if there are symbols to load. This will not be called if noDataLoad is true.

seriesCB function <optional>

An optional callback function to pass into CIQ.ChartEngine#addSeries if there are series to load. This will not be called if noDataLoad is true.

Since:

  • • 05-2016-10 Symbols are also loaded if included on the serialization.
    • 2016-06-21 preserveTicksAndCandleWidth now defaults to true
    • 3.0.0 added noDataLoad parameter
    • 5.0.0 will now also import extended hours settings.

importPreferences(preferences)

Imports a users preferences from a saved location and uses them in the ChartEngine To save preferences see CIQ.ChartEngine#exportPreferences

Parameters:
Name Type Description
preferences object

An object of CIQ.ChartEngine#preferences

Since:
  • 4.0.0

initializeChart()

This method initializes the chart container events and various internal variables. It also initializes the canvas and creates the chart panel.

This is called by CIQ.ChartEngine#newChart and should rarely be called directly.

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.


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 CIQ.ChartEngine#modalBegin


mousemoveinner(epX, epY)

Core logic for handling mouse or touch movements on the chart.

If CIQ.ChartEngine#grabbingScreen is true then drag operations are performed.

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

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

*Above assumes your have declared a chart engine and assigned to var stxx.

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

needDifferentData(newPeriodicity)

Returns true if the chart needs new data to conform with the new periodicity.

Parameters:
Name Type Description
newPeriodicity Object

newPeriodicity. See CIQ.ChartEngine#setPeriodicity

Properties
Name Type Description
period number

period as required by CIQ.ChartEngine#setPeriodicity

interval string

interval as required by CIQ.ChartEngine#setPeriodicity

timeUnit string

timeUnit as required by CIQ.ChartEngine#setPeriodicity

Since:
  • 4.0.0
Returns:

True if the cart needs data in a new periodicity

Type
boolean

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 CIQ.QuoteFeed. This is the method that should be called every time a new chart needs to be drawn for a different instrument and there is no need to destroy the chart to change the data on it. Simply call this method again.

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

Parameters:
Name Type Argument Description
symbol string/object

The symbol or equation for the new chart - a symbol string, equation 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 CIQ.ChartEngine.Chart object is present. For example, if using the fetch() method for gathering data, params.stx.chart.symbolObject will contain your symbol object.
To allow equations to be used on a chart, the CIQ.ChartEngine#allowEquations parameter must be set to true and the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation.
See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed equations syntax.

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 CIQ.ChartEngine#attachQuoteFeed) then masterData does not need to be passed in. The quote feed will be queried instead.

chart CIQ.ChartEngine.Chart <optional>

Which chart to create. Defaults to the default chart.

cb function <optional>

Optional callback when newChart is loaded. See Adding additional content on chart for a tutorial on how to use this callback function.

params Object <optional>

Parameters to dictate initial rendering behavior

Properties
Name Type Argument Description
span Object <optional>

Default span to display upon initial rendering. If periodicity is not set, the span will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setSpan.

Properties
Name Type Description
multiplier number

Number of spans to show as required by CIQ.ChartEngine#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 CIQ.ChartEngine#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 initial rendering. See CIQ.ChartEngine#setPeriodicity

Properties
Name Type Argument Description
period number <optional>

period as required by CIQ.ChartEngine#setPeriodicity

interval string <optional>

interval as required by CIQ.ChartEngine#setPeriodicity

timeUnit string <optional>

timeUnit as required by CIQ.ChartEngine#setPeriodicity

stretchToFillScreen boolean <optional>

Increase the candleWidth to fill the left-side gap created by a small dataSet. Respects CIQ.ChartEngine#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)
	 	);
// using an equation string
	 	stxx.newChart(
		 	"=2*IBM-GM",
		 	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 CIQ.ChartEngine.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. Note if CIQ.ChartEngine#soloPanelToFullScreen is set than even the chart panel may be hidden

Parameters:
Name Type Description
panel CIQ.ChartEngine.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 CIQ.ChartEngine.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 CIQ.ChartEngine.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 CIQ.ChartEngine.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 transformation such as a comparison chart or from the actual value otherwise.

Parameters:
Name Type Argument Description
price number

The price or value

panel CIQ.ChartEngine.Panel

A panel object (see CIQ.ChartEngine#pixelFromPrice)

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Returns:

The y axis pixel location

Type
number

pixelFromPriceTransform(price, panel [, yAxis])

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

Parameters:
Name Type Argument Description
price number

The price or value

panel CIQ.ChartEngine.Panel

A panel object (see CIQ.ChartEngine#pixelFromPrice)

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Deprecated:
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 CIQ.ChartEngine.Chart <optional>

A chart object

Returns:

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

Type
number

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

A version of CIQ.ChartEngine#pixelFromPrice that will return the Y pixel from a given price (or value)

Parameters:
Name Type Argument Description
price number

The price

panel CIQ.ChartEngine.Panel <optional>

The panel (defaults to the chart)

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to use

Since:
  • 4.0.0
Returns:

The Y pixel value

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 CIQ.ChartEngine.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 CIQ.ChartEngine.YAxis <optional>

The yaxis to use

Returns:

The pixel location

Type
number

plotDataSegmentAsLine(field, panel [, parameters] [, colorFunction])

Animation Loop Plots a line chart. This should not be called directly. It is used by CIQ.ChartEngine#drawLineChart, CIQ.ChartEngine#drawMountainChart (to draw the "edge" of the mountain), CIQ.Studies.displayIndividualSeriesAsLine, and several built in studies.

Replaces plotLineChart.

Parameters:
Name Type Argument Description
field string

The field to pull from quotes (typically "Close")

panel CIQ.ChartEngine.Panel

The panel to draw the line upon

parameters object <optional>

Parameters for the drawing operation

Properties
Name Type Argument Default Description
skipTransform boolean <optional>

If true then any transformations (such as comparison charting) will not be applied

label boolean <optional>

If true then the y-axis will be marked with the value of the right-hand intercept of the line

noSlopes boolean <optional>

If set then chart will draw horizontal bars with no vertical lines.

step boolean <optional>

If set then chart will resemble a step chart. Horizontal lines will begin at the center of the bar.

labelDecimalPlaces boolean <optional>

Optionally specify the number of decimal places to print on the label. If not set then it will match the y-axis.

extendOffChart boolean <optional>
true

Set to false to not extend the plot off the left and right edge of the chart

extendToEndOfDataSet boolean <optional>

Set to true to plot any gap at the front of the chart. Automatically done for step charts or if parameters.gaps are set (see CIQ.ChartEngine#addSeries)

noDraw boolean <optional>

Set to true to not actually draw anything but just return the object

yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

colorFunction function <optional>

(optional) A function which accepts an CIQ.ChartEngine, quote, and gap flag (true if the quote is a gap) as its arguments and returns the appropriate color for drawing that mode.
Example: colorFunction(stxx,untransformedQuote,true); //true says this is a gap.
Returning a null will skip that line segment. If not passed as an argument, will use the color set in the calling function.

Since:
  • 4.0.0
Returns:

Data generated by the plot, such as colors used if a colorFunction was passed, and the vertices of the line (points).

Type
object

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

Convenience function for plotting a straight 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 CIQ.ChartEngine#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

Returns:
Type
undefined

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 CIQ.ChartEngine#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 CIQ.ChartEngine#preAdjustScroll.


preAdjustScroll( [chart])

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

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.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 CIQ.ChartEngine 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 CIQ.ChartEngine#removeInjection to remove it later on.

Type
object

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

Returns the actual value of the chart given a pixel regardless of any transformation such as a comparison chart.

Parameters:
Name Type Argument Description
y number

The Y pixel location

panel CIQ.ChartEngine.Panel <optional>

The panel to look. Defaults to the chart itself if not passed in.

yAxis CIQ.ChartEngine.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 CIQ.ChartEngine#watermark to create a watermark relative to a particular panel. CSS style stx_watermark defines the watermark (opacity of .5 is automatically applied)

Note that the watermark will not persist unless called from within the animation loop (study display function, for example). As such, it may be necessary to use a prepend to the draw function to create persistence. See example section.

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

Example
CIQ.ChartEngine.prototype.prepend("draw",function(){
	       // create persistence by forcing it  be called in every animation frame.
	       rawWatermark(stxx.chart.context,20,30,stxx.chart.symbol);
		});

reconstructDrawings(arr)

Imports drawings from an array originally created by CIQ.ChartEngine#serializeDrawings.

Note: This function and serializeDrawings have been renamed CIQ.ChartEngine#importDrawings and CIQ.ChartEngine#exportDrawings respectively.

To immediately render the reconstructed drawings, you must call draw(). See Using and Customizing Drawing Tools for more details.

Parameters:
Name Type Description
arr array

An array of serialized drawings

Deprecated:
  • since 4.0.0
See:

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 CIQ.ChartEngine#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 CIQ.ChartEngine#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 CIQ.ChartEngine#createDrawing. See Using and Customizing 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 CIQ.ChartEngine.callbackListeners object.

Parameters:
Name Type Description
obj object

Object from CIQ.ChartEngine#addEventListener

Since:
  • 04-2016-08
Returns:
Type
undefined

removeInjection(id)

Removes a specific injection. One can remove either an instance injection or a prototype injection, depending on how the function is called.

Parameters:
Name Type Description
id object

The injection descriptor returned from CIQ.ChartEngine#prepend or CIQ.ChartEngine#append

Since:
  • 07/01/2015

removeSeries(field [, chart])

Removes a series from all associated renderers in the chart, also removing the actual series data from masterData. If the series was belonged to a renderer that has no other series attached to it, the renderer is removed. See CIQ.ChartEngine#deleteSeries for more details. INJECTABLE

Parameters:
Name Type Argument Description
field string/object

The name of the series to remove -OR- the series object itself.

chart CIQ.ChartEngine.Chart <optional>

The chart object from which to remove the series

Since:

  • • 4.0.0 Now supports passing a series descriptor instead of a field
    • 4.0.0 Series data is now totally removed from masterData if no longer used by any other renderers.
    • 4.0.0 Empty renderers are now removed when series are removed

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 CIQ.Renderer.xxxxx) is not deleted but simply detached from the chart. You can re-attach it again if needed. To delete the renderer use delete myRenderer. See example in CIQ.Renderer.Lines

Parameters:
Name Type Description
renderer object

The actual renderer instance to be removed

Since:
  • 07/01/2015

resizeCanvas()

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


resizeChart( [maintainScroll])

Resizes the chart and adjusts the panels. The chart is resized to the size of the container div by calling CIQ.ChartEngine#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
maintainScroll 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:
  • 09-2016-19 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 CIQ.ChartEngine#changeOccurred)


scatter(panel)

Draws a scatter plot on the chart.

Use CSS style stx_scatter_chart to control the scatter chart display as follows:

- color                - Optional color
Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to draw


serializeDrawings()

Exports all of the drawings on the chart(s) so that they can be saved to an external database and later reconstructed.

Note: This function has been renamed CIQ.ChartEngine#exportDrawings.

Deprecated:
  • since 3.0.0
See:
Returns:

An array of objects representing each drawing

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(aggregationType)

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
aggregationType string

The chart type


setCandleWidth(newCandleWidth [, chart])

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

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

Parameters:
Name Type Argument Description
newCandleWidth number

The new candle width. If less than or equal to 0, it will be reset to 8

chart CIQ.ChartEngine.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", "percent". Setting to "percent" will set chart.isComparison=true

Since:
  • 4.1.0 added "percent"

setChartType(chartType)

Sets the base chart type for the primary symbol.

Parameters:
Name Type Description
chartType string

The chart type. See CIQ.ChartEngine#layout.chartType for valid options.


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 CIQ.ChartEngine.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 CIQ.ChartEngine#setDisplayDate for each element in masterData


setGapLines( [obj] [, target])

Sets the gap filling style for the main chart (line/mountain chart types only). A gap is an area where the value for the plotted field is null, undefined, or missing.

Parameters:
Name Type Argument Default Description
obj object <optional>

Parameter object

Properties
Name Type Argument Description
color string <optional>

A color on the canvas palette to use for gap plot. Alternatively, obj may be set to the color string directly if no other parameters are needed.

pattern array <optional>

Pattern to use as alternative to solid line for gap plot, in array format, e.g. [1,2,3,2].

fillMountain boolean <optional>

Set to true to fill the gaps in a mountain chart with the gap color. Otherwise the mountain chart is filled in with its default color.

target object <optional>
this.chart

Optional target to attach gaplines to. Supported objects are CIQ.ChartEngine.Chart or CIQ.Studies.StudyDescriptor instances

Since:
  • 4.0.0 - Added target argument
Example
stxx.setGapLines({color:"transparent",pattern:[1,2],fillMountain:true});
  stxx.setGapLines("blue");

setLineStyle( [obj] [, target])

Sets the line style for the main chart (line chart only).

Parameters:
Name Type Argument Default Description
obj object <optional>

Parameter object

Properties
Name Type Argument Description
color string <optional>

A color on the canvas palette to use for line plot. Alternatively, obj may be set to the color string directly if no other parameters are needed.

pattern array <optional>

Pattern to use as alternative to solid line for line plot, in array format, e.g. [1,2,3,2] or string format, e.g. "dashed", "dotted"

width number <optional>

Width of the line plot

target object <optional>
this.chart

Optional target to attach line style to. Supported objects are CIQ.ChartEngine.Chart or CIQ.Studies.StudyDescriptor instances

Since:
  • 4.0.0
Example
stxx.setLineStyle({color:"rgb(127,127,127)",pattern:"dashed",width:3});
  stxx.setLineStyle("blue");

setLocale(locale [, maxDecimals])

Sets the locale for the charts.

Do not call this method directly. Instead use CIQ.I18N.setLocale or CIQ.I18N.localize

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 CIQ.I18N.setLocale rather than calling this method directly.

Once a locale is set, stxx.internationalizer will be an object that will contain several Intl formatters.

These are the default date and time formates:

  • stxx.internationalizer.hourMinute=new Intl.DateTimeFormat(this.locale, {hour:"numeric", minute:"numeric", hour12:false});
  • stxx.internationalizer.hourMinuteSecond=new Intl.DateTimeFormat(this.locale, {hour:"numeric", minute:"numeric", second:"numeric", hour12:false});
  • stxx.internationalizer.mdhm=new Intl.DateTimeFormat(this.locale, {year:"2-digit", month:"2-digit", day:"2-digit", hour:"2-digit", minute:"2-digit"});
  • stxx.internationalizer.monthDay=new Intl.DateTimeFormat(this.locale, {month:"numeric", day:"numeric"});
  • stxx.internationalizer.yearMonthDay=new Intl.DateTimeFormat(this.locale, {year:"numeric", month:"numeric", day:"numeric"});
  • stxx.internationalizer.yearMonth=new Intl.DateTimeFormat(this.locale, {year:"numeric", month:"numeric"});
  • stxx.internationalizer.month=new Intl.DateTimeFormat(this.locale, {month:"short"});

These can be overridden manually if the specified format is not acceptable. See example.

Parameters:
Name Type Argument Description
locale string

A valid IANA locale

maxDecimals number <optional>

maximum number of decimal places to allow on number conversions. Defaults to 5. Please note that this will supersede any defaults set in CIQ.ChartEngine.YAxis#maxDecimalPlaces or CIQ.ChartEngine.YAxis#decimalPlaces

Since:
  • 3.0.0 maxDecimals was added to the signature
Example
// override time formatting to enable 12 hour clock (hour12:true)
stxx.internationalizer.hourMinute=new Intl.DateTimeFormat(this.locale, {hour:"numeric", minute:"numeric", hour12:true});
stxx.internationalizer.hourMinuteSecond=new Intl.DateTimeFormat(this.locale, {hour:"numeric", minute:"numeric", second:"numeric", hour12:true});

setMarket(marketDefinition, chart)

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 CIQ.ChartEngine#setMarketFactory. See CIQ.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 CIQ.Market

chart CIQ.ChartEngine.Chart

An instance of CIQ.ChartEngine.Chart

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 CIQ.ChartEngine#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 CIQ.Market for instruction on how to create a market definition. See CIQ.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 CIQ.ChartEngine#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 CIQ.ChartEngine#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 CIQ.ChartEngine.Chart <optional>

The chart to put the masterData. Defaults to the default chart.

Since:

setMasterDataRender(symbol, masterData [, chart])

Sets the master data for the chart, creates the data set, and renders the chart.

Parameters:
Name Type Argument Description
symbol string

Ticker symbol for the chart.

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 CIQ.ChartEngine.Chart <optional>

The chart to put the masterData. Defaults to the default chart.

Since:
  • 3.0.0

setMaxTicks(ticks, params)

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

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

Parameters:
Name Type Description
ticks number

The number of ticks wide to set the chart.

params object

optional Parameters to use with this function.

Properties
Name Type Description
padding number

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

Since:
  • 2015-11-1 - params added
Example
stxx.setMaxTicks(300);
stxx.home();	// home() is preferred over draw() in this case to ensure the chart is properly aligned to the right most edge.

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

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.

It also sets this.controls.mSticky with the measurement and displays it on mSticky on hover.

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

name string

Optional name of drawing, not used by default but passed into injection

Since:
  • 4.0.0 added name argument
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;
		}

		// primary color scheme
		.measureUnlit {color:#666;}
		.measureLit {color:#000;}

		// dark color scheme
		.ciq-night .measureUnlit {color:#cbcccd;}
		.ciq-night .measureLit {color:#fff;}
		
// This is an example of the framework to use for writing a prepend to further manipulate/display the measurements
		CIQ.ChartEngine.prototype.prepend("setMeasure",function(){

			var m=$$("mMeasure");

			if(!m) return; // cant show a measurement if the div is not present.

		 	// add your logic to manage the display of the measurements (price1, price2, tick1, tick2)
		 	//*****************************************
		 	var message = 'blah measurement';
		 	//*****************************************

			if(m.className!="measureLit") m.className="measureLit";
			m.innerHTML=message;

			if(this.activeDrawing) return;		// Don't show measurement Sticky when in the process of drawing

			m=this.controls.mSticky;
			if (m) {
				if(hover){
					m.style.display="inline-block";
					m.children[0].style.display="inline-block";
					if(price1){
						m.children[0].innerHTML=message;
					}
					this.positionSticky(m);
				}else{
					m.style.display="none";
					m.children[0].innerHTML="";
				}
			}

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

setPeriodicity(params [, 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 CIQ.ChartEngine#attachQuoteFeed ) , it will be called to get the new data, otherwise this.dataCallback will be called in an effort to fetch new data. See CIQ.ChartEngine#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 CIQ.ChartEngine#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 CIQ.ChartEngine#dontRoll to true to bypass this functionality if you have raw week and month data in the masterData.

See CIQ.ChartEngine#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 ( CIQ.ChartEngine.XAxis#futureTicks ) when in 'tick' mode, the library uses a pre-defined number ( CIQ.ChartEngine.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
params object

periodicity arguments

Properties
Name Type Argument Description
period number <optional>

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 <optional>

The type of data to base the period on. This can be a numeric value representing minutes, seconds or millisecond as inicated by timeUnit, "day","week", "month" or 'tick' for variable time x-axis. "hour" is NOT a valid interval. (This is not how much data you want the chart to show on the screen; for that you can use CIQ.ChartEngine#setRange or CIQ.ChartEngine#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:
Examples
// each bar on the screen will represent 15 minutes (a single 15 minute bar from your server)
stxx.setPeriodicity({period:1, interval:15, timeUnit:"minute"}, function(err){});
// (deprecated)
// each bar on the screen will represent 15 minutes (a single 15 minute bar from your server)
stxx.setPeriodicity(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.setPeriodicity({period:2, interval:15, timeUnit:"minute"}, function(err){});
// each bar on the screen will represent 1 tick and no particular grouping will be done.
stxx.setPeriodicity({period:1, timeUnit:"tick"}, function(err){});
// each bar on the screen will represent 1 day. MasterData elements will represent one day each.
stxx.setPeriodicity({period:1, timeUnit:"day"}, 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 setPeriodicity with these parameters
		}
);
//How to override stxx.chart.xAxis.futureTicksInterval when in 'tick' mode:
var stxx=new CIQ.ChartEngine({container:$$$(".chartContainer"), layout:{"candleWidth": 16, "crosshair":true}});
stxx.chart.xAxis.futureTicksInterval=1; // to set to 1 minute, for example

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

INJECTABLE Legacy function to set the periodicity and interval for the chart.

Replaced by CIQ.ChartEngine#setPeriodicity, but maintained for backwards comparibility. Uses same function signature.

Parameters:
Name Type Argument Description
period number

The number of elements from masterData to roll-up together into one data point on the chart (one candle, for example). If set to 30 in a candle chart, for example, each candle will represent 30 raw elements of interval type.

interval string

The type of data to base the period on. This can be a numeric value representing minutes, seconds or millisecond as inicated by timeUnit, "day","week", "month" or 'tick' for variable time x-axis. "hour" is NOT a valid interval. (This is not how much data you want the chart to show on the screen; for that you can use CIQ.ChartEngine#setRange or CIQ.ChartEngine#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.
    • 3.0.0 Replaced by CIQ.ChartEngine#setPeriodicity, but maintained for backwards comparibility.

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 using the CIQ.ChartEngine#dynamicRangePeriodicityMap when CIQ.ChartEngine#autoPickCandleWidth is enabled, or the use of the CIQ.ChartEngine#staticRangePeriodicityMap object when CIQ.ChartEngine#autoPickCandleWidth is NOT enabled. 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 setPeriodicity before or after calling this method.

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

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

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

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

Parameters:
Name Type Argument Description
params object

Parameters for the request

Properties
Name Type Argument Description
dtLeft Date <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 the exact same time-zone as the masterdata. See CIQ.ChartEngine#setTimeZone and CIQ.ChartEngine#convertToDataZone for more details.

dtRight Date <optional>

Date to set right side of chart. Defaults to right now.
Must be in the exact same time-zone as the masterdata. See CIQ.ChartEngine#setTimeZone and CIQ.ChartEngine#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 then 0 will be used.

chart CIQ.ChartEngine.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 in tick periodicity we have no way to know how many ticks to get to fulfill the requested range. If used, all 3 elements of this object must be set.

Properties
Name Type Description
period Number

Period as used by CIQ.ChartEngine#setPeriodicity

interval string

An interval as used by CIQ.ChartEngine#setPeriodicity

timeUnit string

A timeUnit as used by CIQ.ChartEngine#setPeriodicity

pixelsPerBar Number

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:
  • 4.0.0 No longer defaulting padding to current value of preferences.whiteSpace
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,timeUnit:stxx.layout.timeUnit}
	    });
	    

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, CIQ.ChartEngine.resizeDetectMS is checked for the default resize checking interval. The default is 1,000 milliseconds. To turn off resize checking simply set CIQ.ChartEngine.resizeDetectMS=0; when you declare your CIQ.ChartEngine 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.

Example 1

Example 2

You must manage the persistency of a renderer, and remove individual series (CIQ.Renderer#removeSeries ) , remove all series (CIQ.Renderer#removeAllSeries) or even delete the renderer (CIQ.ChartEngine#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 CIQ.Renderer#removeAllSeries). Failure to do this will cause multiple axis to be displayed, the original one becoming orphan.

See CIQ.Renderer

See CIQ.ChartEngine#removeSeriesRenderer for release functionality.

See CIQ.ChartEngine#addSeries for additional implementation examples.

Parameters:
Name Type Description
renderer CIQ.Renderer

The renderer

Since:
  • 07/01/2015
Returns:

This seriesRenderer

Type
CIQ.Renderer
Example
// group the series together and select "line" as the rendering type to display the series.
	var mdataRenderer=stxx.setSeriesRenderer(new CIQ.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 time span.

setSpan makes use of CIQ.ChartEngine#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.periodicity in setSpan for setRange to use.

Example:

stxx.setSpan ({
  multiplier: 5,
  base: "day",
  padding: 30,
  // pre load a parameter for setRange
  periodicity:{
      period:1,
      interval:5,
      timeUnit:'minute'
  }
});

Just keep in mind that if passing periodicity.interval and periodicity.period to be used in CIQ.ChartEngine#setRange , then DO NOT set maintainPeriodicity. Otherwise, the requested periodicity will be ignored.

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 CIQ.ChartEngine#setRange and CIQ.ChartEngine#displayAll for complete details on how the periodicity is calculated.
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.

Calling CIQ.ChartEngine#setPeriodicity 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 no need to manually change it when setting a new span unless you are using the params.maintainPeriodicity flag; in which case you want to call setPeriodicity before you set the span, so the setSpan call will use the pre-set periodicity.
Setting a span to params.multiplier:7 params.base:'days' or params.multiplier:1 params.base:'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 CIQ.ChartEngine.setPeriodicity or by letting setSpan figure it out as described above.
Remember that by default, weekly and monthly data is calculated using daily raw ticks. If your feed returns data already rolled up in monthly or weekly ticks, you can override this behavior by setting stxx.dontRoll to true ( see CIQ.ChartEngine#dontRoll and the Periodicity tutorial)

This function must be called after newChart() completes and creates a dataSet, or together with newChart() by setting the proper parameter values. If calling separately right after newChart(), be sure to call it in the newChart() callback!. See example in this section and CIQ.ChartEngine#newChart for more details and compatibility with your current version.

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

Layout preservation and the span
If maintainPeriodicity is not set, the selected span will be recorded in the chart CIQ.ChartEngine#layout when it is requested through CIQ.ChartEngine#newChart, or when you call setSpan directly.
It is then used in CIQ.ChartEngine#importLayout and CIQ.ChartEngine#newChart to reset that span, until a new periodicity is is selected.

Parameters:
Name Type Description
params object

Parameter for the function

Properties
Name Type Argument Description
multiplier number

Number of base units to show. To show 3 weeks of data, for example, set this to 3 and params.base to 'week'.

base string

The base span to show. "minute","hour","day","week","month","year","all", "ytd" or "today".
This span will be combined with the multiplier. Example 2 days, 4 months.
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.
• If 'all' data is requested, CIQ.ChartEngine#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 unless otherwise specified. Please note that "all" will attempt to load all of the data the quotefeed has available for that symbol. Use this span with caution.
• If 'today' is requested, the chart will display the current market day but extend the chart all the way to market close (as per market hours set in the active market definition - see CIQ.Market)
• If 1 'day' is requested --on market days--,the chart will start from same time on the previous market day, wich may be over a weekend. Example from 3:30 PM Friday to 3:30 PM Monday, if the market is closed Saturday and Sunday.
• If 1 'day' is requested --on weekends and holidays-- or if 2 or more days are requested, the chart will will always start from market open of prior days.

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 CIQ.ChartEngine#setRange for details.
Note: if the chart is in tick periodicity, the periodicity will be automatically selected even if it was requested to be maintained because in tick periodicity we have no way to know how many ticks to get to fulfill the requested range.

padding number <optional>

Whitespace padding in pixels to apply to right side of chart after sizing for date range. If not set will default whitespace to 0.

forceLoad boolean <optional>

Forces a complete load (used by newChart)

chart CIQ.ChartEngine.Chart <optional>

Which chart, defaults to "chart"

cb function

Optional callback

Since:

  • • 04-2015: added "all", "today", "ytd" and automatic integration with CIQ.QuoteFeed
    • 15-07-01: params.period changed to params.multiplier for clarity
    • 15-07-01: params.interval changed to params.base for clarity
    • 05-2016-10: saves the set span in stxx.layout to be restored with the layout between sessions
    • 4.0.3 saves all parameters of the requested span in stxx.layout to be restored with the layout between sessions. Previously only `multiplier` and `base` were saved.
    • 5.0.0 when 1 'day' is requested data displayed will differ if current day is market day or the market is closed to ensure the span will have enough data.
Examples
// this displays 5 days. It can be called anywhere including buttons on the UI
	stxx.setSpan ({
		multiplier: 5,
		base: "day",
		padding: 30
	});
// using embedded span requirements on a newChart() call.
stxx.newChart(
     {symbol:newSymbol,other:'stuff'},
     null,
     null,
     callbackFunction(),
     {
          span:{base:'day',multiplier:2},
     }
);	 
// Calling setSpan in the newChart() callback to ensure synchronicity.
stxx.newChart(
     {symbol:newSymbol,other:'stuff'},
     null,
     null,
     function(){
		 	stxx.setSpan ({
				multiplier: 5,
				base: "day",
				padding: 30
			});
     }
);	 

setStartDate(dt)

Scrolls the chart so that the leftmost tick is the requested date. The date must be an exact match and data for that bar must already be loaded in the chart. There is no effect if the date is not found an the engine will not attempt to fetch more data.

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_candle_up","color","green");
stx.setStyle("stx_candle_down","color","red");

setTimeZone(dataZone, displayZone)

Sets the data timezone (dataZone) and display timezone (displayZone) on an intraday 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 for intraday 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 CIQ.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 know 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 CIQ.yyyymmddhhmmssmmm, for example.

See CIQ.timeZoneMap to review a list of all chatIQ supported timezones and instructions on how to add more!

Parameters:
Name Type Description
dataZone string

A chatIQ supported timezone. This should represent the time zone that the master data comes from, or set to 'null' if your dates are already time zone aware.

displayZone string

A chatIQ supported timezone. This should represent the time zone that the user wishes displayed, or set to null to use the browser time zone.


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 CIQ.ChartEngine.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 CIQ.ChartEngine.XAxis#futureTicksInterval See CIQ.Market and CIQ.Market.Iterator for more details.

Parameters:
Name Type Argument Description
begin Date

A JavaScript Date representing the iterator begin date in CIQ.ChartEngine#dataZone timezone. See CIQ.Market#newIterator for details.

outZone string <optional>

A valid timezone from the timeZoneData.js library. This should represent the time zone for the returned date. Defaults CIQ.ChartEngine#dataZone. See CIQ.Market#newIterator for details.

chart CIQ.ChartEngine.Chart <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 CIQ.ChartEngine.registerChartDrawnCallback.

To accommodate this requirement, studies, plugins or injections that render asynchronously should use startAsyncAction and CIQ.ChartEngine#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 CIQ.ChartEngine#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])

Streams "last sale" prices into the chart.

This function has been deprecated in favor of CIQ.ChartEngine#appendMasterData. This also means that CIQ.ChartEngine#streamParameters.fillGaps is deprecated. Developers should instead call CIQ.ChartEngine#appendMasterData with params.fillGaps=true or rely on cleanupGaps as default behavior.

streamTrade to appendMasterData migration examples:

Note that appendMasterData follows the 'OHLC' format. So Volume (upper case) is used rather than volume (lower case). Similarly Last (upper case) is used rather than last (lower case).

Example 1: streaming a secondary series:

streamTrade({"last":102.05, "volume":100}, null, "IBM");
Translates to :
appendMasterData({"Last":102.05, "Volume":100}, null, {fillGaps: true, secondarySeries: "IBM"});

Example 2: streaming a primary series:

streamTrade({"last":102.05, "volume":100});
Translates to :
appendMasterData({"Last": 102.05,"Volume":100}, null, {fillGaps: true});

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 beginning of the next bar, the last bar will be updated even if the trade belongs to a prior bar; this could happen if a trade is sent in after hours at a time when the market is closed, or if it is received out of order. When in 'tick' interval, each trade will be added to a new bar and no aggregation to previous bars will be done. If the optional timestamp [now] is sent in, and it is older than the next period to be rendered, the last tick on the dataset will be updated instead of creating a new tick.

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

This method leverages CIQ.ChartEngine.appendMasterData for the actual data insertion into masterData. Please see CIQ.ChartEngine.appendMasterData for additional details and performance throttle settings.

See the Streaming tutorial for more the details.

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>

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

symbol string <optional>

trade symbol for series streaming ONLY. Leave out or set to null when streaming the primary chart symbol.

params object <optional>

Params to be passed to CIQ.ChartEngine#appendMasterData

Since:
  • 4.0.0 Deprecated this function. This also means that streamParameters.fillGaps is deprecated. Developers should call appendMasterData with params.fillGaps=true or rely on cleanupGaps as default behavior.
Deprecated:
  • Please use appendMasterData for streaming last ticket.
Examples
// streaming last sale for the primary chart symbol
stxx.streamTrade({"last":102.05, "volume":100});
// streaming last sale for an additional series on the chart
stxx.streamTrade({"last":102.05, "volume":100}, null, "IBM");

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.

Parameters:
Name Type Argument Description
dt string

Date in string format

chart CIQ.ChartEngine.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 position (array index) of the first dataSet element encountered given the X pixel.

See CIQ.ChartEngine.barFromPixel if you wish to locate the dataSegment position.

Parameters:
Name Type Argument Description
x number

X pixel location

chart CIQ.ChartEngine.Chart <optional>

A chart object

Returns:

The tick (position in the dataSet)

Type
number

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

A version of CIQ.ChartEngine#priceFromPixel that will return the y-axis value given a Y pixel

Parameters:
Name Type Argument Description
y number

The Y pixel location

panel CIQ.ChartEngine.Panel <optional>

The panel (defaults to the chart)

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to use

Since:
  • 4.0.0
Returns:

The Y axis value

Type
number

translateIf(english)

Translates the requested word to the active language if this.translationCallback callback function is set.

Use CIQ.translatableTextNode if you are adding the element to the DOM and wish the translations services to automatically change to other languages as they are 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 CIQ.ChartEngine.clearDrawings. You can also view and interact with all drawings by traversing through the CIQ.ChartEngine.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(before, after)

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

Parameters:
Name Type Description
before CIQ.ChartEngine.drawingObjects

The chart's array of drawingObjects before being modified

after CIQ.ChartEngine.drawingObjects

The chart's array of drawingObjects after being modified


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 CIQ.ChartEngine#registerDrawnCallback


unsetTransform(chart)

Removes a transformation/untransformation pair

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to remove transformations from


updateFloatHRLabel(panel)

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

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

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to print the label(s)

Example
// controls primary default color scheme
.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 panel or the canvas.

Parameters:
Name Type Argument Description
y number

The y pixel position

panel CIQ.ChartEngine.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 CIQ.ChartEngine.YAxis <optional>

Which yAxis. Defaults to panel.yAxis.

Returns:

The value relative to the panel

Type
number

valueFromPixelUntransform(y, panel [, yAxis])

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

Parameters:
Name Type Argument Description
y number

The y pixel location

panel CIQ.ChartEngine.Panel

A panel object. It is strongly recommended to pass the panel! (see CIQ.ChartEngine#valueFromPixel)

yAxis CIQ.ChartEngine.YAxis <optional>

The yaxis to use. Defaults to panel.yAxis.

Deprecated:
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.

Note that the watermark will not persist unless called from within the animation loop (study display function, for example). As such, it may be necessary to use a prepend to the draw function to create persistence. See example section.

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

Example
CIQ.ChartEngine.prototype.prepend("draw",function(){
	       // create persistence by forcing it  be called in every animation frame.
	       stxx.watermark("chart",{h:"center",v:"middle",text:stxx.chart.symbol});
		});

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
CIQ.ChartEngine.Panel

zoomIn(e, pct)

INJECTABLE Zooms the chart in. The chart is zoomed incrementally by they percentage indicated (pct) each time this is called.

Parameters:
Name Type Description
e Event

The mouse click event, if it exists (from clicking on the chart control)

pct Number

The percentage to zoom out the chart (default = 10%)


zoomOut(e, pct)

INJECTABLE Zooms the chart out. The chart is zoomed incrementally by they percentage indicated (pct) each time this is called.

Parameters:
Name Type Description
e Event

The mouse click event, if it exists (from clicking on the chart control)

pct Number

The percentage to zoom out the chart (default = 10%)

Since:

zoomSet(candleWidth, chart)

Effects a zoom from either zoomIn() or zoomOut(). Called from an EaseMachine

Parameters:
Name Type Description
candleWidth Number

The new candleWidth

chart CIQ.ChartEngine.Chart

The chart to center

Since:
  • 4.1.0 will keep left edge stable and zoom to the right when white space is present on the left.