Populating an Extjs graph with json not working

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.