FusionCharts -Handling Events Using jQuery

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>
<script src="http://static.fusioncharts.com/code/develop/fusioncharts.jqueryplugin.js"></script>
<!-- Showcase FusionCharts event handling with jQuery Library

Event: 

# fusionchartsdataplotclick - Triggers dataplotclick event when a data plot has been clicked. We need to prefix the listed event names with "fusioncharts". This is done to avoid conflict with the pre-existing jQuery event types having same names. In here we actually use dataplotclick event.

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

JavaScript

FusionCharts.ready(function () {
    $('#chart-container').insertFusionCharts({
        type: 'hlineargauge',
        width: '600',
        height: '200',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Customer satisfaction score",
                "subcaption": "Current week - Garden Groove Harbour",                               
                "theme": "fint",
                "showValue": "0",                
                //Attributes to customize pointer on hover.
                "pointerBgHoverColor": "#ffffff",
                "pointerBgHoverAlpha": "80",
                "pointerHoverRadius": "12",
                "showBorderOnHover": "1",
                "pointerBorderHoverColor": "#333333",
                "pointerBorderHoverThickness": "2"
            },
            "colorRange": {
                "color": [{
                    "minValue": "0",
                        "maxValue": "3.5",
                        "label": "Low",
                        "code": "#e44a00"
                }, {
                    "minValue": "3.5",
                        "maxValue": "",
                        "label": "Moderate",
                        "code": "#f8bd19"
                }, {
                    "minValue": "7",
                        "maxValue": "10",
                        "label": "High",
                        "code": "#6baa01"
                }]
            },
            "pointers": {
                "pointer": [{
                    "value": "7.25"
                }]
            }
        }
    });
    
});