FusionCharts - Dynamic tool-tips using macros in bulb gauge

500100

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>
<!-- 
    Tool-tip macro in a bulb gauge. Macros can be used to add dynamic values (e.g., label, value, display value, percent value in pie) to the tool-text.

Attribute: 
http://jsfiddle.net/qymvwexn/#fork    # plotToolText - String for the toil-text. It can contain text, HTML and embedded tool-tip macros.

  Macros used: 
    # $value - Gets the current value in bulb gauge

Deviation from theme:
        # placeValuesInside - Set to 1
        # valueFontSize - Set to 16

-->
<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": {
"clickURL": "javascript:alert('abc')",                
                "caption": "Temperature status of deep freezers",
                "upperlimit": "-5",
                "lowerlimit": "-60",
                "captionPadding":"30",
                "showshadow":"0",
                "showvalue": "1",
                "useColorNameAsValue":"1",
                "placeValuesInside":"0",
                "valueFontSize": "16",
                //Tool-text with HTML and $value macro
                "plottooltext": "<span id='headerdiv'>Current Temperature:</span>{br}<div id='valueDiv'>$value°C</div>",
                //Theme
                "theme" : "fint"
            },
            "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){
                //Funcation to change value of the the bulb-gauge in real-timd
                setInterval(function () {
                   ...