Angular Gauge - Real time update event
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var cSatScoreChart = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Server CPU Utilization",
"subcaption": "forum.hsm.com",
"lowerLimit": "-60",
"upperLimit": "60",
"editMode": "1",
"showValue": "1",
"valueBelowPivot": "1",
"tickValueDistance": "25",
"gaugeFillMix": "{dark-30},{light-60},{dark-10}",
"gaugeFillRatio": "15",
"theme": "fint",
"valueFontSize": "14"
},
"colorRange": {
"color": [{
"minValue": "-60",
"maxValue": "0",
"code": "#6baa01"
},
{
"minValue": "0",
"maxValue": "30",
"code": "#f8bd19"
},
{
"minValue": "30",
"maxValue": "60",
"code": "#e44a00"
}
]
},
"dials": {
"dial": [{
"id": "crntYr",
"value": "28",
"showValue": "1",
"tooltext": "Current year's average : $value",
"rearExtension": "5"
}]
}
},
events: {
"rendered": function(evtObj, argObj) {
var intervalVar = setInterval(function() {
var chartIns = evtObj.sender,
prcnt = 15 + parseInt(Math.floor(Math.random() * 10), 10);
chartIns.feedData("value=" + prcnt);
}, 3000);
},
"realtimeUpdateComplete": function(evtObj, argObj) {
var updtObj = argObj && argObj.updateObject,
values = updtObj && updtObj.values,
updtValStr = values && values[0],
updtVal = updtValStr &&
parseFloat(updtValStr).toFixed(0);
}
}
}).render();
});