FusionCharts Suite XT allows you to create individual floating text labels on the chart. This helps in defining a strict text content that can be shown and dragged anywhere on the chart. As of now, you can only add or delete a label, but you cannot edit a label.

In this section, you will be shown how you can:

• Add a text label at run-time

• Delete a text label at run-time

To understand this, the sample chart that we will use looks like this:

The above chart shows the US Subway Map and uses drag-able nodes to mark locations on the map.

The data structure needed to render the above chart is given below:

• JSON
• XML

Adding a Text Label at Run-time

To add a new text label:

1. From the bottom-left corner of the chart, click the button. A menu is rendered.

2. From the menu, select the Add a Label option.

   

   The label properties dialog box, as seen in the image below, is shown:

1. In the label properties dialog, enter the label information.

2. Click Submit.

Given below is a brief description of the fields in this dialog box:

The image below shows the fields of the dialog box populated for a new label:

Now, when the Submit button is clicked, the new label created looks like this:

You can drag the label to any position on the chart.

You can define labels in chart data too. Each label is defined in the data of the chart through the object as the labels array element.

Event Raised

When a new label is created, a Javascript event, named labelAdded, is raised. You can trap and use this event to customize the output according to your requirements.

The code snippet required to trap this event is given below:

chartInstance.addEventListener(labeladded, function(e, a) {
    //Your code here
});

Deleting a Text Label at Run-time

To delete a text label:

1. Press and hold the left mouse button on the label that you want to delete. A dialog box appears asking you to confirm the deletion.

1. From the dialog box, click Delete. The label is deleted.

Event Raised

When a label is deleted, a Javascript event, named labelDeleted, is raised. You can trap and use this event to customize the output according to your requirements.

The code snippet required to trap this event is given below:

chartInstance.addEventListener('labeldeleted', function(e, a) {
    //Your code here
});

You can get the latest updated node and connector positions using JavaScript or by submitting the updated positions to a server-side script.

There! You have now seen how you can add and delete labels at run-time.