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',
id: "myGauge",
renderAt: 'chart-container',
width: '400',
height: '380',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Speedometer",
"captionFont": "Arial",
"captionFontColor": "#333333",
"manageresize": "1",
"origw": "320",
"origh": "320",
"tickvaluedistance": "-10",
"bgcolor": "#FFFFFF",
"upperlimit": "240",
"lowerlimit": "0",
"basefontcolor": "#FFFFFF",
"majortmnumber": "9",
"majortmcolor": "#FFFFFF",
"majortmheight": "8",
"majortmthickness": "5",
"minortmnumber": "5",
"minortmcolor": "#FFFFFF",
"minortmheight": "3",
"minortmthickness": "2",
"pivotradius": "10",
"pivotbgcolor": "#000000",
"pivotbordercolor": "#FFFFFF",
"pivotborderthickness": "2",
"tooltipbordercolor": "#FFFFFF",
"tooltipbgcolor": "#333333",
"gaugeouterradius": "115",
"gaugestartangle": "240",
"gaugeendangle": "-60",
"decimals": "0",
"placevaluesinside": "1",
"pivotfillmix": "",
"showpivotborder": "1",
"annrenderdelay": "0",
"gaugeoriginx": "160",
"gaugeoriginy": "160",
"showborder": "0"
},
"dials": {
"dial": [{
"value": "65",
"bgcolor": "000000",
"bordercolor": "#FFFFFF",
"borderalpha": "100",
"basewidth": "4",
"topwidth": "4",
"borderthickness": "2",
"valuey": "260"
}]
},
"annotations": {
"groups": [{
"x": "160",
"y": "160",
"items": [{
"type": "circle",
"radius": "130",
"fillasgradient": "1",
"fillcolor": "#4B4B4B,#AAAAAA",
...