ChartDirector 6.0 (Ruby Edition)

JsChartViewer.showClickableTextBox


Usage

showClickableTextBox(id, x, y, align, text [, boxStyle ])

Description

Draws a clickable textbox on the chart.

The text box drawn using JsChartViewer.showTextBox is not designed not to respond to mouse or touch events. This is to avoid the text box from interfering with the chart usage of the mouse. For example, programming track cursors rely on mouse move events on the chart. The programming track cursor may draw text boxes on the chart. If the mouse happens to move over these text boxes, and the text boxes handle the mouse events, the chart may not receive the mouse events. This will interfere with the programmable track cursor.

However, in some usage, it may be desirable to have text boxes that can respond to mouse or touch events. For example, a legend text box may contain links so that the user can click on those links to get more details. This showClickableTextBox method can be used to create such a text box.

The textbox will be drawn as an HTML element overlaid on top of the chart, with the specified HTML id attribute. The id argument should therefore comply to the HTML standard (eg. begins with A-Z or a-z, followed by letters from A-Z, a-z, 0-9, '-' and '_').

If the id is already used by an existing HTML element, JsChartViewer will assume the element is created earlier by showClickableTextBox, and will reuse the same element instead of creating a new one.

The textbox can be hidden using JsChartViewer.hideObj.

Arguments

ArgumentDefaultDescription
id(Mandatory)The id of the HTML element representing the textbox.
x(Mandatory)The x pixel coordinate of the reference point of the textbox, relative to the chart.
y(Mandatory)The y pixel coordinate of the reference point of the textbox, relative to the chart.
align(Mandatory)The alignment of the textbox relative to the reference point. It must be one of JsChartViewer.TopLeft, JsChartViewer.TopCenter, JsChartViewer.TopRight, JsChartViewer.Left, JsChartViewer.Center, JsChartViewer.Right, JsChartViewer.BottomLeft, JsChartViewer.BottomCenter or JsChartViewer.BottomRight. It specifies the point of the textbox that should be the reference point. For example, if TopLeft is used, it means the textbox should be positioned such that the top-left of the text box is at the reference point.
text(Mandatory)The text to be displayed.
boxStyle""The box style in the same format used in the HTML "style" attribute. An example is "border:solid 1px black;background:#ffffcc;padding:3px;font:bold 11px Arial;".

Return Value

A DOM element representing the textbox.