API Reference
Namespaces
Classes
Events
Global
Externals

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.

enableLinks boolean <optional>

If true, the story's content is trusted as safe HTML script. As a result, any links in the story will be clickable.

pinnable boolean <optional>

If true, new marker can be "pinned". False by default. Requires js/extras/pinnedMarkers.js, which is part of the ChartIQ Extras Package. See CIQ.Marker.prototype.makePinnable for instructions on using this flag.

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.
  • 9.1.0 Added params.enableLinks.
  • 9.1.2 Added params.pinnable, which requires js/extras/pinnedMarkers.js, which is part of the ChartIQ Extras Package.
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",
        pinnable: true, //Requires ChartIQ Extras Package
        displayCategory: false,
        displayStem: false,
        size: "small",
        headline: "Executed at $" + OHLCData.Close,
        story: "Like all ChartIQ markers, the object itself is managed by the chart."
    })
});

Members


isCanvasMarker :boolean

READ ONLY. Indicates that the nodeCreator draws markers on the canvas instead of creating new DOM Elements.

Type:
  • boolean
Since:
  • 9.1.2

Default Value:
  • true

Methods


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 string

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


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: