PDA

View Full Version : [OPEN] [4.0.6] Gauge Chart does not respect minimum for labeling axis - override provided



fschaeffer
29 Sep 2011, 5:14 AM
REQUIRED INFORMATIONExt version tested:

Ext 4.0 rev 6
Browser versions tested against:

Chrome
IE8
FF6
Safari 4
Description:

If a gauge chart axis is configured to have a minimum and a maximum value the minimum value is taken into account when drawing the chart, but the labels of the axis remain in a range from 0 to maximum
28405

Steps to reproduce the problem:

setting minimum to 90, maximum to 100 the gauge will be drawn correctly when using a value of 96.5, the axes labels range from 0 to 100.
The result that was expected:

labels only ranging from 90 to 100
The result that occurs instead:

labels from 0 to 100
Test Case:


var store = Ext.create('Ext.data.JsonStore', {
fields: ['FAKTURIERT'],
data: [
{ 'FAKTURIERT': 96.5 }
]
});


Ext.create('Ext.Window', {
width: 800,
height: 250,
minWidth: 650,
minHeight: 225,
title: 'Gauge Charts',
layout: 'fit',
items: [{
xtype: 'chart',
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: store,
insetPadding: 25,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 90, maximum: 100,
steps: 10,
margin: -5
}],
series: [{
type: 'gauge',
field: 'FAKTURIERT',
donut: false,
colorSet: ['#F49D10', '#ddd']
}]
}]
}).show();


HELPFUL INFORMATION
Debugging already done:

provided an ovverride which will fix this issue
Possible fix:

Ext.chart.axis.Gauge.override({
drawLabel: function() {
var chart = this.chart,
surface = chart.surface,
bbox = chart.chartBBox,
centerX = bbox.x + (bbox.width / 2),
centerY = bbox.y + bbox.height,
margin = this.margin || 10,
rho = Math.min(bbox.width, 2 * bbox.height) /2 + 2 * margin,
round = Math.round,
labelArray = [], label,
maxValue = this.maximum || 0,
minValue = this.minimum || 0,
steps = this.steps, i = 0,
adjY,
pi = Math.PI,
cos = Math.cos,
sin = Math.sin,
labelConf = this.label,
renderer = labelConf.renderer || function(v) { return v; };


if (!this.labelArray) {
//draw scale
for (i = 0; i <= steps; i++) {
// TODO Adjust for height of text / 2 instead
adjY = (i === 0 || i === steps) ? 7 : 0;
label = surface.add({
type: 'text',
text: renderer(round(i / steps * (maxValue - minValue)) + minValue),
x: centerX + rho * cos(i / steps * pi - pi),
y: centerY + rho * sin(i / steps * pi - pi) - adjY,
'text-anchor': 'middle',
'stroke-width': 0.2,
zIndex: 10,
stroke: '#333'
});
label.setAttributes({
hidden: false
}, true);
labelArray.push(label);
}
}
else {
labelArray = this.labelArray;
//draw values
for (i = 0; i <= steps; i++) {
// TODO Adjust for height of text / 2 instead
adjY = (i === 0 || i === steps) ? 7 : 0;
labelArray[i].setAttributes({
text: renderer(round(i / steps * (maxValue - minValue)) + minValue),
x: centerX + rho * cos(i / steps * pi - pi),
y: centerY + rho * sin(i / steps * pi - pi) - adjY
}, true);
}
}
this.labelArray = labelArray;
}
});
28404
Additional CSS used:

only default ext-all.css
Operating System:

WinXP Pro

evant
29 Sep 2011, 3:53 PM
Thanks for the detailed report.

fschaeffer
29 Sep 2011, 8:46 PM
Glad that you agree that it is a bug. I was not quite sure whether gauge charts are intentionally ranging from 0 - 100...