FusionCharts - Angular Gauge Configuring Lower & Upper Limit Display

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>
<!-- Showcase of Customer Satisfaction Score for current week using Angular Gauge. Configuring the Lower and Upper limit as specific texts. Attributes: #. lowerLimitDisplay - set to Bad #. upperLimitDisplay - set to Good -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        "type": "angulargauge",
            "renderAt": "chart-container",
            "width": '100%',
            "height": '195',
            "dataFormat": "json",
            "dataSource": {
            "chart": {
                "id": 'myChartId',
                    "exportEnabled": "0",
                    "manageResize": "1",
                    "bgColor": "#ffffff",
                    "bgAlpha": "0",
                    "outCnvbaseFontSize": "18",
                    "outCnvbaseFontColor": "074A09",
                    "upperLimit": "130",
                    "lowerLimit": "0",
                    "showLimits": "0",
                    "lowerLimitDisplay": "",
                    "upperLimitDisplay": "",
                    "gaugeStartAngle": "180",
                    "gaugeEndAngle": "0",
                    "bgImageAlpha": "55",
                    "bgImageDisplayMode": "fit",
                    "gaugeFillMix": "{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}",
                    "gaugefillpattern": "linear",
                    "gaugeBorderColor": "{dark-30}",
                    "gaugeOuterRadius": "75",
                    "gaugeInnerRadius": "50",
                    "pivotRadius": "10",
                    "showValue": "0",
                    "tickValueStep": "5",
                    "placeValuesInside": "1",
                    "borderAlpha": "0",
                    "canvasBorderAlpha": "0"
            },
                "colorRange": {
                "color": [{
                    "minValue": "0",
                        "maxValue": "15",
                        "code": "#96C900"
                }, {
                    "minValue": "15",
                        "maxValue": "65",
                        "code": "#FFFB14"
                }, {
                    "minValue": "65",
                        "maxValue": "130",
                       ...