Angular gauge cosmetized

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.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>
<!-- Placing tick marks and values inside angular gauge Attributes: # placeTicksInside # placeValuesInside -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Customer Satisfaction Score",
                    "subcaption": "Last week",
                    "origw": "320",
                    "origh": "320",
                //Place tick marks and values inside gauge
                "placeTicksInside": "0",
                    "placeValuesInside": "1",
                    "theme": "fint",
                    "gaugeOuterRadius": "100",
                    "gaugeInnerRadius": "90%",
                    "gaugeStartAngle": "225",
                    "gaugeEndAngle": "-45",
                    "pivotRadius": "12",
                    "pivotFillColor": "#0040FF",
                    "pivotFillAlpha": "100",
                    "showValue": "1",
                    "showGaugeBorder": "0",
                    "valueBelowPivot": "1",
                    "majorTMNumber": "11",
                    "minorTMNumber": "8",
                    "numberSuffix": "%",
                    "bgcolor": "#FFFFFF"

            },

                "annotations": {
                "groups": [{
                    "x": "$chartCenterX",
                        "y": "$canvasEndY-40",
                        "showbelow": "0",
                        "scaletext": "1",
                        "items": [{
                        "type": "text",
                            "label": "Actions Overdue",
                            "fontcolor": "#5599CC",
                            "fontsize": "14",
                            "bold": "1"
                    }]
                }, {
                    "x": "$chartCenterX+4",
                        "y": "203",
                        "items": [{
                        "type": "arc",
                            "x": "0",
    ...