Creating a bar chart with external data

1. Start by defining a model to define the data we are loading:
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'value',
type: 'int'
}]
});

2. Create a store with an AJAX proxy:
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'BarChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});

3. Create a panel with a fit layout and render it to the document's body:
var panel = Ext.create('Ext.Panel', {
width: 600,
height: 400,
title: 'Bar Chart from External Data',
layout: 'fit',
items: [
...
],
style: 'margin: 50px',
renderTo: Ext.getBody()
});

4. In the panel's items collection add a basic chart bound to the store created in
step 2. The chart requires numeric and category axes and a bar series:
var panel = Ext.create('Ext.Panel', {
...
items: {
xtype: 'chart',
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['value'],
title: 'Value'
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Name'
}],
series: [{
type: 'bar',
axis: 'bottom',
xField: 'name',
yField: 'value'
}]
},
...
});