Just like mitchellsimoens, I was able to use the external data provided just fine. However, I wasn't able to get the code to work with the return to bring up the chart. Instead, you might be looking to put the chart into a panel or window as it's item.
Also, I was not able to get the chart to work with the theme config. Once I took it out it worked just fine. Here's how I got it to work, and this may be what you're looking for.
app.js
Code:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['name', 'data1'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
}
});
var chart = {
xtype: 'chart',
store: store,
width: 300,
height: 500,
animate: true,
axes: [{
type: 'Category',
position: 'left',
title: 'Places',
fields: ['name']
}, {
type: 'Numeric',
position: 'bottom',
title: 'CTR',
fields: ['data1'],
grid: true,
minimum: 0
}],
series: [{
type: 'bar',
axis: 'bottom',
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem) {
this.setTitle(storeItem.get('data1') + ' data1')
}
},
xField: 'name',
yField: ['data1']
}]
};
Ext.create('Ext.panel.Panel', {
width: 300,
height: 500,
renderTo: Ext.getBody(),
layout: 'fit',
items: [chart]
});
data.json
Code:
[
{"name": "banner_1", "data1": 0.15},
{"name": "banner_2", "data1": 0.12}
]
Like this the chart can be called up in the item of windows, panels, etc pretty easily.
Hopefully this helps out.