246748 custom legend for 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/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample highlights the use of events that can be trapped by developers to their advantage and take necessary actions on the chart or affect/update the chart environment -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container',
        width: '450',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Customer Satisfaction Score",
                    "subcaption": "Last week",
                //Place tick marks and values inside gauge
                "placeTicksInside": "1",
                    "placeValuesInside": "1",
                "chartBottomMargin":"50",
                    "theme": "fint"
            },
                "annotations": {

                "autoScale": "1",
                    "groups": [{

                    "items": [{
                        "id": "rectangle1",
                            "type": "rectangle",
                            "radius": "2",
                            "alpha": "40",
                            "fillColor": "#E44A00",
                            "x": "110",
                            "y": "375",
                            "tox": "150",
                            "toy": "395"
                    }, {
                        "id": "Text1",
                            "type": "text",
                            "text": "Section A",
                            "x": "200",
                            "y": "385"
                    }, {
                        "id": "rectangle2",
                            "type": "rectangle",
                            "radius": "2",
                            "alpha": "40",
                            "fillColor": "#F8BD19",
                            "x": "290",
                            "y": "375",
                            "tox": "330",
                            "toy": "395"
                    }, {
                        "id": "Text2",
                            "type": "text",
                            "text": "Section B",
                            "x": "380",
            ...