PDA

View Full Version : [OPEN] [OPEN]Numbering Presentation Errors in Y-Axis Labels



maslofer
5 Mar 2011, 3:27 PM
The attached pictures show two numbering issues for the y-axis of a bar chart. This bar chart is made from decimal data between about 0 and 3. The same data is used in each figure but the label renderer is changed.

The first figure shows precision problems in rounding. (No label renderer is applied to this data).

The second figure shows the same label repeated several times when the label rendered is set to "0,0". It looks like ExtJS is just deciding where to stick labels and then applying the formater to each of those places. It should make sure the same label is only shown once. Also that the label is placed at the best place (i.e "0" should not be at 0.25 even if 0.25 rounds to 0 when the formatter is applied.)

24990

24991

-Scott

ngamble
6 Mar 2011, 9:43 PM
I was seeing the same thing. Try setting your renderer to "0.0" as opposed to "0,0" it worked for me.

evant
6 Mar 2011, 9:46 PM
Please post a short test case to demonstrate the issue just to ensure that we're all on the same page. Thanks.

ngamble
6 Mar 2011, 10:25 PM
This example, based on examples/chart/column, shows the problems:

Comment out both label renderer line to reproduce the rounding issue in Chrome and Firefox (works fine in IE8.

Uncomment the "0,0" label renderer to reproduce the duplicate Y-Axis labels in Chrome, Firefox, and IE8

Uncomment the "0.0" label renderer to fix the problems





Ext.onReady(function(){
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
store: Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{name:'Cat1', data:0.1},
{name:'Cat2', data:0.3},
{name:'Cat3', data:0.6},
{name:'Cat4', data:0.2},
{name:'Cat5', data:0.7},
{name:'Cat6', data:0.9},
{name:'Cat7', data:0.4},
{name:'Cat8', data:1.1},
{name:'Cat9', data:0.5},
{name:'Cat10', data:0.8}
]
}),
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
//renderer: Ext.util.Format.numberRenderer('0,0') // DOESN'T WORK
//renderer: Ext.util.Format.numberRenderer('0.0') // WORKS.
},
title: 'Some random number',
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Some random category'
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data'
}]
}
});
});

evant
14 Mar 2011, 4:34 AM
From the docs:



The format string must specify separator characters according to US/UK conventions ("," as the thousand separator, and "." as the decimal separator)


However I can confirm the issue with not specifying any renderer.

koolchallenger
4 Mar 2012, 1:20 AM
I am facing similar problem. Let me know if this problem has been solved. This seems to me as EXTJS bug

reis3k
31 Mar 2012, 11:58 AM
using
renderer: Ext.util.Format.numberRenderer('0.0') solve the generating duplicated values on y-axis problem, but I don't want to see floating point numbers on my y-axis, because all my data is decimal numbers. So, is this a bug, should we wait for a fix?

To test this case on the provided sample column charts, you can use these data:

var store3 = new Ext.data.JsonStore({
fields:['name', 'data1'],
data: [
{name:'Jan', data1: 1},{name:'Feb', data1: 0},
{name:'Mar', data1: 0},{name:'Apr', data1: 0},
{name:'May', data1: 1},{name:'Jun', data1: 1},
{name:'Jul', data1: 2},{name:'Aug', data1: 3},
{name:'Sep', data1: 0},{name:'Oct', data1: 1},
{name:'Nov', data1: 0},{name:'Dec', data1: 0}
]});

ernst96
25 Jun 2012, 9:39 AM
I had a similar problem. The example implements a labelRenderer that formats y-values without decimals.
When the scale is small enough the chart attempts to render decimal values but they are converted to integers... resulting in repeating y-axis values



yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
...


36517

In my case I only needed to show full numbers so I implemented another label renderer that only returns integers:


...
yAxis: new Ext.chart.NumericAxis({

displayName: 'Visits',
labelRenderer: function(v) {
// return a value only if it is an integer
if(v.toString().indexOf(".") === -1){
return v;
}
}
}),



36518

reis3k
25 Jun 2012, 11:29 AM
...
yAxis: new Ext.chart.NumericAxis({

displayName: 'Visits',
labelRenderer: function(v) {
// return a value only if it is an integer
if(v.toString().indexOf(".") === -1){
return v;
}
}
}),



Thanks! I'll give a try.

andrevio
5 Jul 2012, 2:03 PM
Thanks ernst96 for the post. I was facing a similar issue with the axis showing duplicate values. As you mentioned, it was all because the renderer was rounding off decimal numbers, there by, producing duplicates.

This problem could be seen even in Sencha's demo "Stacked Bar Chart", if the data points are randomly generated on a smaller scale (instead of 0 to 100, try 0 to 3).

To fix it, I ended up using a minor modification to the posted solution, as follows. Note the "else" condition returning an empty string:


axes: [{
type: 'Numeric',
label: {
//renderer: Ext.util.Format.numberRenderer('0,0')
renderer: function(v) {
// return a value only if it is an integer
if (v.toString().indexOf(".") === -1){
return v;
} else {
// return empty string, so as not to have "undefined"
return '';
}
}
},
...
}

reis3k
28 Aug 2012, 3:55 AM
Thanks ernst96 (http://www.sencha.com/forum/member.php?42386-ernst96) and andrevio (http://www.sencha.com/forum/member.php?356132-andrevio)! without "else" part, it returns undefined for the decimal numbers. So, it fixes in a way, even though the light gray lines still passed through the decimals.

vbarzana
26 Apr 2013, 6:10 AM
Hi guys,
Unfortunately I didn't solve my problem with this solution, it seems that among biggest amount of numbers in the x that has to be rendered in the y labels the decimals value increment and there are not more integer values, so, for me it doesn't work.
Please does anyone knows another way how to solve this problem, you can see after applying the renderer function still doesn't work, take a look to the image, now the problem is that there are not integer returned.
43378
Looking forward to have a reply about this bug.
Best regards,
Victor