FusionCharts - Annotation RollOver / RollOut / Click events.

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- 
    Annotation RollOver / RollOut / Click events.
    
    Deviation from theme:
    # showValues - Set to 0. As you can see the value on annotations by hovering the plots will be a repeation. So this is avoided.
    # showTooltip - Set to 0. As Annotation will show the value here instead of tooltip.
    # showHoverEffect - Set to 0. As no hover effect for anchors required in this sample.

-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    //Flag to keep track of whether the event on annotation is roll-over or click
    var roFlag = false,
        visitChart = new FusionCharts({
            id: "mychart",
            type: 'msspline',
            renderAt: 'chart-container',
            width: '550',
            height: '400',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Total visitors : Bakersfield Central vs Los Angeles Topanga",
                    "subCaption": "Last Week ( RollOver/ Click on red circle to view details)",
                    "xAxisName": "Day",
                    "yAxisName": "No. of Visitors (In 1000s)",
                    "showValues": "0",
                    "showTooltip": "0",
                    "showHoverEffect":"0",
                    "theme": "fint"
                    
                },
                
                "categories": [
                    {
                        "category": [
                            { "label": "Mon" }, 
                            { "label": "Tue" }, 
                            { "label": "Wed" }, 
                            { 
                                "vline": "true",
                                "lineposition": "0",
                                "color": "#6baa01",
                                "labelHAlign": "right",
                                "labelPosition": "0",
                                "label": "National holiday"
                            },
                            { "label": "Thu" }, 
                            { "label": "Fri" }, 
                            { "label": "Sat" }, 
                            { "label": "Sun" }
                        ]
                    }
                ],
                "annotations": {
                    "origw": "550",
                    "origh": "400",
                    "autoscale": "1",
                    "groups": [
             ...