Legacy ChartIQ SDK Documentation

Class: Performance

CIQ .Marker. Performance

new Performance(params)

Creates high performance canvas nodes that can be used with a CIQ.Marker.

Use this class if you need to add hundreds or thousands of markers to a chart. When a marker is created, this class creates a node from the built-in template but does not attach the node to the DOM until you hover over the canvas drawing. Once you intersect the drawing, the node is appended and you can interact with it like other markers.

The canvas draws the marker based on the classes that you append to the template (which come from params.type and params.category) being added to stx-marker class. See CIQ.ChartEngine#calculateMarkerStyles for more information.

This class takes the same params as CIQ.Marker.Simple so that the appended DOM marker works the same. This means that you can reuse all of the default styles you've created for CIQ.Marker.Simple with CIQ.Marker.Performance. Note: If you do not pass in either a headline or a story or both, your marker will not create a pop-up display when the marker is selected.

See the Markers tutorial for additional implementation instructions.

Parameters:

Name Type Description

params

Object

Parameters to describe the marker.

Properties

Name	Type	Argument	Default	Description
`type`	string			The marker type to be drawn. Available options are: "circle" "square" "diamond" "callout" "text"
`headline`	string	<optional>		The headline text to pop up when clicked.
`category`	string	<optional>		The category class to add to your marker. Available options are: "news" "earningsUp" "earningsDown" "dividend" "filing" "split" Other custom categories require a corresponding CSS entry. See example.
`size`	string	<optional>		Size class to add to your marker. Requires corresponding CSS entry.
`displayCategory`	boolean	<optional>	true	Set to false to not draw the first letter of the category in the marker.
`displayLabel`	string	<optional>		Text to place in the marker. Overrides `displayCategory`.
`story`	string	<optional>		The story to pop up when clicked. If left undefined, the marker displays an empty DOM node when clicked.
`color`	string	<optional>		Background color to make your marker. Overrides any style set by `params.category`.
`displayStem`	boolean	<optional>	true	Set to false to draw the marker at a specific point and not include the stem.
`invert`	boolean	<optional>	false	Set to true to invert the stem and point downward.
`infoOnLeft`	boolean	<optional>		If true, the information pop-up box is positioned on the left when possible.
`infoOffset`	number	<optional>		Distance to offset the information pop-up box.
`hide`	boolean	<optional>		Do not process display of marker.

Since:

7.1.0
7.2.0 Markers without both a headline and story are not interactive. You must provide either or both properties for a node (which is the marker pop-up display) to be appended to the DOM. Performance markers now can be positioned anywhere that a DOM marker can be positioned (above, below, or on a candle; at a value; or at the top or bottom of a chart).
8.0.0 Added params.infoOnLeft, params.infoOffset, and params.invert.
8.6.0 Added params.hide, params.size, and params.displayLabel.

Example

Required CSS entry for a custom category ("trade"), not included in the default CSS styles.

.stx-marker.trade.small .stx-visual {
    background: #C950d7;
    width: 5px;
    height: 5px;
}

// Corresponding code:

new CIQ.Marker({
    stx: stxx,
    label: "trade",
    xPositioner: "date",
    x: OHLCData.DT,
    node: new CIQ.Marker.Performance({
        type: "circle",
        category: "trade",
        displayCategory: false,
        displayStem: false,
        size: small,
        headline: "Executed at $" + OHLCData.Close,
        story: "Like all ChartIQ markers, the object itself is managed by the chart."
    })
});

Methods

drawMarkers(stx)

Animation Loop

Iterates through all high performance canvas markers and draws them on the canvas.

See Markers tutorials for additional implementation instructions.

Parameters:

Name	Type	Description
`stx`	CIQ.ChartEngine	A reference to the chart object.

Since:

7.2.0 Replaces CIQ.ChartEngine#drawMarkers.

calculateYPosition(params)

Calculates the initial y-axis positioning when drawing a canvas marker.

Parameters:

Name Type Description

params

object

Properties

Name	Type	Description
`marker`	CIQ.Marker	The marker for which the y-axis position is calculated.
`panel`	CIQ.ChartEngine.Panel	Panel on which the marker appears.
`tick`	number	The tick of the quote in the chart's data set.
`height`	number	Total height of the marker as defined by marker height plus stem height.
`half`	number	Half the height of the marker as defined by the marker CSS style.
`offset`	number	Height of the offset provided when creating the marker.
`stemHeight`	number	Height of the marker stem offset as defined by the marker stem CSS style height plus margin bottom.
`inverted`	boolean	Indicates whether the marker stem is inverted; that is, pointing downward.
`field`	boolean	Field to attach marker to if using appropriate yPositioner.
`x`	number	Already computed x position, in pixels.

Since:

7.2.0
8.0.0 Added param inverted.
8.6.0 Added params field, x, stemHeight.

Returns:

Initial y-coordinate positioning for drawing the canvas marker.

Type: number

click(params)

Click event handler for performance markers when they are clicked in the canvas. Adds or removes the marker's pop-up expand div to the chart, depending on whether it has already been activated.

Parameters:

Name Type Description

params

object

Configuration parameters.

Properties

Name	Type	Description
`cx`	number	Client x-coordinate of click.
`cy`	number	Client y-coordinate of click.
`marker`	CIQ.Marker	Marker that was clicked.
`panel`	CIQ.ChartEngine.Panel	Panel where the click occurred.

Since:

7.2.0

drawMarker(marker)

Draws a canvas marker on the chart and positions the pop-up for the marker if necessary.

Parameters:

Name	Type	Description
`marker`	CIQ.Marker	The marker to be drawn.

Since:

7.2.0