API Reference
Namespaces
Classes
Events
Global
Externals

Class: Markers

CIQ.UI. Markers


new Markers(context, params)

UI Helper for managing the 'Events' menu drop down for showing markers on the chart.

Parameters:
Name Type Description
context CIQ.UI.Context

The context

params Object

initialization parameters

Properties
Name Type Argument Default Description
menuItemSelector String

The selector used to identify menu items for selecting markers

activeClassName String <optional>
"ciq-active"

The class name to be added to a node when a layout item is enabled

implementation Object <optional>

A class for showing markers which implements the showMarkers method

Since:
  • 7.1.0

Methods


showMarkers(node, type, markerType)

Displays the markers specified by the type parameter. If type is not provided, all currently displayed markers are removed. Must be called from a menu item.

To use this function:

  1. Create an implementation that provides the methods for managing markers.

    The marker implementation must include a showMarkers function that accepts the following parameters:

    • type — Categorizes the marker as a circle, square, or specialized type such as trade or video.
    • renderType — Specifies the marker class, either Simple or Performance.

    See the MarkersSample class in the markersSample.js file in the examples/markers folder of your library for a complete example implementation.

  2. Assign the implementation to the eventMarkersImplementation property of the chart configuration object.

    For example, from the sample-template-advanced.html template (in the examples/templates folder of your library):

    import marker from "./examples/markers/markersSample.js";
    
    const config = getDefaultConfig({
        markerSample: marker.MarkersSample,
        .
        .
        .
    });
    

    The markerSample parameter is assigned to the eventMarkersImplementation property of the chart configuration object.

    See the Chart Configuration tutorial for more information.

Parameters:
Name Type Description
node HTMLElement
type string

Marker type: "circle", "square", or "callout".

markerType string

Class of marker to draw: "Simple" or "Performance".

Since:
  • 7.1.0 Added markerType.

Example
<cq-item stxtap="Markers.showMarkers('square')">
	Simple Square
	<span class="ciq-radio">
		<span></span>
	</span>
</cq-item>