views:

10

answers:

0

So What Im trying to do is populate an Extjs line graph. Ive 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 heres 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 cant figure out for the life of my why this wont work. The graph axis shows up, but the line doesnt render.