AngularGauge - Setting Custom Angle & Origin
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.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": " at akme.com",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"tickValueDistance": "15",
"theme": "fusion"
},
"colorRange": { // color range to
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "##6baa01 "
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "e44a00"
}]
},
"dials": {
"dial": [{
"id": "crntYr",
"value": "50",
"showValue": "1",
"tooltext": "Current utilization : $value",
"rearExtension": "15"
}]
},
"alerts": {
"alert": [{
// alert range
"minvalue": "70",
"maxvalue": "100",
// call JavaScript function
"action": "callJS",
"param": "showAlert('Current server CPU Utilization is high');"
}]
}
},
events: {
"beforeRender": function(evtObj, argObj) {
var showAlert,
divElement = document.createElement('div');
divElement.setAttribute('id', 'alertDiv');
argObj.container.parentNode.insertBefore(divElement, argObj.container.nextSibling);
},
"rendered": function(evtObj, argObj) {
evtObj.sender.chartInterval = setInterval(function() {
var angGauge = evtObj.sender,
dispCon = document.getElementById("alertDiv");
//Hiding the table
dispCon.style.cssText = "display:none";
prcnt = 0 +...