I have the following issue with highcharts SolidGauge. Please find some context - SolidGauge is to be displayed for each comment that I call from MySql. Each comment brings in to PHP variable [$myvalue] a proprietary value per comment ID - [$myvalue] called outside of the Chart code, in the same file, works perfectly fine and shows distributed values correctly for each comment.
Issue - [$myvalue] shows duplicate value for each chart displayed in the UI - mor exactly the last comment value which is [8] - so all the Charts are showing value [8]. Please help :) I've tried everything (from unset, destroy etc)
$(function () {
$(document).ready(function () {
// The speed gauge
$('.container-speed').each(function() {
var chart = new Highcharts.Chart({
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)',
renderTo: this
},
pane: {
center: ['50%', '50%'],
size: '65%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '80%',
shape: 'circle'
}
},
tooltip: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
},
title: null,
yAxis: {
min: 0,
max: 8,
stops: [
[0.99, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.2, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 100,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
credits: {
enabled: false
},
series: [{
data: [<?php echo $myvalue; ?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><?php echo $myvalue; ?></span></div>'
}}] }) })
})
});
you should iterate over values, while invoking
$('.container-speed').each(function() //pass value in this function
pass value in this function and then call it in datalabels.
$( document ).ready(function() { var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '55%',
startAngle: 0,
endAngle: 270,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
innerRadius: '90%',
outerRadius: '90%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[1.0, '#55BF3B'], // green
[1.1, '#DDDF0D'], // yellow
[1.3, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 45,
tickWidth: 1,
title: {
y: -70
},
labels: {
y: 90,
x: 30
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -15,
borderWidth: 0,
useHTML: true
}
}
}
};
// My Container
$('#container_myContainer_<? echo $comment->comment_ID ?>').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 8
},
credits: {
enabled: false
},
series: [{
data: [<? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?>],
dataLabels: {
format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?></span></div>'
}
}]
}))
})