FusionCharts - Gallery Example - Realtime Angular Gauge in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ashok Kumaresan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- 
    Sample for Realtime Angular Gauge.
    This sample is showing a speedometer and updates every second.

Note: Data is updated through feedData() method in setInterval.
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
     speedometerChart = new FusionCharts({
        type: 'angulargauge',
        id : "myGauge",
        renderAt: 'chart-container',
        width: '350',
        height: '350',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "manageresize": "1",
        "origw": "200",
        "origh": "190",
        "bgcolor": "FFFFFF",
        "lowerlimit": "0",
        "upperlimit": "55",
        "majortmnumber": "7",
        "showtickvalues": "0",
        "majortmheight": "8",
        "minortmnumber": "0",
        "showtooltip": "0",
        "majortmthickness": "3",
        "gaugeouterradius": "130",
        "gaugeoriginx": "100",
        "gaugeoriginy": "160",
        "gaugestartangle": "125",
        "gaugeendangle": "55",
        "placevaluesinside": "1",
        "gaugeinnerradius": "115",
        "annrenderdelay": "0",
        "pivotfillmix": "{000000},{FFFFFF}",
        "pivotfillratio": "50,50",
        "showpivotborder": "1",
        "pivotbordercolor": "444444",
        "pivotborderthickness": "2",
        "showshadow": "0",
        "pivotradius": "18",
        "pivotfilltype": "linear",
        "showborder": "0"
    },
    "dials": {
        "dial": [
            {
                "value": "30",
                "borderalpha": "0",
                "bgcolor": "FF0000",
                "basewidth": "6",
                "topwidth": "6",
                "radius": "120"
            }
        ]
    },
    "trendpoints": {
        "point": [
            {
                "startvalue": "0",
                "displayvalue": "E",
                "alpha": "0"
            },
            {
                "startvalue": "55",
                "displayvalue": "F",
                "alpha": "0"
            }
        ]
    },
    "annotations": {
        "groups": [
            {
                "x": "100",
                "y": "160",
                "items": [
                    {
                        "type": "arc",
       ...