5.2 Creating event markers

Event markers are created against specific date/times, and drawn at the bottom of the chart. They are automatically stacked if there is more than one marker for each bar.

(Event markers are intended for things such as calendar events, which apply to a bar as a whole. To draw a marker against both a date/time and also a specific price, use a barMarker drawing.)

An event marker can have the following properties:

Property	Description
date	Date for the event marker, as a number of milliseconds. Does not have to match the start time of a bar. Will be drawn against the bar containing the specified time.
icon	Hex code of a character from the Font Awesome character set, such as "f0ab"
priority	Priority of the event marker compared to other markers, on a numeric scale from 0 (lowest) to 2 (highest). Determines stacking order if there are multiple markers for a single bar
color	Color for the marker, as an HTML colour code such as "red" or "#FF0000" or "rgba(255,0,0,0.5)"
text	Text to display if the user clicks on the marker
noLine	Specifies that no line should be drawn across the chart for the marker
wantClick	Sends notifications when a marker is clicked on (and makes the text setting redundant)

You create markers by passing an individual marker definition, or an array of definitions, to UDI.createEventMarker(). If you are creating several markers at once, it is far more efficient to pass an array than to make multiple calls to UDI.createEventMarker(). For example:

UDI.createEventMarker([
	{date: data.barData.date[i], color: "red", icon: "f0ab", text: "My marker 1"},
	{date: data.barData.date[i], color: "green", icon: "f0aa", text: "My marker 2"}
]);

You can remove all your event markers from the chart using UDI.removeAllEventMarkers().

You can also remove individual markers (rather than removing everything and re-creating different ones). The UDI.createEventMarker() function can be given an optional callback function which receives, asynchronously, an array of the markers which have been created. For example:

UDI.createEventMarker([
	{date: data.barData.date[i], color: "red", icon: "f0ab", text: "My marker 1"},
	{date: data.barData.date[i], color: "green", icon: "f0aa", text: "My marker 2"}
], function (asyncResponse) {
	// The IDs of the two markers will be contained in asyncResponse.markerId[]
	UDI.storeMyUpMarker = asyncResponse.markerId[0];
	UDI.storeMyDownMarker = asyncResponse.markerId[0];
});

When you have obtained the IDs using the asynchronous callback, you can then remove an individual marker by passing its ID to UDI.removeEventMarker().