FusionCharts - Basic Horizontal Linear Gauge Example

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>
<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>
<!-- A simple Horizontal Linear Gauge showing Server CPU Utilization  

    Deviation from theme
    # valueFontSize
    # valueFontBold
-->
<div id="chart-container">FusionCharts will render here</div>
<script>
function checkFunction(p_value){
alert("current Value is "+ p_value);
}
</script>

JavaScript

FusionCharts.ready(function () {
    var cpuGauge = new FusionCharts({
        type: 'hlineargauge',
        renderAt: 'chart-container',
        id: 'cpu-linear-gauge',
        width: '400',
        height: '190',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "captionPadding": "0",
        "numberSuffix": "%",
        "valueAbovePointer": "0",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "chartBottomMargin": "20",
        "editmode":"1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "toolText": "Customer satisfaction $value%",
                "link": "j-checkFunction",
                "value": "75"
            }
        ]
    }
},

        "events": {
            //Event is raised when a real-time gauge or chart completes updating data.
            //Where we can get the updated data and display the same.
            "realTimeUpdateComplete" : function (evt, arg){              
                    var percentValue = evt.sender.getData(1) * 100;
                    var gaugeValue=parseFloat(Math.round(percentValue) / 100).toFixed(2);
                    checkFunction(gaugeValue);

            }
        }
    })
    .render();
});