Busturdust Busturdust - 4 months ago 199
CSS Question

Highcharts - Solid Gauge - Inconsistent Styling and Improper Values

I have a website which makes use of HighCharts Solid Gauge .

There are two rows of gauges.

The first row of gauges is built as follows.

var workgroups =['WG01','WG02','WG04',
'WG05','WG06','All'];

$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',

pane: {
// Positioning
center: ['50%', '60%'],
// img size
size: '100%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},

tooltip: {
enabled: false
},

// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels: {
style:{
color: "#000000",
fontSize: "13px"
},
// Bottom Label Offset
y: 15,
distance: -10,
}
},

plotOptions: {
solidgauge: {
dataLabels: {
style:{
color: "000000",
fontSize: "15px"
},
borderWidth: 0,
useHTML: true
}
}
}
};
// The gauges

for( i in workgroups){
if(workgroups[i] == 'All'){
header = "All";
gaugeOptions.yAxis['stops'] = [[.5, '#000000']]
}else{
header = "WG" + workgroups[i].slice(-2);
}
$('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {

yAxis: {
min: 0,
max: 100,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: workgroups[i],
data: [0],
dataLabels: {
y: 40,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">clients</span></div>'
},
}]
}));
}
}
);


and results in the following image.

enter image description here

This is fine, proper values, all styles fit where they are supposed to.

After doing these gauges, we then do a second row of gauges.
The (Current) Configuration for these gauges are:

var application_array = new Array(3);
application_array['Sapphire'] = 50;
application_array['Magic Bullet'] = 35;
application_array['Boris'] = 30;

$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',

pane: {
// Positioning
center: ['50%', '85%'],
// img size
size: '150%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},

tooltip: {
enabled: false
},

// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels:{
y:13
}

},


};
// Build the gauges here
var license_gauges = document.getElementsByClassName('gaugeCell2');
var myLength = license_gauges.length;
for (i=0; i <myLength; i++){

var header = license_gauges[i].id;
var selector = "[id='"+header+"']";
if (header == 'Boris'){
var max_value = 30;
}else if (header == 'Magic Bullet'){
var max_value = 35;
}else if (header == 'Sapphire'){
var max_value = 50;
}
console.log(header)
$(selector).highcharts(Highcharts.merge(gaugeOptions, {


yAxis: {
min: 0,
max: max_value,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: header,
data: [0],

}]
}));
}

});


Which Produces the following BAD Gauges
enter image description here

My Question

1) In the second row of gauges, Why is it printing 25 as
max
for the 2nd and 3rd gauge?
- I have tried an associate array to hold the proper value, same issue occurs


  • I have tried a function which returns a static value, same issue occurs

  • I have tried logic in the gauge creation itself, same issue occurs

  • I have tried writing a static value as max, and all gauges get the proper value



2) In the second row of gauges, why is it that the
max
Value, for the second and third gauges is inconsistently formatted with the first gauge?


  • I have tried virtually every layout configuration I can think of, but yet it stays the same issue.

  • When Using a static max value, this issue does not occur.
    enter image description here

  • Do I need to make an individual gaugeoption for each gauge since they have different max values? I would like to use 1 gauge style for the top row and 1 gauge style for the bottom row (fatter).



A JSFiddle has been created here. There is most likely extraneous code (especially css), as I wanted to get it up and running quickly.

http://jsfiddle.net/v341z7tk/1/

Thanks for reading

Answer

Why is it printing 25 as max for the 2nd and 3rd gauge?

It isn't. That is, the max isn't 25, but the drawn axis label shows the value 25, as there is an axis tick at this value. The max value is not showing with a label.

why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?

The position is inconsistent because the 25 label is in varying positions depending on what the max value is. In your case it is 35 and 30 for the last two gauges.

Do I need to make an individual gaugeoption for each gauge since they have different max values?

No. From my understanding you want a label at the start (0) and end (max_value). To get this you need to ensure that the axis ticks (which have associated labels) are at these positions, and only these.

A simple way is this (JSFiddle):

yAxis: {
    min: 0,
    max: max_value,
    tickPositions: [0, max_value], // Ensure position of ticks, which have labels
    // ...
}
Comments