values not correctly rendered in line chart in extjs? - extjs

Question

I'm having trouble with result rendered by line chart example from extjs4
the columns are rendered correctly but the line is not, notice in the picture how i need to have 4 while its drawed in the 0 xpoint also the second plot is supposed to be 5 when its draw in 2:
here is my code:
panel3 = Ext.create('widget.panel', {
width: 600,
height: 200,
frame: false,
renderTo: 'line',
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: storeline,
insetPadding: 20,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'//C12283
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 10,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: {
font: '11px Arial',
rotate: {
degrees: 300
}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
display: 'over',
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 30
} ,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 20,
fill: '#38FFFF',
stroke: '#38B8BF'
}
},
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
tips: {
trackMouse: true,
width: 110,
height: 25,
//baseCls: 'customtip', //bodyStyle: 'background:#6cc; ',
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data2'));
}
},
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 5,
radius: 5,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}]
}
});

Answer 1

In your axis definition try changing
fields: ['data1'],
to
fields: ['data1', 'data2'],
Also verify that the data being loaded into the data2 field is an actual integer. ExtJs might be reading it as a string and therefore is unable to match it with a value on the left axis.