Glass effect on LED using annotations

by Shamasis Bhattacharya

HTML

<script src="http://static.fusioncharts.com/code/xt/5416/FusionCharts.js"></script>
<center>
    <p>Using annotations with macros to give glass effect on LED gauges.<br />&nbsp;</p>
    <p id="gauge">Loading chart. Please wait...</p>
    <p><button onclick="FusionCharts.items.theLEDGauge.showAnnotation('glasser');this.style.display='none';">Glassify</button>
</center>

JavaScript

FusionCharts.render({
    id: "theLEDGauge",
    type: 'HLED',
    renderAt: 'gauge',
    width: '400',
    height: '120',
    dataFormat: 'JSON',
    dataSource: {
        "chart": {
            "lowerlimit": "0",
            "upperlimit": "120",
            "lowerlimitdisplay": "Low",
            "upperlimitdisplay": "High",
            "palette": "1",
            "numbersuffix": "dB",
            "chartrightmargin": "20",
            "origw": "400",
            "origh": "120",
            "gaugeBorderThickness": "4"
        },
        "colorrange": {
            "color": [
                {
                "minvalue": "0",
                "maxvalue": "60",
                "code": "FF0000"},
            {
                "minvalue": "60",
                "maxvalue": "90",
                "code": "FFFF00"},
            {
                "minvalue": "90",
                "maxvalue": "120",
                "code": "00FF00"}
            ]
        },
        "value": "102",
        "annotations": {
            "groups": [{
                "showbelow": "0",
                "visible": "0",
                "id": "glasser",
                "items": [{
                    "type": "rectangle",
                    "x": "$gaugestartx - 1",
                    "y": "$gaugestarty - 1",
                    "tox": "$gaugeendx + 1",
                    "toy": "$gaugeendy - 20",
                    "alpha": "30",
                    "color": "ffffff"}
                ]}
            ]
        }
    }
});