How to refresh pane background when update date on gauge highcharts? - highcharts

Question

I have a problem when I update the gauge chart.
I add some life from my chart using this code:
$(function () {
$.getJSON('my.php', function(data) {
$('.container').highcharts({
chart: {
type: 'gauge',
borderWidth: 0,
width: 170,
height: 200,
marginTop: 0,
},
title: {
text: 'title',align: 'center',x: 0,y: 8,floating: true
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [
{
backgroundColor: {linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },stops: [[0, '#FFF'],[1, '#333']]},borderWidth: 0,outerRadius: '109%'
},
{
backgroundColor: {linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },stops: [[0, '#333'],[1, '#FFF']]},borderWidth: 1,outerRadius: '107%'
},
{
backgroundColor: mybackgroundColor(data,100,120),
},
{
backgroundColor: '#DDD',borderWidth: 0,outerRadius: '105%',innerRadius: '103%'
}
]
}],
yAxis: {
min: 0,
max: 250,
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text:'km/h',
y : 85
},
plotBands: [
{
from: 0,
to: 100,
color: '#DDDF0D' /*yellow*/
},
{
from: 100,
to: 120,
color: '#55BF3B' /*green*/
},
{
from: 120,
to: 250,
color: '#DDDF0D' /*yellow*/
},
{
from: 30,
to: 35,
color: '#DF5353' /*red*/
}
]
},
series: [
{
name: 'speed',
data: data,
dataLabels: {
enabled: true,
style: {
fontWeight:'bold',
fontSize: '12px'
}
}
}
]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
chart.series[0].color = "#000";
var point = chart.series[0].points[0];
$.getJSON('mydata.php', function(data) {
point.update(data);
});
}, 3000);
};
});
});
});
my function mybackgroundColor(data,100,120) define the pane backgroundColor, it depends the value of data.
When I update point ussing this part of code:
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
chart.series[0].color = "#000";
var point = chart.series[0].points[0];
$.getJSON('mydata.php', function(data) {
point.update(data);
});
}, 3000);
};
});
The wild was updated, but the background didn't.
I try to do this, but it doesn't work:
this.chart.plotBackground.attr({
fill: '#fff'
})
;
Does anybody has an idea?

Answer 1

It's pane background, not a plotBackground. Anyway, in the fact pane background is stored as one of plotBands. So simple you can update it's color:
chart.yAxis[0].plotLinesAndBands[2].svgElem.attr({
fill: 'green'
});
It's [2], because I want to update red plotBand which is third element from background options in a pane.
And some demo: http://jsfiddle.net/Yrygy/190/