PDA

View Full Version : Column Chart axes does not render properly



cahello
13 Nov 2012, 7:57 AM
I have the following json data:

{data: [
{ "name": "Thu", "failure": 0, "success": 0},
{ "name": "Wed", "failure": 0, "success": 0},
{ "name": "Tue", "failure": 0, "success": 3},
{ "name": "Mon", "failure": 0, "success": 0},
{ "name": "Sun", "failure": 0, "success": 3},
{ "name": "Sat", "failure": 0, "success": 0},
{ "name": "Fri", "failure": 0, "success": 0}
]
}

When the column chart is rendered, the axes is not numbered correctly. What might be wrong? The code for the chart is:


ch= Ext.create('Ext.chart.Chart', {
width: 600,
height: 300,
region: 'center',
insetPadding: 80,
theme: 'Coloredlegend', //this is to set the green and red colors for the success and failure
animate: true,
store: store,
legend: {
position: 'right',
yField: 'success',
//style: {color: 0x34ff0a},
yField: 'failure',
//style: {color: 0xd4ff51},
},
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['failure'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Failed Data',
minimum: 0
},
{
type: 'Numeric',
position: 'left',
fields: ['success'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Test',
grid: true,
minimum: 0

},
{
type: 'Category',
position: 'bottom',
fields: ['name'],

}
],
series: [


{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + item.value[1]);
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: ['success', 'failure'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: ['success','failure'],
showInLegend: true,
},
]
});


I have also attached an example snapshot.

mitchellsimoens
15 Nov 2012, 6:29 AM
What Ext JS 4 version are you using?

Brett Hannah
15 Nov 2012, 6:51 AM
Hi Cahello,

The issue is that you have two axes bound to the left. Both are being drawn and that is why you have the strange numbering.

You need to remove one of the 'left' axes leaving only one axis but setting:
fields: ['success','failure']

That should sort it.

Brett Hannah
LinkedIn (http://www.linkedin.com/in/bretthannah)
EdgeUX (http://edgeux.com)