PDA

View Full Version : Bar chart get shrinks and visible as small comma symbol



divyangowda
30 May 2013, 4:33 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.07
Browser versions tested against

Firefox 17 and above44100
Description:

Bar chart get shrinks and visible as only as small comma symbol when all store values are 0.
Steps to reproduce the problem:

Create a bar chart
Assign a store with a number of fields that all have a value of 0
The result that was expected:

The bar chart should be visible by displaying label with value zero
The result that occurs instead:

The Bar chart got shrinks and displayed as small comma like symbol.
Test Case:

xtype: 'chart',
animate: true,
//autoSize: true,
autoShow: true,
store: chartStore,
theme: 'CSI:gradients',
width: 438,
height: 200,
legend: false,
style: {
border: 0,
padding: 0
},
background: {
//color string
fill: '#fff'
},
axes: [{
type: 'Category',
position: 'left',
fields: ['age'],
title: '',
grid: false
}, {

type: 'Numeric',
fields: ['count'],
title: '',
position: 'bottom',
grid: true/*{
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
}*/
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle('#' + storeItem.get('count') + ' orders');
}
},
label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#fff',
'text-anchor': 'middle'
},
xField: 'age',
yField: 'count'
}],


Operating System:

Windows 7

slemmon
3 Jun 2013, 9:36 AM
Your test case isn't complete so I couldn't test it myself, but I tested the below test case ok.
That said, I tested in 4.2.1 which is the latest stable release with quite a bug fixes applied since 4.0.7. If you test your test case with 4.2.1 are you still seeing the same issue?




var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});


Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});

divyangowda
11 Jun 2013, 6:39 AM
No, its fixed in 4.2.0 version. but i required solution in Extjs4.0.7

slemmon
11 Jun 2013, 3:00 PM
There's not a patch for the issue to apply to a previous framework version, but the source is provided in the GPL download that you can resource from to create overrides for past versions as fixes are published in newer versions.