PDA

View Full Version : [FIXED-EXTJSIV-544][PR4] Column Chart without an y-Axis Issue



maslofer
16 Mar 2011, 7:20 PM
Take a column chart without a y-axis.

If you have more than one column with non identical values, everything works fine.

However, if you have only one column or multiple columns with the same value, it renders very wrong.

See the attached pictures. The "Fish" column always has a value of 250. At one point the "a" column has a value of 250 and it renders wrong. When "a" doesn't have a value of 250 it looks fine.

251912519225193

Sample config:


var chart = Ext.create("Ext.chart.Chart",{
xtype: 'chart',
animate: false,
shadow: false,
store: store,
axes: [{
type: 'Category',
position: 'bottom',
fields: ['Label'],
label: {
font:"10px Helvetica, sans-serif"
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'Label',
yField: "value",
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'value',
renderer: Ext.util.Format.numberRenderer('0'),
color: '#333'
}
}]
});

maslofer
30 Mar 2011, 12:33 PM
This is still broken in Beta 1. I'm not sure if Ext JS developers read these replies, so if I don't get a reply to this I will post to the main thread.

evant
30 Mar 2011, 5:54 PM
We do monitor these threads however it's difficult to respond without a test case.

For example, I don't see any issue using:



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);

Ext.onReady(function () {
store1.loadData([{
name: 'Jan',
data1: 100
}, {
name: 'Feb',
data1: 99
}, {
name: 'Mar',
data1: 98
}, {
name: 'Apr',
data1: 97
}, {
name: 'May',
data1: 97
}, {
name: 'Jun',
data1: 97
}, {
name: 'Jul',
data1: 94
}, {
name: 'Aug',
data1: 93
}, {
name: 'Sep',
data1: 92
}, {
name: 'Oct',
data1: 91
}, {
name: 'Nov',
data1: 90
}, {
name: 'Dec',
data1: 89
}]);

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',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
}
});
});

maslofer
30 Mar 2011, 8:19 PM
(dupe post, see below)

maslofer
30 Mar 2011, 8:21 PM
Thanks for taking a look at this!

The issue occurs when all the bars have the same numeric value (i.e. height). Or when you only have a single bar (in which case all the bars will have the same height as there is only 1!).

Take a look at this slight modification of your example:



Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite']);

Ext.onReady(function () {
store1.loadData([{
name: 'Jan',
data1: 100
}, {
name: 'Feb',
data1: 100
}, {
name: 'Mar',
data1: 100
}, {
name: 'Apr',
data1: 100
}, {
name: 'May',
data1: 100
}, {
name: 'Jun',
data1: 100
}, {
name: 'Jul',
data1: 100
}, {
name: 'Aug',
data1: 100
}, {
name: 'Sep',
data1: 100
}, {
name: 'Oct',
data1: 100
}, {
name: 'Nov',
data1: 100
}, {
name: 'Dec',
data1: 100
}]);

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',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data1'
}]
}
});
});


25430


Note in my earlier examples the numbers were being drawn at the top of the chart (see my first post), but I assume it's the same source issue.

philogb
1 Apr 2011, 4:09 PM
Thanks for your report. This has been fixed now and will be available in the next release.

Thanks again,