Working area of clickURL attribute in Bulb Gauge.

501014

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.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>
<!-- 
    Sample for Bulb Gauge. 

-->
<div id="chart-container">FusionCharts will render here</div>

CSS

#headerdiv {
    font-family:"Arial", "Helvetica";
    font-size: 13px;
    font-weight: bold;
}
#valueDiv {
    color: #EEEEEE;
    text-align:center;
    font-size: 25px;
    padding: 10px;
    margin-top:5px;
    font-family:"Arial", "Helvetica";
    font-weight: bold;
}

JavaScript

FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        type: 'bulb',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '300',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Temperature status of deep freezers",
                "upperlimit": "-5",
                "lowerlimit": "-60",
                "captionPadding":"30",
                "showshadow":"0",
                "showvalue": "1",
                "useColorNameAsValue":"1",
                "placeValuesInside":"1",
                "valueFontSize": "16",
                //Tooltext
                "plottooltext": "<span id='headerdiv'>Current Temperature:</span>{br}<div id='valueDiv'>$value°C</div>",
                //Theme
                "theme" : "fint",
                "clickURL":"http://docs.fusioncharts.com/tutorial-attr-bulb.html"
                
                
            },
            "colorrange": {
                "color": [
                    {
                        "minvalue": "-60",
                        "maxvalue": "-35",
                        "label": "Mission control, <br> we have a situation!",
                        "code": "#ff0000"
                    }, 
                    {
                        "minvalue": "-35",
                        "maxvalue": "-25",
                        "label": "Something is just  not right!",
                        "code": "#ff9900"
                    }, 
                    {
                        "minvalue": "-25",
                        "maxvalue": "-5",
                        "label": "All well ahoy!",
                        "code": "#00ff00"
                    }
                ]
            },
            "value": "-5"
        },
        "events":{
            "rendered": function(evtObj, argObj){
                setInterval(function () {
                    var num = (Math.floor(Math.random() * 55)*-1)...