$(function () {
$('#container-att').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Attenuation'
},
pane: {
startAngle: -90,
endAngle: 90,
background: [{
borderWidth: 0,
backgroundColor: 'transparent'
}]
},
exporting: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
lineColor: 'transparent',
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: null,
},
plotBands: [{
from: 0,
to: [+beerData.att],
color: '#55BF3B',
innerRadius: '90%',
outerRadius: '105%'
},
{
from: [+beerData.att],
to: 100,
color: '#DF5353',
innerRadius: '90%',
outerRadius: '105%'
}]
},
plotOptions: {
gauge: {
dataLabels: {
borderColor: 'transparent'
},
dial: {
radius: '75%',
backgroundColor: '#666666',
borderWidth: 0,
baseWidth: 7,
topWidth: 1,
baseLength: '90%', // of radius
rearLength: '0%'
},
pivot: {
backgroundColor: '#666666',
radius: 3
}
}
},
series: [{
name: 'Attenuering',
data: [+beerData.att],
enableMouseTracking: false,
tooltip: {
valueSuffix: ' %'
},
dataLabels: {
enabled: true,
format: '{point.y:,.00f}'+'%',
style: {
fontWeight:'normal',
fontSize: '18px'
}
}
}]
});
});