FusionCharts - Configuring background color of charts in JavaScript

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>
<!-- Configuring background color in Column2D chart using: Attribute: # bgColor - Set to #DDDDDD # bgAlpha - Set to 50 Deviation from theme: # canvasBgAlpha - Set to 0 as the purpose of the chart to show background cosmetics. -->
<div id="chart-container">FusionCharts will render here</div>

CSS

body {
    padding: 10px;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'HLinearGauge',
        renderAt: 'chart-container',
        width: '500',
        height: '150',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Server CPU Utilization",
                    "subcaption": "food.hsm.com",
                    "captionFontColor": "#000000",
                    "subcaptionFontBold": "0",
                    "bgColor": "#ffffff",
                    "showBorder": "0",
                    "lowerLimit": "0",
                    "upperLimit": "100",
                    "numberSuffix": "%",
                "valueAbovePointer" :"1",
                   
                    "showShadow": "0",
                    "gaugeFillMix": "{light}",
                    "valueBgColor": "#ffffff",
                    "valueBgAlpha": "60",
                    "valueFontColor": "#000000",
                    "pointerBgColor": "#ffffff",
                    "pointerBgAlpha": "50",
                    "baseFontColor": "#ffffff"
            },
                "colorRange": {
                "color": [{
                    "minValue": "0",
                        "maxValue": "35",
                        "label": "Low",
                        "code": "#1aaf5d"
                }, {
                    "minValue": "35",
                        "maxValue": "70",
                        "label": "Moderate",
                        "code": "#f2c500"
                }, {
                    "minValue": "70",
                        "maxValue": "100",
                        "label": "High",
                        "code": "#c02d00"
                }]
            },
                "pointers": {
                "pointer": [{
                    "value": "72.5",
                    "displayValue":"abc"
                }]
            }
        }
    });

    revenueChart.render();
});