Can't create a simple line chart in Ext-JS

Question

I'm getting the following error when trying to create a simple chart. I'm getting similar problems within my app and I have been trying to narrow down the problem so I created a small reduction and I can't for the life of me figure out what I'm doing wrong. Could somebody take a look at what I have and see if you can spot any problems?

When I run the code below, I get the following error

Unexpected value matrix(NaN,NaN,NaN,NaN,NaN,-Infinity) parsing transform attribute. (function(){var e=this,a=Object.protot...ate("Ext.XTemplate",j,g)}return j}}); ext-all.js (line 15)

Here's the code I'm running:

Ext.require('Ext.chart.*'); 
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']); 
Ext.onReady(function () { 
    var store = new Ext.data.ArrayStore({ 
        fields: [ 
            //timestamp means UNIX timestamp 
            {name: 'datetime', type: 'date', dateFormat: 'timestamp'}, 
            {name: 'data', type: 'float'} 
        ], 
        data: [ 
            [1311844196,47], 
            [1311846214,68], 
            [1311848214,90] 
        ] 
    }); 

    Ext.create('Ext.Window', { 
        width: 800, 
        height: 600, 
        title: 'Test Chart', 
        renderTo: Ext.getBody(), 
        layout: 'fit', 
        items: { 
            xtype: 'chart', 
            store: store, 
            axes: [{ 
                type: 'Numeric', 
                position: 'left', 
                fields: ['data'] 
            },{ 
                type: 'Time', 
                position: 'bottom', 
                fields: ['datetime'], 
                dateFormat: 'Md,H:i' 
            }], 
            series: [{ 
                type: 'line', 
                axis: 'left', 
                xField: 'datetime', 
                yField: 'data', 
                tips: { 
                    width: "6em", 
                    renderer: function(storeItem, item) { 
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(storeItem.get('datetime'), 'H:i')); 
                    } 
                } 
            }] 
        } 
    }).show(); 
});

An easy way to reproduce the problem is to go to http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html (I'm using Firefox but Chrome doesn't work either). Once the page is loaded, close the example window and can copy paste the above code into firebug's console. You should see that nothing gets charted and an error occurs.

Juan Mendes Juan Mendes · Accepted Answer · 2011-08-05T18:16:33

It turns out that ExtJS's time axis is really buggy and always tries to aggregate your data (which I don't want), and has a few other bugs (like the name of the date field in the store must be 'date'.) I created a ticket to look at this issue and they've determined that they need to work on it.

What I ended up doing was to use a numeric axis, passed in timestamps, and used a label renderer to display them as dates.

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
    var store = new Ext.data.ArrayStore({
        fields: ['tstamp', 'data'],
        data: [
            [1311800196, 95], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311844196, 47], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311846214, 68], // Jul 28 2011 02:43:34 GMT-0700 (Pacific Daylight Time)
            [1311848214, 90]  // Jul 28 2011 03:16:54 GMT-0700 (Pacific Daylight Time)
        ]
    });

    Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        title: 'Test Chart - Dates along the x axis',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            xtype: 'chart',
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data']
            },{
                type: 'Numeric',
                position: 'bottom',
                fields: ['tstamp'],
                minimum: 1311800196, // Same as the first point
                maximum: 1311848214, //Same as the last point
                roundToDecimal: false, // required so it won't mess with my renderer
                label: {
                    renderer: function(value) {
                        var date = new Date(value * 1000);
                        return Ext.Date.format(date, "H:i") + "\n" + Ext.Date.format(date, "M j") ;
                    }
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'tstamp',
                yField: 'data',
                tips: {
                    width: "6em",
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(new Date(storeItem.get('tstamp')*1000), 'H:i'));
                    }
                }
            }]
        }
    }).show();
})

Can't create a simple line chart in Ext-JS

1 Answers