What is wrong with this chart?

What is wrong with this chart?

I have the following code to make the chart. But the graph display wrong.
Here is the code
Ext.onReady(function(){
Ext.define('FinancialRatio',{
extend: 'Ext.data.Model',
fields: ['year','revenue']
});
var FinancialRatioStore = Ext.create('Ext.data.Store',{
model: 'FinancialRatio',
autoLoad:true,
proxy:{
type: 'ajax',
url: 'http://localhost/FinancialRatio.php',
reader:{
type: 'xml',
record: 'ratio'
}
}
});
var revenue = Ext.create('Ext.Window',{
width: 400,
height:300,
renderTo: Ext.getBody(),
hidden: false,
maximizable: true,
title: 'Revenue',
layout: 'fit',
items:{
xtype: 'chart',
style: 'background:#fff',
store: FinancialRatioStore,
animate: true,
axes:[{
title: 'Revenue',
type: 'Numeric',
position: 'left',
fields: ['revenue']
},{
title: 'Year',
type: 'Category',
position: 'bottom',
fields: ['year']
}],
series:[{
type: 'line',
xField: 'year',
yField: 'revenue'
}]
}
});
And here is the result

But the actual data is as follow (I wrote the grid code to display this data)

Base on the data, the graph is displaying wrong. But I cant figure out
where I did wrong. Could you please help me out?
Also, what is the differences between the "fields" in axes and the
"xfield" and "yfield" in series?
Thank you