Class: ChartEngine

CIQ. ChartEngine


new ChartEngine(config)

Previously STXChart. This is the constructor that creates a chart engine, instantiates its 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.

Once instantiated, the chart engine will never need to be constructed again, unless it is destroyed. To load or change symbols on the chart, simply call CIQ.ChartEngine#newChart.

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


DrawingDescriptor

Deprecated:
  • Yes

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

allowThreeFingerTouch :boolean

If set to true then a three finger movement will increment periodicity.

Type:
  • boolean

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

Set to true to bypass right clicks on all overlay types. Or define independent settings for series, studies, and drawings by using an object instead. Also see:

Type:
  • object
Since:
  • 2016-07-16
    • 5.1.0: An object containing booleans to separate series, studies, and drawings.
Default Value:
  • {"series":false,"study":false,"drawing":false}
Example
this.bypassRightClick={
	series: false,
	study: false,
	drawing: false
};

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 through 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 on intra-day or daily interval charts to create missing data points during market hours/days for stocks that may have missing bars.

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.

Important information to prevent inaccurate 'gapping' The cleanup process leverages the current market iterator which traverses along the timeline on the exact minute/second/millisecond mark for intro-day data. As such, you must ensure your time stamps match this requirement. If your data does not comply, you must round your timestamps before sending the data into the chart.
For example, if in minute periodicity, seconds and milliseconds should not be present or be set to zero.

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

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

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 reconstruct 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 reconstruct 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
    • 5.2.0 '1.272' level 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, // display the % levels to the right of the drawing
					printValues: false, // display the values on the y axis
					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 reconstruct 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 reconstruct method for your desired drawing for more details(Example: CIQ.Drawing.horizontal#reconstruct)

Type:
  • number
Default Value:
  • 1

currentVectorParameters[`vectorType`] :string

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

Type:
  • string

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
Default Value:
  • false

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}

htmlControls :object

Defines raw html for the chart controls.

These controls 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 the main htmlControls object to null to disable all controls at once.

Type:
  • object
Since:
  • 5.2.0 Any id can be set to null to disable
Examples
var stxx=new CIQ.ChartEngine({container:$$("chartContainer"), controls: {chartControls:null}});
// before calling newChart(). Disables all controls
stxx.controls=null;
// before calling newChart(). Disables only the chartControls (zoom on and out buttons)
stxx.controls["chartControls"]=null;

htmlControls[`annotationCancel`]

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


htmlControls[`annotationSave`]

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


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[`crossX`]

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


htmlControls[`crossY`]

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


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(); programmatically. 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;
}

htmlControls[`mSticky`]

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

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

layout :object

Contains the current chart layout.

Layout parameters can be directly pre-set on a chart at the time the engine is instantiated.
The following is an example for setting some of the available layout parameters:

var stxx=new CIQ.ChartEngine({container: $$("chartContainer"),layout:{"crosshair":true,"interval":"day","periodicity":1,"chartType": "candle","candleWidth": 16}});

These parameters will then be activated when newChart() is called to render the chart.
Once a chart is rendered, most of these parameters become READ ONLY,and must be modified using their corresponding methods, as indicated in the documentation, to ensure chart integrity.

See importLayout and exportLayout for methods to serialize a layout and restore previously saved settings.

Type:
  • object

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.

Available options are:

  • "rangebars"
  • "ohlc"
  • "kagi"
  • "pandf"
  • "heikinashi"
  • "linebreak"
  • "renko"

Use CIQ.ChartEngine#setAggregationType to set this value.

See Chart Styles and Types for more details.

Type:
  • string
Default Value:
  • ohlc

layout[`candleWidth`] :number

READ ONLY. 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

READ ONLY. The primary chart type.

Available options are:

  • "none"
  • "line"
  • "step"
  • "mountain"
  • "baseline_delta"
  • "candle"
  • "bar"
  • "hlc"
  • "hlc_box" Requires "js/extras/hlcbox.js"
  • "hlc_shaded_box" Requires "js/extras/hlcbox.js"
  • "wave"
  • "scatterplot"
  • "histogram"
  • "rangechannel"

Variations of these types are available by prepending terms to the options as follows:

  • "step_" - add to mountain, baseline_delta e.g. step_mountain, baseline_delta_step
  • "vertex_" - add to line, step, mountain, baseline_delta
  • "hollow_" - add to candle
  • "volume_" - add to candle
  • "colored_" - add to line, mountain, step, bar, hlc
  • "mountain_" - add to baseline_delta

Other options are available provided a renderer is created with a requestNew function which will support the option, see CIQ.Renderer.Lines#requestNew and CIQ.Renderer.OHLC#requestNew

Use CIQ.ChartEngine#setChartType to set this value.

See Chart Styles and Types for more details.

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
    • 5.1.0 More chart types available using combinations of terms
Default Value:
  • candle

layout[`crosshair`] :boolean

Set to true to enable crosshairs in the active layout.

Also see CIQ.ChartEngine.AdvancedInjectable#doDisplayCrosshairs for more details on crosshairs behavior.

Type:
  • boolean
Example
// enable crosshair (usually called from a UI button/toggle)
stx.layout.crosshair=true;
// add this if you want the crosshair to display right away instead of when the user starts moving the mouse over the chart
stx.doDisplayCrosshairs();
// add this if you want to trigger a layout change event; maybe to save the layout.
stx.changeOccurred("layout");

layout[`extended`] :boolean

READ ONLY. 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

READ ONLY. Chart interval.

Note that internal interval format will differ from API parameters used in CIQ.ChartEngine#setPeriodicity

Available options are:

  • [number] representing minutes
  • "day"
  • "week"
  • "month"

See the Periodicity and Quote feed tutorial.

Type:
  • string
Default Value:
  • day

layout[`marketSessions`] :object

READ ONLY. Tracks the extended market sessions to display on the chart.

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

READ ONLY. Number of periods per interval/timeUnit

See the Periodicity and Quote feed tutorial.

Type:
  • number
Default Value:
  • 1

layout[`timeUnit`] :string

READ ONLY. Time unit for the interval.

Note that internal timeUnit format will differ from API parameters used in CIQ.ChartEngine#setPeriodicity

See the Periodicity and Quote feed tutorial. Available options are:

  • "millisecond"
  • "second"
  • "minute"
  • null for "day", "week", "month" periodicity
Type:
  • string

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, and all interactivity with the chart will cease; turning it into a static display and 'shedding' all HTML overlays and events required for user interaction, for a much more lightweight interface. Alternatively you can selectively set any CIQ.ChartEngine#htmlControls id to null, including CIQ.ChartEngine.htmlControls=null to disable them all. See Creating Static Charts for more details on creating static charts.

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.

Preferences parameters, unless otherwise indicated, can be set at any time and only require a draw() call to activate.

See importPreferences and exportPreferences for methods to serialize and restore previously saved 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

Stores preferred language for the chart.

It can be individually restored using CIQ.I18N.setLanguage and activated by CIQ.I18N.translateUI

Type:
  • string
Since:
  • 4.0.0

preferences[`magnet`] :boolean

Magnetizes the crosshairs to datapoints during drawing operations to improve initial placement accuracy.
It will not be used when an existing drawing is being repositioned.
See CIQ.ChartEngine.AdvancedInjectable#magnetize for more details.

Type:
  • boolean

preferences[`timezone`] :string

Stores the preferred timezone for the display of the x axis labels.

It is automatically set and can be individually restored by CIQ.ChartEngine#setTimeZone.

Type:
  • string
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

If set to 'true', the 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}

staticRange :boolean

When set to true, the requested range will be visually preserved even if the data required to fill the left and/or right side of the x axis if not present. This behavior is similar to setting goIntoPast and goIntoFuture when calling setRange/setSpan explicitly, but will persist between symbol changes or when a layout is imported.

Type:
  • boolean
Since:
  • 5.1.2

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 updateChartData() 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. This will ensure 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 predictable 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

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

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 :boolean

Set to true to display the xAxis below all panels. By default, the x axis will be rendered right under the main chart panel.

Type:
  • boolean
Since:

  • • 05-2016-10
    • 4.1.0 now defaults to true
    • 5.2.0 vertical grid lines in study panels no longer dependent on this property and will be always displayed.
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

Shape of the floating y axis label.

Available options:

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[`pattern`] :string

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

Type:
  • string
Default Value:
  • solid

drawingLine :boolean

READ ONLY. Toggles to true when a drawing is initiated

Type:
  • boolean

ignoreTouch :number

Set to true to true to bypass all touch event handling.

Type:
  • number

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

mainSeriesRenderer :CIQ.Renderer

READ ONLY. Access the renderer controlling the main series.

Type:

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

handleContextMenu( [e])

This code prevents the browser context menu from popping up when right-clicking on a drawing or overlay

Parameters:
Name Type Argument Default Description
e object <optional>
event

Event

Deprecated:
  • Use CIQ.ScrollManager.attachRightClick
Returns:
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.

Deprecated:
  • Yes

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

activateDrawing(drawingTool [, panel])

Activate a drawing. The user can then finish the drawing.

Note: Some drawings labeled "chartsOnly" can only be activated on the chart panel.

Parameters:
Name Type Argument Description
drawingTool string

The tool to activate. Send null to deactivate.

panel CIQ.ChartEngine.Panel <optional>

The panel where to activate the tool. Defaults to the chart panel.

Since:
  • 3.0.0
Returns:

Returns true if the drawing was successfully activated. Returns false if unactivated or unsuccessful.

Type
boolean

activateRepositioning(drawing)

Activates or deactivates repositioning on a drawings.

Parameters:
Name Type Description
drawing CIQ.Drawing

The drawing to activate. null to deactivate the current drawing.

Since:
  • 3.0.0

addEventListener(type, callback)

Register a listener to a chart event in the chart engine instance. Events are tracked in the CIQ.ChartEngine.callbackListeners object; which is READ ONLY, and should never be manually altered. 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 of data to the chart. A series can be displayed (for instance like a comparison chart) or it can be hidden (for instance to drive a study).

If you have a quotefeed attached to your chart, then just pass the symbol as the first parameter. There is no need to pass data since the chart will automatically fetch it from your quotefeed. If however you are using the "push" method to feed data to your chart then you must provide the data manually by passing it as a parameter.

Here's how you would add a hidden series for symbol "IBM" when using a quotefeed:

stxx.addSeries("IBM");

That series will now be available for use by studies. If you wish to display your series you must specify how you wish the series to be renderered. The most basic case is when you want to display a series as a line. Simply specify a color for your line:

stxx.addSeries("IBM", {color:"blue"});

That example adds a series as an overlay, but more often you'll want to display series as comparisons. Comparisons are special because they change the chart from a price chart to a percentage chart. All series on the chart then begin at "zero", on the left side of the chart. Set isComparison=true when adding a series to make it a comparison chart.

stxx.addSeries("IBM", {color:"blue", isComparison:true});

Example 1

Complex Visualizations

Behind the scenes, series are displayed by renderers. Renderers can plot lines, mountains, bars, candles, and other types of visualizations. When adding a series, you can specify which renderer to use and set parameters to control your visual. For instance, this will display a series as a candlestick chart:

stxx.addSeries("IBM", {renderer:"Candles", fill_color_up:"orange", fillColorDown:"blue"});

Example 2

Using a Symbol Object

The previous examples all assumed your chart uses "tickers" (stock symbols). We refer to complex (compound) symbols as "Symbol Objects" (see CIQ.ChartEngine#newChart). Here's how to set a series with a symbol object:

stxx.addSeries(null, {color:"blue", symbolObject:yourSymbolObject});

Advanced Visualizations

Some renderers are capable of rendering multiple series. For instance, the Histogram can display series stacked on top of one another. Use setSeriesRenderer() in this case. Here is how we would create a stacked histogram from several series:

var myRenderer=stxx.setSeriesRenderer(new CIQ.Renderer.Histogram({type:"histogram", subtype:"stacked"}));

stxx.addSeries("^NIOALL", {}, function() {myRenderer.attachSeries("^NIOALL","#6B9CF7").ready();});
stxx.addSeries("^NIOAFN", {}, function() {myRenderer.attachSeries("^NIOAFN","#95B7F6").ready();});
stxx.addSeries("^NIOAMD", {}, function() {myRenderer.attachSeries("^NIOAMD","#B9D0F5").ready();});

Setting a Left YAxis

By default, series are displayed without a y-axis. They are either "overlayed" on the main chart, or if they are comparisons then they share the standard y-axis. A series can take an optional y-axis which can be displayed on the left (or can be stacked up on the right side). To do this, you must specify parameters for a YAxis object and pass to addSeries:

stxx.addSeries("IBM", {color:"blue", yAxis:{ position:"left" }});
Parameters:
Name Type Argument Description
id string <optional>

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 and id is supplied.)

parameters object <optional>

Parameters to describe the series. Any valid attachSeries parameters and renderer parameters will be passed to attached renderers.

Properties
Name Type Argument Default Description
renderer string <optional>

Rendering Set to the desired renderer for the series. Will cause the series to display on the screen. If not set, then the series will be hidden.

  • Defaults to Lines if color is set.
display string <optional>

Rendering Set to the text to display on the legend. If not set, the id of the series will be used (usually symbol). If id was not provided, will default to symbol.

symbol string <optional>

Data Loading The symbol to fetch in string format. This will be sent into the fetch() function, if no data is provided. If no symbol is provided, series will use the id as the symbol. If both symbol and symbolObject are set, symbolObject will be used.

symbolObject object <optional>

Data Loading The symbol to fetch in object format. This will be sent into the fetch() function, if no data is provided. If no symbolObject is provided, series will use the id as the symbol. You can send anything you want in the symbol object, but you must always include at least a 'symbol' element. If both symbol and symbolObject are set, symbolObject will be used.

field string <optional>

Data Loading Specify an alternative field to draw data from (other than the Close/Value). Must be present in your pushed data objects or returned from the quoteFeed.

isComparison boolean <optional>

Rendering 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, and should only be used with internal addSeries renderers.

shareYAxis boolean <optional>

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

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

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

Rendering Width of line

minimum number <optional>

Rendering Minimum value for the series. Overrides CIQ.minMax result.

maximum number <optional>

Rendering Maximum value for the series. Overrides CIQ.minMax result.

color string <optional>

Rendering Color to draw line. Will cause the line to immediately render an overlay. Only applicable for default/'Lines' renderer. See CIQ.Renderer#attachSeries for additional color options.

baseColor string <optional>

Rendering Color for the base of a mountain series. Defaults to parameters.color.

pattern array | string <optional>

Rendering Pattern to draw line, array elements are pixels on and off, or a string e.g. "solid", "dotted", "dashed"

fillGaps boolean <optional>

Data Loading Will fill any missing data points in the series relative to masterData.
If true then gaps in data will be filled by carrying forward the value of from the previous bar.
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.

gapDisplayStyle object <optional>

Rendering Defines how to render (style) gaps in the data (missing data points). If undefined, and the series is a comparison, the gaps will be rendered transparent. 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 | string <optional>

Pattern to draw line where data points are missing, array elements are pixels on and off, or a string e.g. "solid", "dotted", "dashed"

fillStyle string <optional>

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

Rendering 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 Loading 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 Argument Description
DT date <optional>

JavaScript date object or epoch representing data point (overrides Date parameter if present)

Date string <optional>

string date representing data point ( only used if DT parameter is not present)

Value number <optional>

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>

Rendering the panel name on which the series should display

action string <optional>
"add-series"

Rendering Overrides what action is sent in symbolChange events. Set to null to prevent a symbolChange event.

loadData boolean <optional>
true

Data Loading 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.

extendToEndOfDataSet boolean <optional>

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

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`.
    • 5.1.0 Series data now added to masterData as an object. This allows storage of more than just one data point, facilitating OHLC series!
    • 5.1.0 addSeries will now create a renderer unless renderer, name and color parameters are all omitted
    • 5.1.0 Now also dispatches a "symbolChange" event when pushing data into the chart, rather than only when using a quote feed.
    • 5.1.1 Added `parameters.extendToEndOfDataSet`.
    • 5.1.1 `parameters.chartType`, originally used to draw "mountain" series, has been deprecated in favor of the more flexible 'renderer' parameter. It is being maintained for backwards compatibility
    • 5.2.0 `parameters.gaps` has been deprecated (but maintained for backwards compatibility) and replaced with `parameters.gapDisplayStyle`
Returns:

The series object

Type
object
Examples
// add a series overlay and display it as a dashed line.
stxx.addSeries(
		"IBM",
		{color:"purple", pattern:[3,3]}
);
// Add a series onto the main axis and then create a moving average study that uses it.
// Note, this will work for any study that accepts a *"Field"* parameter.

	stxx.addSeries("ge", {color:"yellow", shareYAxis:true}, function(){
		var inputs = {
	        "Period": 20,
	        "Field": "ge",
	        "Type": "ma"
	    };
	    var outputs = {
	        "MA": "red"
	    };
	    CIQ.Studies.addStudy(stxx, "ma", inputs, outputs);
	});
// add series using a symbolObject which includes the data source key.
// This key will be sent into the fetch 'params' for use in your quoteFeed.
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});
// 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", gapDisplayStyle:{pattern:[3,3]},width:4,permanent:true});
	stxx.addSeries(symbol2, {display:"Description 2",isComparison:true,color:"pink", gapDisplayStyle:{pattern:[3,3]},width:4});
	stxx.addSeries(symbol3, {display:"Description 3",isComparison:true,color:"brown", gapDisplayStyle:{pattern:[3,3]},width:4});
// add the series with only default parameters (no color).
	// The series will not display on the chart after it is added,
	// but the data will be available ready to be attached to a renderer.
	stxx.addSeries(symbol1, {display:"Description 1"});
	stxx.addSeries(symbol2, {display:"Description 2"});
	stxx.addSeries(symbol3, {display:"Description 3"});
// add a series with a color to immediately render. It also calls callbackFunct after the data is returned from the fetch.
	function callbackFunct(field){
		 return function(err) {
			alert(field);
		}
	}

	stxx.addSeries(symbol1, {display:"Description",color:"brown"}, callbackFunct(symbol1));
// add a stacked historam with 3 series usng an external renderer.

	// note how the addSeries callback is used to ensure the data is present before the series  is displayed

// configure the histogram display
var params={
	name:				"Sentiment Data",
	type:				"histogram",
	subtype:			"stacked",
	heightPercentage:	.7,	 // how high to go. 1 = 100%
	opacity:			.7,  // only needed if supporting IE8, otherwise can use rgba values in histMap instead
	widthFactor:		.8	 // to control space between bars. 1 = no space in between
};

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

var histRenderer=stxx.setSeriesRenderer(new CIQ.Renderer.Histogram({params: params, callback: histogramLegend}));

stxx.addSeries("^NIOALL", {display:"Symbol 1"}, function() {histRenderer.attachSeries("^NIOALL","#6B9CF7").ready();});
stxx.addSeries("^NIOAFN", {display:"Symbol 2"}, function() {histRenderer.attachSeries("^NIOAFN","#95B7F6").ready();});
stxx.addSeries("^NIOAMD", {display:"Symbol 3"}, function() {histRenderer.attachSeries("^NIOAMD","#B9D0F5").ready();});
// add a series overlay for data that *already exists in the chart*.
By setting loadData to false, the chart will assume the data exists, and not request it from the quotefeed.
stxx.addSeries(
		"Close",
		{color:"purple", loadData:false}
);
// add multiple series and attach to a custom y-axis on the left.
	// See this example working here : http://jsfiddle.net/chartiq/b6pkzrad

	// note how the addSeries callback is used to ensure the data is present before the series  is displayed

	//create the custom axis
	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

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

	// create your series and attach them to the chart when the data is loaded.
	stxx.addSeries("NOK", {display:"NOK",width:4},function(){
		renderer.attachSeries("NOK", "#FFBE00").ready();
	});

	stxx.addSeries("SNE", {display:"Sony",width:4},function(){
		renderer.attachSeries("SNE", "#FF9300").ready();
	});
// add a series with a colored bar renderer; usng default colors
stxx.addSeries("MSFT",{renderer:"Bars", colored:true});
// add a series with a candle renderer; using custom colors
stxx.addSeries("MSFT",{renderer:"Candles", fill_color_up:"magenta", border_color_up:"purple", fill_color_down:"lightgreen", border_color_down:"green"});
// add a series with Histrogram renderer; using default colors
stxx.addSeries('ge', {renderer:"Histogram", color: 'red'});
// add a series with tension to cause the lines to be curved instead of straight
// 'tension' is a line renderer parameter.
// the renderer:"Lines" parameter could theoretically be omitted since it is the default renderer.
stxx.addSeries('GE',{renderer:"Lines", type:'mountain',color:'yellow',tension:0.3})

addYAxis(panel, yAxis)

Adds a yAxis to the specified panel. If the yAxis already exists then it is assigned its match from the panel.

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)

Since:
  • 5.1.0 added return value
Returns:

The YAxis added (or the existing YAxis if a match was found)

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

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.
    • 5.0.1 now calls doCleanupDates in case is is being called directly when not using a quoteFeed, to update an entire candle.
Deprecated:

attachEngineQuoteFeed( [quoteFeed] [, behavior])

Deprecated. Use CIQ.ChartEngine#attachQuoteFeed instead 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
Deprecated:
  • Yes
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 Default 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 minimum number of undisplayed historical ticks always buffered in the masterData. Useful to prevent temporary gaps on studies while paginating. This forces fetch requests to be triggered ahead of reaching the left-most corner of the chart (default) if the number of already loaded bars is less than the required buffer size. This parameter can be reset at any time by manipulating 'stxx.quoteDriver.behavior.bufferSize'; it will then become active on the very next loading check.

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.

maximumTicks number <optional>
20000

Limiter on maximum number of ticks to request from a quoteFeed. Setting a value in the quoteDriver's behavior will override an individual quoteFeed's maximumTicks value.

Since:

  • • 2016-12-01 added
    • 5.0.0 behavior.bufferSize is now available.
    • 5.1.1 added maximumTicks to behavior
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


calculateYAxisPositions()

This method calculates the left and width members of each y-axis.

When modifying a y-axis placement setting (widht, margins, position left/right, etc) after the axis has been rendered, you will need to call CIQ.ChartEngine#calculateYAxisMargins or this function, followed by CIQ.ChartEngine#draw to activate the change.


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>

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

createBlock()

Deprecated:
  • Yes

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.

For daily intervals, if a range is set, the aggregation will start rolling on the starting date of the range.
For example:

  • If the chart is displaying data with a beginning range set to the 1st of the month with a 5 day “roll-up”:
    • The first bar will include data for the 1st to the 5th of the month.
  • If the range is ten changed to begin on 2nd of the month, with the same 5 day “roll-up”:
    • The first bar will shift so it includes data for the 2nd to the 6th of the month.
  • As more data is bough in by zoom/pan operations, the chart will ensure that the '2nd – 6th' of the month point in time is still valid as the anchoring point of the roll up, backwards and forward. If a range is not set, the fist bar on the masterData will be used as the beginning roll up.

Weekly rollups start on Sunday unless a market definition exists to indicate Sunday is not a market day, then they are shifted to the next market day which is Monday. Instructions to set a market for the chart can be found here: CIQ.Market

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#updateChartData). It will execute a partial regeneration to increase performance.

appendToDate Date

Append from this point in the dataSet. Any existing data will be scrapped in favor of the data we are appending. If not set, then appended data will be added to the end of the existing dataSet.

Since:

  • • 3.0.0 Data set will be automatically filtered to exclude any data outside the active market sessions. See CIQ.Market for details on how to set market hours for the different exchanges.
    • 5.1.0 Consolidation for daily intervals now aligns with set range to improve rolling predictability on daily intervals.
    • 5.1.1 added params.appendToDate
    • 5.1.1 When chart.dynamicYAxis is true will calculate the length of text for a quote in pixels

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 CIQ.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 which 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 floating 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 text 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>

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

A 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

decimalPlacesFromPriceTick(priceTick)

Returns the appropriate number of decimal points to show for a given priceTick (distance between two ticks)

Parameters:
Name Type Description
priceTick number

The distance between two ticks

Since:
  • 5.2.0
Returns:

The number of decimal places appropriate to show

Type
number

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)


deleteSeries(field, chart [, params])

INJECTABLE Removes series data from masterData and unregisters the series from chart.series without removing it from any associated renderers. Also resets comparisons and updates the [quoteFeed subscriptions]{@lunk quotefeed.unsubscribe}. Not recommended to be called directly. Instead use CIQ.ChartEngine#removeSeries to remove a series from all associated renderers, or CIQ.Renderer#removeSeries to remove a series from a specific renderer.

Parameters:
Name Type Argument Description
field string | object

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

chart CIQ.ChartEngine.Chart

The chart to remove from

params object <optional>

Parameters

Properties
Name Type Argument Default Description
action string <optional>
"remove-series"

Action to be dispatched with symbolChange event

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

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 engine instantiated with new CIQ.ChartEngine();, eliminating all references including the resizeTimer, quoteDriver, styles and eventListeners.

It's still up to the developer to set the declared pointer for the instance to null so that the garbage collector can remove it.

This method should only be used when you no longer need the chart engine and never be used in between CIQ.ChartEngine#newChart calls to load or change symbols.


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>

Specifies 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)

This method is used to prepare date fields for internal use. It will:

  • convert dates to a JS Date in the timeZone set by setTimeZone(dataZone).
  • subsequently strip off the time portion on daily, weekly and monthly intervals.

  • If the date ('DT' or 'Date') does not include a time offset, such as 'yyyy-mm-dd', no time zone conversion will be performed. Use this option if you prefer to display the same date on all timezones. This applies to daily, weekly and monthly periodicities only.

Parameters:
Name Type Description
quotes array

The quote array to be converted

interval string

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

Since:

  • • 4.0.0
    • 5.2.0 used on intraday and daily quotes to also convert dates to the indicated `dataZone` as set by setTimeZone(dataZone).

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>

Chart object to target.

params object <optional>

Parameters

Properties
Name Type Argument Description
cleanupGaps string <optional>

Pass this in to override the CIQ.ChartEngine#cleanupGaps value.

noCleanupDates boolean <optional>

If true then dates have been cleaned up already by calling CIQ.ChartEngine#doCleanupDates, so do not do so in here.

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
    • 5.2.0 added parameter noCleanupDates
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.


drawBaselineChart(panel, parameters)

Draws a baseline chart.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Unless params are set, uses the following CSS styles for standard baselines:

  • stx_baseline_up - Color of the portion above the baseline
  • stx_baseline_down - Color of the portion below the baseline
  • stx_baseline - Color of the baseline

Additionally, unless params are set, uses CSS stx_baseline_delta_mountain for mountain baselines:

  • background-color - Background color for mountain
  • color - Optional gradient color
  • width - Optional line width
  • padding - Optional padding between the baseline and the mountain shading

Alternatively you can use CIQ.ChartEngine#setLineStyle to override the CSS style.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the baseline chart

parameters object

Configuration parameters

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

style string <optional>

The style selector which contains the styling for the mountain chart if mountain selected. Defaults to stx_baseline_delta_mountain.

field string <optional>

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

Since:
  • 5.1.0
Returns:

Data generated by the plot, such as colors used.

Type
object

drawHistogram(params, seriesParams)

Animation Loop Draws a generic histogram for the chart.


This method should rarely if ever be called directly. Use CIQ.Renderer.Histogram or CIQ.ChartEngine#setChartType instead.

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 Default Description
name string "Data"

Name of the histogram.

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;
	}
}];
// this will draw a **singe frame** of the histogram. 
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.

Requires "js/extras/hlcbox.js"

Default colors for this renderer, when used as a basic chart type, are set by CSS style stx_hlcbox_chart. Example:

    .stx_hlcbox_chart {
        color: xxx;
        border-left-color: yyy;
        background-color: zzz;
    }

where xxx is the fillColor, yyy is the borderColor, and zzz is the shadeColor.

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

Version:
  • ChartIQ Extras Package
Since:

  • • 4.0.0 added
    • 5.1.0 You can now set as primary chart type without an injection simply by calling: `stxx.setChartType("hlc_box");` or `stxx.setChartType("hlc_shaded_box");`. You must include `extras/hlcbox.js`.
    • 5.1.0 now returns 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
Examples

Used as a primary chart type :

stxx.setChartType("hlc_box");
// or
stxx.setChartType("hlc_shaded_box");

Used as an additional series :

stxx.addSeries('GE',{renderer:'HLCBox'});

Used as in a study panel :

CIQ.Studies.studyLibrary["Bollinger Profile"]={
	"name": "Bollinger Profile",
	"calculateFN": CIQ.Studies.calculateBollinger,
	"seriesFN": function(stx,sd,quotes){
		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.

This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Uses CSS style stx_line_chart to control width and color of line charts, unless params are set.

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

  • stx_line_up - Color of the uptick portion of the line
  • stx_line_down - Color of the downtick portion of 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>

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>

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.

tension number <optional>

Tension for splining. Requires "js/thirdparty/splines.js"

highlight boolean <optional>

If set then line will be twice as wide.

color string <optional>

The color for the line. Defaults to CSS style

pattern string <optional>

The pattern for the line ("solid","dashed","dotted"). Defaults to CSS style

width number <optional>

The width in pixels for the line. Defaults to CSS style

gapDisplayStyle object <optional>

Gap object as set by See CIQ.ChartEngine#setGapLines. If not set chart.gaplines will be used.

labelDecimalPlaces boolean <optional>

Specifies 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
    • 5.2.0 `params.gaps` has been deprecated and replaced with `params.gapDisplayStyle`
Returns:

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

Type
object

drawMountainChart(panel, params [, colorFunction])

Animation Loop Draws a mountain chart.


This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Uses CSS style style stx_mountain_chart, or stx_colored_mountain_chart to control mountain colors and line width, unless params are set.

  • background-color - Background color for mountain (top of the mountain, if grading in combination with 'color')
  • border-top-color - Optional gradient color (bottom of the mountain, if grading in combination with background-color')
  • border - Optional line color
  • width - Optional line width

Example using CIQ.ChartEngine#setStyle (alternatively, the CSS style can be directly overwritten on a CSS file):

stxx.setStyle("stx_mountain_chart","borderTopColor","blue");
stxx.setStyle("stx_mountain_chart","backgroundColor","purple");

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

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

Alternatively you can use CIQ.ChartEngine#setLineStyle to override the CSS style.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel on which to draw the mountain chart

params object

Configuration parameters

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

style string <optional>

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

reverse boolean <optional>

Set to true to draw a "reverse" mountain chart

field string <optional>

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

gapDisplayStyle object <optional>

Gap object as set by See CIQ.ChartEngine#setGapLines. If not set chart.gaplines will be used.

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
    • 5.2.0 `params.gaps` has been deprecated and replaced with `params.gapDisplayStyle`
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, params)

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

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'

params object

Configuration parameters for the colors (border_color_up and border_color_down)

Version:
  • ChartIQ Advanced Package
Since:

  • • 2015-04-24 added
    • 5.1.0 added parameters argument
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, params)

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. This method should rarely if ever be called directly. Use CIQ.Renderer.Lines or CIQ.ChartEngine#setChartType instead.

Parameters:
Name Type Description
panel string

The panel on the chart engine instance on which to draw the wave chart

params object

Additional parameters controlling the rendering

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

field string <optional>

Set to a symbol to indicate a series within the dataSet to plot, rather than the main series

Since:
  • 5.1.0 added params argument, return value
Returns:

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

Type
object
Example
// call it from the chart menu provided in the sample 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 primary symbol and any secondary symbols from any CIQ.ChartEngine#addSeries operation; if using a quoteFeed. Studies will be excluded from this object. The resulting list will be in the symbols 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>

Number of decimal places, otherwise it will be determined by the yaxis setting, or if not set, determined automatically

yAxis CIQ.ChartEngine.YAxis <optional>

yAxis. If not present, the panel's y-axis will be used.

Since:

  • • 4.0.0 condenseInt will be called only if equal or over 1000 rather than 100.
    • 5.2.0 all axes will be condensed to some degree to allow for more uniform decimal precision
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.Renderer#highLowBars is true. 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

getDataSegment( [chart])

Returns the visible portion of the dataSegment. A bar is considered visible if its midpoint is within the chart window. This is different than chart.dataSegment which includes any partially visible candles.

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.Chart <optional>

Chart from which to return the dataSegment

Since:
  • 5.2.0
Returns:

The visible bars of the dataSegment

Type
array

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.


getFirstLastDataRecord( [stx], data, field [, last])

Returns the first or last record in a quotes array (e.g. masterData, dataSet) containing the requested field. If no record is found, will return null

Parameters:
Name Type Argument Description
stx CIQ.ChartEngine <optional>

Chart engine object

data array

quotes array in which to search

field string

field to search for

last boolean <optional>

Switch to reverse direction; default is to find the first record. Set to true to find the last record.

Since:
  • 5.2.0
Returns:

The found record, or null if not found

Type
object

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:
  • 5.1.0 removed stx param
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

getSeries(params)

Returns an array of series that match the given filters.

If any series is an equation chart then the equation will be searched for the matching symbol.

Parameters:
Name Type Description
params object

Parameters

Properties
Name Type Argument Description
symbol string <optional>

Filter for only series that contain this symbol

symbolObject string <optional>

Filter for only series that contain this symbolObject

includeMaster boolean <optional>

If true then the masterSymbol will be checked for a match too. A blank object will be returned. You should only use this if you're just using this to look for yes/no dependency on a symbol.

chart CIQ.ChartEngine.Chart <optional>

Chart object to targer

Since:
  • 4.0.0
Returns:

Array of series descriptors

Type
array

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

getYAxisByName(panel, name)

Retrieves a Y-Axis based on its name property

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel

name string

The name of the axis

Since:
  • 5.2.0
Returns:

matching YAxis or undefined if none exists

Type
CIQ.ChartEngine.YAxis

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

Use this method to temporarily hide an enabled crosshair. Usually as part of a custom drawing or overlay to prevent the crosshair to display together with the custom rendering.

See CIQ.ChartEngine.layout.crosshair to enable/disable the crosshair.


home(params)

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

By default the home() behavior is to maintain the white space currently on the right side of the chart. To align the chart to the right edge instead, set the white space to 0 by calling: stxx.home({whitespace:0}); or stxx.home({maintainWhitespace:false});

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 right of the chart, or to false to align to the right edge.

whitespace number <optional>
0

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

chart CIQ.ChartEngine.Chart <optional>

Chart to scroll home. If not defined, all chart objects will be returned to the home position.

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
// programmatically 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}]);
// programmatically 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 false

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

There are 3 ways to use the this method:

  1. Preset the layout object in the chart instance, but do not load any data.
    • This is usually used to restore an initial 'symbol independent' general layout (chart type and studies mainly) that will then take effect when newChart is subsequently called.
    • In this case, exportedLayout should be called using 'withSymbols=false' and the importLayout should have 'noDataLoad=true'.
  2. Load an entire new chart and it's data, including primary symbol, additional series, studies, chart type, periodicity and range:
    • In this case, you should not need call newChart, setPeriodicity setSpan or setRange, addStudy, etc. since it is all restored from the previously exported layout and loaded using the attached quoteFeed.
    • If you still wish to change periodicity, span or range, you must use the CB function to do so.
    • In this case, exportedLayout should be called using 'withSymbols=true' and the importLayout should have 'noDataLoad=false' and 'managePeriodicity=true'.
  3. Reset layout on an already existing chart without changing the primary symbol or adding additional symbols:
    • This is used when restoring a 'view' on an already existing chart from a previous newChart call. The primary symbol remains the same, no additional series are added, but periodicity, range, studies nand chart type are restored from the previously serialized view.
    • In this case, exportedLayout should be called using 'withSymbols=false', and importLayout should have 'noDataLoad=false', managePeriodicity=true', and 'preserveTicksAndCandleWidth=true'.

Important Notes:

  • 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

  • When symbols are loaded, 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. You must be using a QuoteFeed to use this workflow.

  • When allowing this method to load data, 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.

  • Since spans and ranges require changes in data and periodicity, they are only imported if params.managePeriodicity is set to true and params.noDataLoad is set to false. If both range and span are present, range takes precedence.

Parameters:
Name Type Description
config object

A serialized layout generated by CIQ.ChartEngine#exportLayout

params object

Parameters to dictate layout behavior

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

If true, then any automatic data loading from the quotefeed will be skipped, including setting periodicity, spans or ranges.
Data can only be loaded if a quote feed is attached to the chart.

managePeriodicity boolean <optional>

If true then the periodicity will be set from the layout, otherwise periodicity will remain as currently set.
If the span/range 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.
Only applicable when noDataLoad=false.
See CIQ.ChartEngine#setPeriodicity for additional details

preserveTicksAndCandleWidth boolean <optional>
true

If true then the current candleWidth (horizontal zoom) and scroll (assuming same periodicity) will be maintained and any spans or ranges present in the config will be ignored. Otherwise candle width and span/ranges will be taken from the config and restored.

cb function <optional>

Callback function to be executed once the layout has been fully restored.

seriesCB function <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.1.0 Will now also import extended hours settings.
    • 5.1.0 Imports the range from layout if it is there to preserve between sessions.
    • 5.2.0 spans and ranges are only executed if managePeriodicity is true and preserveTicksAndCandleWidth is false.

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

INJECTABLE This method initializes the chart container events, such as window resize events, and the resizeTimer to ensure the chart adjusts as it's container size changes. It also initializes various internal variables, 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


modifySeries(descriptor [, parameters])

INJECTABLE Modify an existing series. Any passed parameters will extend the existing parameters.

Parameters:
Name Type Argument Description
descriptor string | Object

the series or series id which to modify

parameters Object <optional>

use this to override any option to addSeries

Since:

  • • 5.1.1
    • 5.2.0 no longer accepts a callback

mousemoveinner(epX, epY)

INJECTABLE 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

Which chart to create. Defaults to the default chart.

cb function <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
range Object <optional>

Default range to be used upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the range will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setRange for complete list of parameters this object will accept.

span object <optional>

Default span to display upon initial rendering. If both range and span parameters are passed in, range takes precedence. If periodicity is not set, the span will be displayed at the most optimal periodicity. See CIQ.ChartEngine#setSpan for complete list of parameters this object will accept.

periodicity object <optional>

Default periodicity to be used upon initial rendering. See CIQ.ChartEngine#setPeriodicity for complete list of parameters this object will accept.

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 or range are used.

Since:

  • 2015-11-1 newChart is capable of setting periodicity and span via `params` settings
    04-2016-08 `params.stretchToFillScreen` is available
    5.1.0 newChart is capable of setting range via `params` settings
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,timeUnit:'minute'},
		 		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)
	 	);

padOutPrice(price [, determinant])

Pads out the decimal places given only a price. It will not truncate, but will add zeroes. Prices under 2 will be padded to 4 decimal places. Prices over 1000 will not be padded. All other prices will be padded to 2 decimal places.

Parameters:
Name Type Argument Description
price number

A price

determinant number <optional>

Value to determine the decimal places. For instance, if you want to determine the number of decimals for today's change based on the actual price

Since:
  • 2016-07-16
Returns:

A price padded for decimal places

Type
string

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 [, adj] [, forward])

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 Argument Description
date string

String form date

chart CIQ.ChartEngine.Chart

The chart to look in

adj number <optional>

Timezone adjustment in minutes to apply to date before getting tick

forward boolean <optional>

Switch to return the next tick as opposed to the previous, in case an exact match is not found

Since:
  • added adj and forward arguments
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.gapDisplayStyle are set (see CIQ.ChartEngine#addSeries)

noDraw boolean <optional>

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

tension number <optional>

Tension for splining. Requires "js/thirdparty/splines.js"

pattern string <optional>

The pattern for the line ("solid","dashed","dotted")

width number <optional>

The width in pixels for the line

gapDisplayStyle object <optional>

Gap object as set by See CIQ.ChartEngine#setGapLines. If chart.gaplines is set, it will override this parameter.

reverse boolean <optional>

If true, it fills from the plot line to the top of the panel for a mountain chart to create a reverse mountain.

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
    • 5.2.0 `parameters.gaps` has been deprecated and replaced with `parameters.gapDisplayStyle`
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


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

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

This is uses for drawings, not series.

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. Requires "js/thirdparty/splines.js"

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>

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

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])

INJECTABLE 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])

INJECTABLE 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 occurs. 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, params)

Draws a scatter plot on the chart.

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

- color                - Optional color

This method should rarely if ever be called directly. Use CIQ.Renderer.Scatter or CIQ.ChartEngine#setChartType instead.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel on which to draw

params object

Additional parameters controlling the rendering

Properties
Name Type Argument Default Description
yAxis CIQ.ChartEngine.YAxis <optional>
panel.yAxis

Set to specify an alternate y-axis

field string <optional>

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

color string <optional>

Set to override the color of the plot.

Since:
  • 5.1.0 added params argument, return value
Returns:

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

Type
object
Example
// call it from the chart menu provided in the sample templates
	<li stxToggle="stxx.setChartType('scatterplot')">Scatter Plot</li>

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

Sets the base aggregation type for the primary symbol.

Parameters:
Name Type Description
chartType string

The chart type. See CIQ.ChartEngine.layout.aggregationType for valid options.

See Chart Styles and Types for more details. See the Overriding Defaults Section for details on how to override aggregation type defaults.

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", "relative".

  • Setting to "percent" or "relative" will call CIQ.ChartEngine#setComparison even of no comparisons are present; which sets stxx.chart.isComparison=true.
    • To check if scale is in percentage mode use stxx.chart.isComparison instead of using the CIQ.ChartEngine#chartScale value.
  • See CIQ.Comparison.initialPrice for details on how to set basis for "relative" scale.
Since:
  • 5.1.0 added "relative"

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.

See Chart Styles and Types for more details.


setComparison(mode [, chart] [, basis])

Turns comparison charting on or off and sets the transform.

Should not be called directly. Either use the CIQ.ChartEngine#addSeries isComprison parameter or use CIQ.ChartEngine#setChartScale

Parameters:
Name Type Argument Description
mode string | boolean

Type of comparison ("percent" or "relative").

  • Setting to true will enable "percent".
  • Setting to "relative" will allow the comparisons to be rendered in relation to any provided 'basis' value. For example, the previous market day close price.
chart CIQ.ChartEngine.Chart <optional>

The specific chart for comparisons

basis * <optional>

For a "relative" mode, the basis to relate to. Can be a number or a string. If a string, will use the first price in the datasegment for the series keyed by the string. Sets CIQ.Comparison.initialPrice.

Since:
  • 5.1.0 `mode` now also supports "relative" to allow comparisons to be rendered in relation to any provided value.

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])

Creates a gap filling style object for lines which can be used with any API call requiring a gap object. The gap object, called gaplines will be attached to the target passed in, or will set the the primary chart's gap style if to target is provided.

A gap is an area on a line type rendering ( mountain, baseline, step, etc) 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].

width number <optional>

Line width for gap plot, in pixels

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

Target to attach gaplines object to. If none provided it defaults to CIQ.ChartEngine.Chart.

Since:
  • 4.0.0
Examples
stxx.setGapLines("blue");
// the following will set stxx.chart.gaplines
stxx.setGapLines({color:"transparent",pattern:[1,2],width:3,fillMountain:true});
// the following will set objectTarget.gaplines
stxx.setGapLines({color:"transparent",pattern:[1,2],width:3,fillMountain:true,target:objectTarget});

setLineStyle( [obj] [, target])

Sets the line style for the main chart. Works for Lines renderer 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. This is ignored for a mountain chart.

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. "solid", "dashed", "dotted"

width number <optional>

Width of the line plot

target object <optional>
this.chart

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

Since:
  • 4.0.0
Examples
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. Also see Intl.DateTimeFormat for formatting alternatives

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
Examples
// override time formatting to enable 12 hour clock (hour12:true)
CIQ.I18N.setLocale(stxx, "en");
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});
// override formatting to dislay 'Sep 15' insted of '9/15' on x axis labels.
CIQ.I18N.setLocale(stxx, "en");
stxx.internationalizer.monthDay=new Intl.DateTimeFormat(this.locale, {month:"short", day:"numeric"});

setMainSeriesRenderer(eraseData)

Sets a renderer for the main chart. This is done by parsing the layout.chartType and layout.aggregationType and creating the renderer which will support those settings.

Parameters:
Name Type Description
eraseData boolean

Set to true to erase any existing series data

Since:
  • 5.1.0

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.

A new definition for a chart should only be set once, right before a new instrument is loaded with the CIQ.ChartEngine#newChart call. Loading or modifying a market definition after a chart has loaded it's data will result in unpredictable results.

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], params)

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.

params object

Parameters object

Properties
Name Type Argument Description
noCleanupDates boolean <optional>

If true then dates have been cleaned up already by calling CIQ.ChartEngine#doCleanupDates, so do not do so in here.

Since:
  • 5.2.0 added params and params.noCleanupDates.

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 Argument 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 Argument 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 data granularity (periodicity) and displays the resulting chart.

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.

The kernel is capable of deriving weekly and monthly charts by rolling-up daily data. Set CIQ.ChartEngine#dontRoll to true to bypass this functionality if you have raw week and month data in the masterData.

It is important to not that by default the weekly roll-ups start on Sunday unless a market definition exists to indicate Sunday is not a market day, then they are shifted to the next market day which is Monday. Instructions to set a market for the chart can be found here: CIQ.Market

A full tutorial on periodicity and roll-up can be found here.

See CIQ.ChartEngine#createDataSet for additional details on the roll-up process including important notes on rolling-up data with gaps.

This function will not set how much data you want the chart to show on the screen; for that you can use CIQ.ChartEngine#setRange or CIQ.ChartEngine#setSpan.

Note on 'tick' timeUnit:
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 time 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

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

timeUnit string <optional>

Type of data requested. Valid values are "millisecond","second","minute","day","week", "month" or 'tick'. If not set, will default to "minute". "hour" is NOT a valid timeUnit. Use timeUnit:"minute", interval:60 instead

interval string <optional>

Further qualifies pre-rolled details of intra-day timeUnits ("millisecond","second","minute") and will be converted to “1” if used with "day","week" or "month" 'timeUnit'. Some feeds provide data that is already rolled up. For example, there may be a feed that provides 5 minute bars. To let the chart know you want that 5-minute bar from your feed instead of having the chart get individual 1 minute bars and roll them up, you would set the interval to '5' and timeUnit to 'minute'

cb function <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 (combining 15 1-minute bars from your server)
stxx.setPeriodicity({period:15, timeUnit:"minute"}, function(err){});
// each bar on the screen will represent 15 minutes (a single 15 minute bar from your server)
stxx.setPeriodicity({period:1, timeUnit:"minute", interval:15}, 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, timeUnit:"minute", interval:15}, 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, timeUnit:"minute", 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>

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>

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 dataSet.

Layout preservation and the range
The selected range will be recorded in the chart CIQ.ChartEngine#layout when it is requested through CIQ.ChartEngine#newChart, or when you call setRange directly.
It is then used in CIQ.ChartEngine#importLayout and CIQ.ChartEngine#newChart to reset that range, until a new range is selected.

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.
If the left date is not a valid market date/time, the next valid market period forward will be used.

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.
If the right date is not a valid market date/time, the next valid market period backwards will be used.

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. See CIQ.ChartEngine#staticRange if you wish to make this your default behavior.

goIntoPast boolean <optional>

If true then the left side of the chart will be set into the past if dtLeft is less than first tick. See CIQ.ChartEngine#staticRange if you wish to make this your default behavior.

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.

dontSaveRangeToLayout boolean

If true then the range won't be saved to the layout.

forceLoad boolean <optional>

Forces a complete load (used by newChart)

cb function <optional>

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

Since:
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, will just return the previously created renderer. 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 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 programmatically set or change a style on the chart.

To see immediate results, call CIQ.ChartEngine#draw once this method is used.

Primarily used in the CIQ.ThemeHelper to programmatically override defaults CSS colors to create custom themes.

For more details on customizing colors in the chart see Chart Styles and Types.

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. It will accept hyphenated or camel case formats.

value string

The value to assign to the attribute

Example
stxx.setStyle("stx_candle_up","borderLeftColor","green");
stxx.setStyle("stx_candle_down","borderLeftColor","red");
stxx.draw();

setTimeZone(dataZone, displayZone)

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

Important:

  • The dataZone property on this method must be set before any data is loaded so the engine knows how to convert the incoming records.
  • The displayZone` property on this method can be set at any time and will only affect what is displayed on the x axis.
  • This method should only be used for dates that are not timeZone aware. If using the 'DT' fields in your data input records, DO NOT use this function to set the dataZone as it will result in a double conversion.
  • Once set, 'Date' fields containing a time portion, will be converted to the CIQ.ChartEngine#dataZone (or the browser timezone if no dataZone is specified) before added into the masterData. It's corresponding 'DT' fields will be set to match. 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.

  • If the date ('DT' or 'Date') does not include a time offset, such as 'yyyy-mm-dd', no time zone conversion will be performed. Use this option if you prefer to display the same date on all timezones. This applies to daily, weekly and monthly periodicities only. For a list of all supported date formats see the Input format Tutorial

Time zone and the quotefeed:
On a fetch call, if your quote server sends and receives string dates loaded in the 'Date' field, you can convert the provided start and end dates back to strings using CIQ.yyyymmddhhmmssmmm Example:

var strStart =  CIQ.yyyymmddhhmmssmmm(suggestedStartDate) ;
var strEnd = CIQ.yyyymmddhhmmssmmm(endDate);

These dates will be in the same time zone you sent them in. So they will match your quote feed.

For more details on how time zones work in the chart see the Dates and Timezones tutorial.

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.

Since:
  • 5.2 also used to convert daily, weekly and monthly periodicities.

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

Re-displays a crosshair temporarily hidden by CIQ.ChartEngine#hideCrosshairs


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#updateChartData. This also means that CIQ.ChartEngine#streamParameters.fillGaps is deprecated. Developers should instead call CIQ.ChartEngine#updateChartData with params.fillGaps=true or rely on cleanupGaps as default behavior.

streamTrade to updateChartData migration examples:

Note that updateChartData 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}, null, "IBM");
Translates to :
updateChartData({"Last":102.05}, null, {fillGaps: true, secondarySeries: "IBM"});

Example 2: streaming a primary series:

streamTrade({"last":102.05, "volume":100});
Translates to :
updateChartData({"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#updateChartData for the actual data insertion into masterData. Please see CIQ.ChartEngine#updateChartData 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#updateChartData

Since:
  • 4.0.0 Deprecated this function. This also means that streamParameters.fillGaps is deprecated. Developers should call CIQ.ChartEngine#updateChartData with params.fillGaps=true or rely on cleanupGaps as default behavior.
Deprecated:
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>

Chart object

adj number <optional>

Timezone adjustment in minutes to apply to date before getting tick

forward boolean <optional>

Switch to return the next tick as opposed to the previous, in case an exact match is not found

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

Revers back to 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 and triggers a call to the undoStampEventListener.

Every time a drawing is added or removed the CIQ.ChartEngine#undoStamps object is updated with a new entry containing the resulting set of drawings. Using the corresponding CIQ.ChartEngine#undoLast method, you can revert back to the last state, one at a time. You can also use the undoStampEventListener to create your own tracker to undo or redo drawings.

Parameters:
Name Type Description
before array

The chart's array of drawingObjects before being modified

after array

The chart's array of drawingObjects after being modified


unregisterChartDrawnCallback(fc)

Removes a callback registration for when the chart has been drawn

Parameters:
Name Type Description
fc object

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


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

INJECTABLE Use this method to add new OHLC bars to the end of the chart, insert new bars into the middle of the chart, replace existing bars, delete bars, or stream individual LAST SALE data tick by tick as they are received from a streaming feed.

The following rules apply when adding or updating full OHLC bars:

  • Follow proper OHLC format as outlined on the OHLC format tutorial.
  • If a bar is not present it will be added, if it is present it will be updated so the OHLC and volume integrity is preserved. If allowReplaceOHL is not set, the 'Open' is preserved from the existing candle; new 'High' and 'Low' values are calculated, and the 'Close' and 'Volume' values are replaced with the new ones.
  • Although gaps can be present, dates in the appendQuotes array must maintain the correct periodicity and order (older to newer) to prevent out of sequence ticks.
  • If set, gaps will be filled past the currently existing bar. No gaps will be filled when inserting bars in between existing data.

The following rules apply when streaming individual LAST SALE data, tick by tick, as they are received from a streaming feed:

  • Follow proper LAST SALE format as outlined on the parameters section under the appendQuotes field.
  • This method is designed to update the chart while maintaining the existing periodicity, augmenting the tick for an instrument or creating new ticks as needed.
  • For a primary series, the Close, High and Low prices for the last bar 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 (see params.secondarySeries), the series field will be set or replaced with the price sent (Close or Last), creating new bars where none existed, but also respecting the periodicity. This is done using CIQ.addMemberToMasterdata
  • 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

OHLC format requirements
An array of properly formatted OHLC quote object(s). See OHLC Data Format.

----

LAST SALE format requirements
A last sale object with the following elements:

Properties
Name Type Argument Description
Last number <optional>

Last sale price

Volume number <optional>

Trade volume (used on primary series only)

Bid number <optional>

Bid price (used on primary series only)

Ask number <optional>

Offer/Ask price (used on primary series only)

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. Items in this array must be ordered from earliest to latest date.

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

noCleanupDates boolean <optional>

If true then do not clean up the dates using CIQ.ChartEngine#doCleanupDates. Usually set if dates were already cleaned up.

allowReplaceOHL boolean <optional>

Set to true to bypass internal logic that maintains OHL so they are instead replaced with the new data instead of updated. Not applicable when loading data for a secondary series.

bypassGovernor boolean <optional>

If true then masterdata will be immediately updated regardless of CIQ.ChartEngine#streamParameters. Not applicable if noCreateDataSet is true.

fillGaps boolean <optional>

If true and CIQ.ChartEngine#cleanupGaps is also set, CIQ.ChartEngine#doCleanupGaps will be called to fill gaps for any newly added bars past the currently existing bar. It will not fill gaps for bars added to the middle of the masterData, or created by deleting a bar. Not applicable when loading data for a secondary series.
Reminder: tick does not fill any gaps as it is not a predictable interval.

secondarySeries boolean <optional>

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

overwrite boolean <optional>

When params.secondarySeries is true, setting this to true will not aggregate the series data, and instead replace it with the new data. Aggregation of series data occurs as follows:
• Open comes from the original data's Open
• Close comes from the new data's Close
• High comes from the higher of the original data and new data's High
• Low comes from the lower of the original data and new data's Low
• Volume comes from the sum of the original data and new data's Volume

deleteItems boolean <optional>

Set to true to completely delete the masterData records matching the dates in appendQuotes. Not applicable when loading data for a secondary series.

useAsLastSale boolean <optional>

Set to true if not using a 'last sale' formatted object in appendQuotes. 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. Not applicable when loading data for a secondary series.

Since:

  • • 5.1.0 New function replacing and enhancing legacy method `appendMasterData`.
    • 5.1.0 Added ability to delete or insert items anywhere in the masterData. `deleteItems` parameter added.
    • 5.2.0 `overwrite` param added
    • 5.2.0 For main series data, if Close=null is set, and not streaming, then Open, High, Low and Volume also set to null.
    • 5.2.0 For main series data, if Volume=0/null is set, and not streaming, then Volume is reset to 0.
    • 5.2.0 Added params.noCleanupDates
Examples
// this example will stream the last price on to the appropriate bar and add 90 to the bar's volume.
	  stxx.updateChartData(
		  {
			  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.updateChartData(
		  {
			  Last: 50.94,
			  Volume: 90
		  },
		  null,
		  {useAsLastSale: {aggregatedVolume:true}}
	  );
// this example will stream the last price to the appropriate bar  **for a secondary series**.
	  stxx.updateChartData(
		  {
			  Last: 50.94
		  },
		  null,
		  {secondarySeries:secondarySymbol}
	  );
// this example will add or replce a complete OHLC bar.
	  stxx.updateChartData(
		  [
		  	{"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}
		  ]
	  );

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)

Since:
  • 5.2.0 decimalPlaces for label determined by distance between ticks as opposed to shadow
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

whichYAxis(panel [, x])

Returns the yaxis that the crosshairs (mouse) is on top of

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel

x number <optional>

The X location. Defaults to CIQ.ChartEngine#cx

Since:
  • 15-07-01
Returns:

The yAxis that the crosshair is over

Type
CIQ.ChartEngine.YAxis

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 = 30%)


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 = 30%)

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.