Hi, Will this also work with a HighStock solid gauge?
I am performing the following code, getData will generate a value, but it does not get updated onto the gauge like shown in the example. Do we need to do something different as this is gauge not chart?
Code: Select all
air_main_gauge() {
const getData = (min, max, count) => {
var x=Math.floor(Math.random() * 100) + 1;
console.log("updated Value for gauge-->"+x);
return x;
}
let data = getData(1, 100, 1000);
this.chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'transparent',
events: {
load: function() {
const chart = this;
setInterval(function() {
chart.series[0].setData(getData(1, 100, 1000));
}, 1000);
}
}
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '90%',
outerRadius: '100%',
shape: 'arc',
borderWidth: 0
}
},
lineWidth: 1,
tooltip: {
enabled: false,
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: { enabled: false },
yAxis: {
labels: {
enabled: false,
},
stops: [
[0.0, '#0c8eca'], // blue
[0.33, '#0c8eca'], // blue
[0.34, '#eeb333'], // yellow
[0.66, '#eeb333'], // yellow
[0.67, '#f0250a'] // red
],
min: 0,
max: 100,
lineWidth: 0,
tickPositions: [100 / 3, 2 / 3 * 100],
minorTickWidth: 0,
zIndex: 10,
tickColor: '#deeeee',
tickWidth: 10,
tickLength: 30,
offset: 20,
},
plotOptions: {
solidgauge: {
innerRadius: '90%',
dataLabels: {
enabled: false
},
rounded: true
},
},
series: [{
//data: [this.gauge1_value1],
data: data,
tooltip: {
enabled: false
},
},
],
});
}