Populating an Extjs graph with json not working - php

Question

So What I'm trying to do is populate an Extjs line graph. I've created a JSON store that pulls json from a remote page and for some reason my graph is not being populated.
Heres my Ext code:
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
autoDestroy: true,
url: 'http://myURL.com',
storeId: 'graphStore',
root: 'rows',
idProperty: 'date',
fields: ['date', 'posts']
});
new Ext.Panel({
title: 'Posts',
renderTo: 'test_graph',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'date',
yField: 'posts',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('date'));
}
}
}
});
});
And here's the JSON that is supposed to be populating it:
{"rows":[
{"date":"2010-06-11","posts":4},
{"date":"2010-06-12","posts":3},
{"date":"2010-06-13","posts":1},
{"date":"2010-06-14","posts":2}
]}
I can't figure out for the life of me why this won't work. The graph axis shows up, but the line doesn't render.

Answer 1

I was having the same problem, even with store.autoLoad set to true
Actually, everything worked great when I hardcoded the json results into the page. But when I tried to use ajax to pull it from a database, the line never rendered! This wasn't a problem reading from the database, either. I verified that it was definitely pulling from the database.
I solved this by setting autoLoad to false and added store.load() after actual chart rendered and it worked totally fine.

Answer 2

you may want to set the autoLoad property to true on the store, such as:
var logsRemoteJsonStore = new Ext.data.JsonStore
({
proxy: logsRemoteProxy
, storeId: 'ourRemoteStore'
, autoLoad: true
, fields: logsRecordFields
});
In fact, verified that the following code from http://joefreeman.co.uk/projects/extstock/part-2.html does work, so it is almost certainly the autoload parameter, but review the other parameters in the example below.
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
baseParams: {
symbol: 'GOOG'
},
autoLoad: true,
url: '/CMSAdmin/ReadSiteStatisticsEightMonthSummary/',
root: 'data',
fields: ['date', 'close']
});
new Ext.Window({
title: 'GOOG',
width: 400,
height: 300,
items: new Ext.chart.LineChart({
store: store,
xField: 'date',
yField: 'close'
})
}).show();
});
json:
{
"symbol": "GOOG",
"start": 1279627043,
"span": 32140800,
"data": [{
"close": 462,
"date": "2010-08-20"
}, {
"close": 476,
"date": "2010-09-09"
}, {
"close": 527,
"date": "2010-09-28"
}, {
"close": 601,
"date": "2010-10-15"
}, {
"close": 620,
"date": "2010-11-03"
}, {
"close": 591,
"date": "2010-11-22"
}, {
"close": 592,
"date": "2010-12-10"
}, {
"close": 598,
"date": "2010-12-30"
}, {
"close": 631,
"date": "2011-01-19"
}]
}