Using Annotation Events
Prerequisites:
FusionCharts Suite XT lets you capture events for the annotations rendered on your charts and perform a corresponding action. Events let you tap user interactions with annotations such as clicking an annotation, hovering over an annotation and so on.
FusionCharts Suite XT includes the following annotation events:
-
annotationRollOver -
annotationRollOut -
annotationClick
This article describes the annotation events.
A spline chart configured to demonstrate the annotationRollOver and annotationRollOut events is shown below:
In the above chart, a rectangle annotation is used to mark weekends.
Every time you hover the mouse pointer over the annotation group, the transparency of the rectangle annotation item changes. Also, a text annotation showing the footfall data for Saturday and Sunday is rendered.
Every time you hover the mouse pointer out of the annotation group, the transparency of the rectangle annotation item is reverted to its original value and the text annotation value is updated to display Weekend.
A brief description of the annotation events is as follows:
| Event Name | Description |
|---|---|
|
It is triggered every time the mouse pointer is hovered over an annotation. For touch devices, the event is triggered when you tap an annotation after previously tapping anywhere on the chart, outside the annotation. |
|
It is triggered every time the mouse pointer hovers out of an annotation, after hovering over it. For touch devices, the event is triggered when you tap anywhere on the chart, outside the annotation, after previously tapping the annotation. |
|
It is triggered every time an annotation is clicked. |
Attributes passed under the argObj parameter of these events are as follows:
-
chartX -
chartY -
pageX -
pageY -
annotationId -
annotationOptions -
groupId -
groupOptions
For more information on these parameters, click here.
The complete data structure for the spline chart with annotation events is given below:
{
"chart": {
"caption": "Total footfall in Bakersfield Central",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"paletteColors": "#008ee4",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"plotBorderAlpha": "10",
"captionpadding": "20",
"showXAxisLines": "1",
"axisLineAlpha": "25",
"divLineAlpha": "10",
"showValues": "0",
"showAlternateHGridColor": "0"
},
"annotations": {
"origw": "400",
"origh": "300",
"autoscale": "1",
"groups": [
{
"items": [
{
"id": "zone",
"type": "rectangle",
"x": "$xaxis.label.6.x",
"y": "$canvasEndY",
"tox": "$xaxis.label.7.x",
"toy": "$canvasStartY",
"color": "#6baa01",
"alpha": "20"
},
{
"id": "label",
"type": "text",
"text": "Weekend",
"fillcolor": "#666666",
"fontSize": "10",
"bold": "1",
"x": "$xaxis.label.7.x - 25",
"y": "$canvasEndY - 35"
}
]
}
]
},
"data": [
{
"label": "Mon",
"value": "15123"
},
{
"label": "Tue",
"value": "14233"
},
{
"label": "Wed",
"value": "25507"
},
{
"vline": "true",
"lineposition": "0",
"color": "#6baa01",
"labelHAlign": "left",
"label": "National holiday"
},
{
"label": "Thu",
"value": "9110"
},
{
"label": "Fri",
"value": "15529"
},
{
"label": "Sat",
"value": "20803"
},
{
"label": "Sun",
"value": "19202"
}
]
}