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
|
- Since:
-
- 7.1.0
- 7.2.0 Markers without both a
headline
andstory
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
, andparams.invert
. - 8.6.0 Added
params.hide
,params.size
, andparams.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
.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:
-
7.2.0 Replaces CIQ.ChartEngine#drawMarkers.