5.1 Creating drawings

You create drawings using UDI.createDrawing(). The parameter for this function is either a single drawing definition, or an array of definitions. For example:

UDI.createDrawing([
	{type: "horizontalLine", points: [{value: 1.2345}], style: {line: {color: "red"}}},
	{type: "horizontalLine", points: [{value: 1.3456}], style: {line: {color: "blue"}}}
]);

By default, the user can select a drawing and change its properties, but the user cannot move or delete the drawing. You can change this behaviour using the drawing's properties.

You can remove all your drawings from the chart using UDI.removeAllDrawings().

You can also remove individual drawings, or you can reposition a drawing without deleting and recreating it. In order to do this, you need to get the ID of the drawing. These are provided via an optional asynchronous callback function which you can pass to UDI.createDrawing(). For example:

UDI.createDrawing([
	{type: "horizontalLine", points: [{value: 1.2345}], style: {line: {color: "red"}}},
	{type: "horizontalLine", points: [{value: 1.3456}], style: {line: {color: "blue"}}}
], function (response) {
	// The ID of each drawing will be contained in the array response.drawingId[]
	UDI.myLine1 = response.drawingId[0];
	UDI.myLine2 = response.drawingId[1];
});

Once you have the ID of a drawing, you can delete it by passing the ID to UDI.removeDrawing().

A drawing can be moved by passing an object containing the ID and a new array of points to UDI.moveDrawing(). For example:

UDI.moveDrawing({
	drawingId: …,
	points[{date: data.barData.date[0]}, value: data.barData.high[0]}]
});

The properties of a drawing – text, colour etc – can be changed using UDI.changeDrawing(). You pass an object containing the ID and any properties you want to change. For example:

// Change drawing text and its colour
UDI.changeDrawing({
	drawingId: …,
	text: "New text",
	style: {text: {color: "red"}}
});

UDI.removeDrawing(), UDI.moveDrawing(), and UDI.changeDrawing() can be given an array as their parameter, rather than a single item.