Configuring Charts - Hover effects in Dial for Angular Gauge

Created using FusionCharts Suite XT - www.fusioncharts.com

by Moonmi Sonowal

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/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Using dial Hover effect for Angular gauge, using attributes: # showHoverEffect - set to 1 # dialBorderHoverColor - set to "#aa0000" # dialbgHoverColor - set to "#000000" # dialBorderHoverThickness - set to 1 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '400',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Electirc Use Goal",

                    "bgalpha": "0",
                    "bgcolor": "#0066FF,#0066FF,#33ccff,#66ffff,#00ff99,#66ff99,#66ff66,#00ff00,#ccff66,#ffff66,#ffff00,#ffcc00,#ff6600,#ff3300,#ff0000",
                    "gaugestartangle": "200",
                    "gaugeendangle": "-20",
                    "lowerlimit": "-200",
                    "upperlimit": "120",
                    "showborder": "0",
                    "showGaugeBorder": "1",
                    "basefontcolor": "000000",
                    "basefont": "Tahoma",
                    "lowerlimitdisplay": "Minimum",
                    "upperlimitdisplay": "Maximum",
                    "charttopmargin": "5",
                    "chartbottommargin": "5",
                    "chartleftmargin": "100",
                    "chartrightmargin": "5",
                    "tooltipbgcolor": "ffffff",
                    "gaugefillratio": "0",
                    "majortmnumber": "3",
                    "majortmthickness": "0",
                    "minortmnumber": "0",
                    "gaugeouterradius": "100",
                    "gaugeinnerradius": "1",
                    "showtickvalues": "0",
                    "tickvaluecolor": "000000",
                    "placevaluesinside": "0",
                    "showpivotborder": "1",
                    "gaugeFillMix": "#0066FF,#0066FF,#33ccff,#66ffff,#00ff99,#66ff99,#66ff66,#00ff00,#ccff66,#ffff66,#ffff00,#ffcc00,#ff6600,#ff3300,#ff0000",
                    "pivotborderthickness": "1",
                    "pivotbordercolor": "333333",
                    "pivotborderalpha": "100",
                    "pivotfilltype": "linear",
                   ...