Global

Methods


$$(id [, source])

Shorthand for getElementById(). Equivalent to prototype style $() which is faster but less powerful than jquery style $()

Parameters:
Name Type Argument Description
id string

An ID tag for a valid DOM object

source object <optional>

An optional valid DOM node to search within. If not provided then the entire document will be searched.

Returns:

The DOM node associated with the id or null if it is not found

Type
object

$$$(selector [, source])

Functional equivalent of querySelector(). Functionally equivalent to jquery $(). This uses querySelectorAll in order to maintain compatibility with IE 9. Note that if multiple objects match the selector then only the first will be returned.

Parameters:
Name Type Argument Description
selector string

CSS style selector

source object <optional>

Optional node to select within. If not provided then entire document will be searched.

Returns:

The first object to match the selector

Type
object

isChartAvailable()

Checks the chart availability

Returns:

the current chart available state

Type
boolean

setChartAvailable(finished)

Sets the state of the loaded chart

Parameters:
Name Type Description
finished boolean

the current chart available state


setChartEngineInBridge(chartEngine)

Helper function that will set the chart engine for all necessary functions By default the sample template uses stxx, but just in case the user changes the name

Parameters:
Name Type Description
chartEngine CIQ.ChartEngine

The chart instance

Type Definitions


colorObject

An object that describes how the renderer should draw a specific part of the chart; as generated and returned by CIQ.ChartEngine~colorFunction

Properties:
Name Type Description
color string

Any string value that can be interpreted by the Canvas context

pattern array

Description of the pattern in an on/off value description of

width number

Width in pixels that that the pattern should be drawn in.


doubleTapEventListener(data)

Called on CIQ.ChartEngine.AdvancedInjectable#touchDoubleClick when the chart is quickly tapped twice.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "tap" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

finger number

Which finger double tapped

x number

The crosshair x position

y number

The crosshair y position

Since:
  • 4.0.0

drawingEditEventListener(data)

A right-click on a highlighted drawing.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "drawingEdit" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

drawing CIQ.Drawing

The highlighted drawing instance


drawingEventListener(data)

Parameters:
Name Type Description
data object

Data relevant to the "drawing" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The current chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

layout object

The chart's layout object (CIQ.ChartEngine.layout)

drawings array

The chart's current drawings (CIQ.Drawing)


layoutEventListener(data)

Called when a change occurs in the chart layout.

Such as calling CIQ.ChartEngine#setChartType, CIQ.ChartEngine#setAggregationType, CIQ.ChartEngine#setChartScale, CIQ.ChartEngine#setAdjusted, WebComponents.cq-toggle, using the WebComponents.cq-toolbar to disable the current active drawing tool or toggling the crosshair, using the WebComponents.cq-views to activate a serialized layout, modifying a series, setting a new periodicity, adding or removing a study overlay, adding or removing any new panels (and they corresponding studies), zooming in or zooming out, setting ranges with CIQ.ChartEngine#setSpan or CIQ.ChartEngine#setRange, nullifying a programmatically set Span or Range by user panning, enabling or disabling [Extended Hours]{@linkCIQ.ExtendedHours} or toggling the range slider.

Note that scrolling and panning changes are not considered a layout change but rather a shift of the view window in the same layout. To detect those you can register to listen for scroll events

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "layout" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The current chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

layout object

The chart's layout object (CIQ.ChartEngine.layout)

drawings array

The chart's current drawings (CIQ.Drawing)


longholdEventListener(data)

Called when the mouse is clicked on the chart and held down.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "longhold" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

panel string

The panel being tapped

x number

The crosshair x position

y number

The crosshair y position


moveEventListener(data)

Called when the pointer is moved inside the chart, even on panning or horizontal swiping.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "move" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

panel string

The panel where the mouse is active

x number

The crosshair x position

y number

The crosshair y position

grab boolean

True if the chart is being dragged


newChartEventListener(data)

Called when the quotefeed interface loads a complete data set as a result of:

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "newChart" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The current chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

moreAvailable boolean

True if quotefeed~dataCallback reports that more data is available

quoteDriver object

The quoteFeed driver


preferencesEventListener(data)

Parameters:
Name Type Description
data object

Data relevant to the "preferences" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The current chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

layout object

The chart's layout object (CIQ.ChartEngine.layout)

drawingObjects array

The chart's current drawings (CIQ.ChartEngine.drawingObjects)


rightClickEventListener(data, panel)

Called on "mouseup" after the chart is right-clicked.

Note that by default right clicks are only captured when mousing over chart objects such as series and drawings. To enable right-click anywhere on the chart, the "contextmenu" event listener must be modified as follows:

document.removeEventListener("contextmenu", CIQ.ChartEngine.handleContextMenu);
document.addEventListener("contextmenu", function(e){if(!e) e=event; if(e.preventDefault) e.preventDefault();return false});

See CIQ.ChartEngine#addEventListener and CIQ.ChartEngine.handleContextMenu

Parameters:
Name Type Description
data object

Data relevant to the "rightClick" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

panel string

The panel that was clicked on

data.x number

The crosshair x position

data.y number

The crosshair y position

Example

Will trigger and provide location and details when clicking on a series:

stxx.addEventListener("tap", function(tapObject) {
	if (this.anyHighlighted) {
		for (var n in this.chart.seriesRenderers) {
			var r = this.chart.seriesRenderers[n];
			for (var j = 0; j < r.seriesParams.length; j++) {
				series = r.seriesParams[j];
				if (series.highlight) {
					var bar = this.barFromPixel(tapObject.x);
					if (this.chart.dataSegment[bar]) {
						// replace console.log with your required logic as needed.
						console.log("Tap event at pixel x: " + tapObject.x + " y: " + tapObject.y);
						console.log(
							"Price:",
							this.priceFromPixel(tapObject.y),
							" Date: ",
							this.chart.dataSegment[bar].DT
						);
						console.log("Series Details: ", JSON.stringify(series));
					}
				}
			}
		}
	}
});

scrollEventListener(data)

Called when the chart is panned and scrolled in any direction or is horizontally swiped.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "scroll" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

panel string

The panel where the mouse is active

x number

The crosshair x position

y number

The crosshair y position

Since:
  • 6.3.0

studyDescriptor

A study descriptor as returned by CIQ.Studies.addStudy.

The primary properties are outlined in this section. More details can be found in the Study objects tutorial

Type:
  • object
Properties:
Name Type Description
name string

The study's id.

Please note: To facilitate study name translations, study names use zero-width non-joiner (unprintable) characters to delimit the general study name from the specific study parameters. Example: "\u200c"+"Aroon"+"\u200c"+" (14)". At translation time, the library will split the text into pieces using the ZWNJ characters, parentheses and commas to just translate the required part of a study name. For more information on ZWNJ characters see: Zero-width_non-joiner. Please be aware of these ZWNJ characters, which will now be present in all study names and corresponding panel names; including the layout.studies study keys. Affected fields in the study descriptors could be id, display, name and panel.
To prevent issues, always use the names returned in the study descriptor. This will ensure compatibility between versions.

Example:
Correct reference:
stxx.layout.studies["\u200c"+"Aroon"+"\u200c"+" (14)"];
Incorrect reference:
stxx.layout.studies["Aroon (14)"];

inputs object

Keys for each possible study input with descriptors for the set and default values

min number

The minimum data point

max number

The maximum data point

outputs object

Keys for each possible study output with its corresponding rendering color.

panel string

ID of the panel element the study is attached to

parameters parameters

Keys for each of the study's possible plot parameters

type string

The study type

outputMap object

Mapping between a unique study field name in the dataSet/datSegment and its corresponding general outputs name/color, as set in the study library entry.
This mapping is automatically created and present on all study descriptors, and used by all default study functions to ensure data generated by a calculation function can be found by the display function.
Example:

// Map for an Alligator study with inputs of:
// -Jaw Period:13
// -Jaw Offset:8
// -Teeth Period:8
// -Teeth Offset:5
// -Lips Period:5
// -Lips Offset:3
// -Show Fractals:false

{
	"Jaw ‌Alligator‌ (13,8,8,5,5,3,n)":	"Jaw",
	"Teeth ‌Alligator‌ (13,8,8,5,5,3,n)":	"Teeth",
	"Lips ‌Alligator‌ (13,8,8,5,5,3,n)":	"Lips"
}

studyOverlayEditEventListener(data)

Called when an overlay-type study is right clicked.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "studyOverlayEdit" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

sd object

The study object studyDescriptor

inputs object

The inputs from the studyDescriptor

outputs object

The outputs from the studyDescriptor

parameters object

The parameters from the studyDescriptor

Example
stxx.addEventListener("studyOverlayEdit", function(studyData) {
	CIQ.alert(studyData.sd.name);
	var helper = new CIQ.Studies.DialogHelper({ name: studyData.sd.type, stx: studyData.stx });
	console.log("Inputs:", JSON.stringify(helper.inputs));
	console.log("Outputs:", JSON.stringify(helper.outputs));
	console.log("Parameters:", JSON.stringify(helper.parameters));
	// call your menu here with the  data returned in helper
	// modify parameters as needed and call addStudy or replaceStudy
});

studyPanelEditEventListener(data)

Called when a panel-type study is edited

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "studyPanelEdit" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

sd object

The study object studyDescriptor

inputs object

The inputs from the studyDescriptor

outputs object

The outputs from the studyDescriptor

parameters object

The parameters from the studyDescriptor


symbolChangeEventListener(data)

Called when the chart's symbols change. Including secondary series and underlying symbols for studies ( ie. price relative study)

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "symbolChange" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The new chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

action string

An action type being performed on the symbol. Possible options: - add-series - A series was added - master - The master symbol was changed - remove-series - A series was removed


symbolImportEventListener(data)

Called when a symbol is imported into the layout. Including secondary series and underlying symbols for studies ( ie. price relative study) It is not called by other types of symbol changes.

See CIQ.ChartEngine#importLayout

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "symbolImport" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The new chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

action string

An action type being performed on the symbol. Possible options:

  • add-series - A series was added
  • master - The master symbol was changed
  • remove-series - A series was removed

tapEventListener(data)

Called on "mouseup" when the chart is tapped.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "tap" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

panel string

The panel being tapped

x number

The crosshair x position

y number

The crosshair y position


themeEventListener(data)

Called when a new theme is activated on the chart.

Such as theme changes using the WebComponents.cq-theme-dialog or WebComponents.cq-themes initialization.

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "theme" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

symbol string

The current chart symbol

symbolObject object

The symbol's value and display label (CIQ.ChartEngine.chart.symbolObject)

layout object

The chart's layout object (CIQ.ChartEngine.layout)

drawingObjects array

The chart's current drawings (CIQ.ChartEngine.drawingObjects)


undoStampEventListener(data)

Called when an undo stamp is created for drawing events.

See CIQ.ChartEngine#undoStamp

See CIQ.ChartEngine#addEventListener

Parameters:
Name Type Description
data object

Data relevant to the "undoStamp" event

Properties
Name Type Description
stx CIQ.ChartEngine

The chart engine instance

before array

The chart's array of drawingObjects before the change

after array

The chart's array of drawingsObjects after the change