Labels

An InteractiveDataDisplay plot which dispays text labels.

API

HTML

<script type="text/javascript">
    $(document).ready(function () {
        var chart = InteractiveDataDisplay.asPlot($("#chart"));
    });
</script>

<div id="chart" data-idd-plot="chart" style="width: 800px; height: 600px;">    
</div>

JavaScript

In JavaScript, use InteractiveDataDisplay.Plot.labels(name, data) or InteractiveDataDisplay.LabelPlot.draw(data).

The Plot.labels function returns LabelPlot which allows to update values using LabelPlot.draw function.

The following example adds "LabelPlot" with three labels to the chart.

var chart = InteractiveDataDisplay.asPlot($("#chart"));
var labels = chart.labels("labels", [
        { text: "label1", position: {x: 0, y: 0}}, 
        { text: "label2", position: {x: 1.5, y: -1}, placement: 'center'},
        { text: "label3", position: {x: 3, y: 0}, placement: 'bottom'}
]);

LabelPlot contains the method LabelPlot.getData(), which returns an array of labels in LabelPlot. To update labels in LabelPlot use LabelPlot.draw function.

The following example adds a new label to LabelPlot.

var chart = InteractiveDataDisplay.asPlot($("#chart"));
var labels = chart.labels("labels", [
        { text: "label1", position: {x: 0, y: 0}}, 
        { text: "label2", position: {x: 1.5, y: -1}, placement: 'center'}
]);
//add new label
var data = labels.getData();
data.push({text: "label4", position: {x: 5, y: 6}});
labels.draw(data);

Properties

Mandatory properties:

• text contains the text of the label.
• position is a structure containing two fields: x and y. x and y are numbers.

Optional properties:

• placement is either 'center', 'top', 'bottom', 'left', 'right'; default value is 'center'.