Class: Marker

CIQ. Marker


new Marker(params)

A marker is a DOM object that is managed by the chart.

Makers are placed in "holders" which are DIV elements whose placement and size corresponds with a panel on the chart. A holder exists for each panel.

A marker's primary intent is to provide additional information for a particular existing datapoint within the chart. As such they are placed by date, tick or bar to control their position on the x-axis. They are placed by value (price) to control their position on the y-axis. Markers will be repositioned when the user scrolls or zooms the chart.

Alternatively, a marker can also be places at an absolute positions using CSS positioning. Un this case, the chart will not control its positing.

The default placement function for any markers is CIQ.ChartEngine#defaultMarkerPlacement, but custom placement functions can be created as needed.

If markers must be part of an exported image generated using the CIQ.Share plug-in, you need to draw them on the actual canvas instead using Canvas Markers.

See the Markers tutorials for additional implementation instruction, and details for managing performance on deployments requiring a large number of markers.

Parameters:
Name Type Description
params Object

Parameters that describe the marker

Properties
Name Type Argument Default Description
stx CIQ.ChartEngine

The chart to attach the marker

x *

A valid date, date string, tick or bar (depending on selected xPositioner) to select a candle to attach to.

y Number

A valid value for positioning on the y-axis (depending on selected yPositioner, if missing the marker will be set "above_candle" as long as a valid candle is selected by params.x)

node HTMLElement <optional>

The HTML element. This should be detached from the DOM! If none passed then a blank div will be created.

panelName string "chart"

The name of the panel to attach the holder. Defaults to the main chart panel.

xPositioner string <optional>
"date"

Determines the x position. Values are:

  • "date" (params.x must be set to a JavaScript date. This will be converted to the closest masterData position if the provided date does not exactly match any existing points.)
  • "master" (params.x must be set to a masterData position)
  • "bar" (params.x must be set to a dataSegment position)
  • "none" (use CSS positioning, params.x will not be used)
yPositioner string <optional>
"value"

Determines the y position. Values are:

  • "value" (params.y must be set to an exact y axis value. If params.y is omitted, the y position will default to above_candle)
  • "above_candle" (right above the candle or line. If more than one on same position, they will align upwards from the first. params.y will not be used)
  • "under_candle" (right under the candle or line. If more than one on same position, they will align downwards from the first. params.y will not be used)
  • "on_candle" (in the center or the candle or line - covering it. If more than one on same position, they will align downwards from the first. params.y will not be used)
  • "top" (on top of the chart, right under the margin. If more than one on same position, they will align downwards from the first. params.y will not be used)
  • "bottom" ( on the bottom of the chart, right over the margin. If more than one on same position, they will align upwards from the first. params.y will not be used)
  • "none" (use CSS positioning. params.y will not be used)
permanent boolean <optional>
false

Stays on the chart even when chart is re-initialized (symbol change, newChart(), initializeChart())

label string <optional>
"generic"

A label for the marker. Multiple markers can be assigned the same label. This allows them to be deleted in one fell swoop.

includeAxis boolean <optional>
false

If true then the marker can display on the x or y axis. Otherwise it will be cropped at the axis edges.

chartContainer Boolean <optional>

If true then the marker will be put directly in the chart container as opposed to in a holder. When placing markers directly in the chart container, the z-index setting for the marker should be set vis a vis the z-index of the holders in order to place the markers below or above those inside the holders.

Version:
  • ChartIQ Advanced Package
Since:

  • 15-07-01 Class added
    05-2016-10 It now takes the following `params.yPositioner` values: "value", "above_candle", "under_candle","on_candle","top","bottom"
Example
new CIQ.Marker({
	stx: stxx,
	xPositioner: "date",
 yPositioner: "value",
	x: someDate,
	label: "events",
	node: newNode
});

Classes

HeadsUp
NodeCreator
Simple

Methods


positionContentVerticalAndHorizontal(node)

Content positioner for any markers using the 'stx-marker-expand' class, this will consider the marker node's location within its container and determine where to place the content, be it to the left or right/top or bottom of the marker node (so it is all showing)

Parameters:
Name Type Description
node HTMLElement

The HTML element representing the marker which has content

Since:
  • 5.1.2

removeByLabel(stx, label)

Removes all markers with the specified label from the chart object

Parameters:
Name Type Description
stx CIQ.ChartEngine

The chart object

label string

The label

Since:
  • 15-07-01

remove()

Removes the marker from the chart object

Since:
  • 15-07-01