Pie chart not rendering with remote store (is with static store)

Question

I have a Ext.chart Pie chart and I am trying to load in data but with a bit of trouble.

The below static store works fine:

this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['COUNTY', 'AMOUNT' ],
            data: [
                { COUNTY: 'London', AMOUNT: 10.92 },
                { COUNTY: 'Lancashire ', AMOUNT: 6.61 },
                { COUNTY: 'Kent', AMOUNT: 5.26 },
                { COUNTY: 'West Yorkshire', AMOUNT: 4.52 },
                { COUNTY: 'Nottinghamshire', AMOUNT: 4.01 },
                { COUNTY: 'Others', AMOUNT: 68.68 }
            ]
        });

However this is not?

    Ext.define('counties', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'COUNTY', type: 'string'},
            {name: 'AMOUNT', type: 'float'}
        ]
    });

    this.myDataStore = Ext.create('Ext.data.JsonStore', {
        model: 'counties',
        proxy: {
            type: 'ajax',
            url : '/dashboard/countytotals?percentage=true',
            reader: {
                type: 'json',
                root: 'data'                    
            }
        },
        autoLoad: true
    });

I just get a blank graph or undefined...?

When I use a Data.Store (instead of a JsonStore) I can see the counties around the circumference of the pie chart but the colored chart in the middle is missing and that is using Data.Store below:

Ext.define('APP.store.Countytotalsgraph', {
    extend: 'Ext.data.Store',
    model: 'APP.model.Countytotalsgraph',
    autoLoad: true,
    storeId: 'countyTotalsGraphStore',

    proxy: {
        type: 'ajax',
        format: 'json',
        api: {
            read   : '/dashboard/countytotals'
        },
        reader: {
            type: 'json',
            root: 'data',
            //rootProperty: 'data',
            successProperty: 'success'
        }
    },

    listeners: {
        beforeload: function(store, eOpts) {
            //if ( this.data.items.length ) {
            //Ext.getCmp('optionsGrid').getView().refresh();
            //}
            store.proxy.extraParams = {
                percentage: 'true'
            }
        }
    }
});

The above snippet produced this:

The return json from my database is in this format:

{"success":true,"data":[{"COUNTY":"London ","AMOUNT":10.92},{"COUNTY":"Lancashire","AMOUNT":6.61},{"COUNTY":"Kent ","AMOUNT":5.26},{"COUNTY":"West Yorkshire","AMOUNT":4.52},{"COUNTY":"Nottinghamshire","AMOUNT":4.01},{"COUNTY":"Other","AMOUNT":68.68}]}

The first code snippet displays a nice graph the others do not, can you guys spot the issue?

Thanks in advance :) Nathan

Full Code of Chart

Ext.define('APP.view.core.graphs.Countytotals', {
    extend: 'Ext.Panel',
    alias: 'widget.gridportlet',
    id: 'countyTotalsGraph',
    xtype: 'pie-basic',


    width: 650,

    initComponent: function() {
        var me = this;

        Ext.define('counties', {
            extend: 'Ext.data.Model',
            allowNull: true,
            fields: ['COUNTY', 'AMOUNT']
        });

        this.myDataStore = Ext.create('Ext.data.JsonStore', {
            model: 'counties',
            proxy: {
                type: 'ajax',
                url : '/dashboard/countytotals?percentage=true',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            autoLoad: false
        });

        this.listeners = {
            afterrender: function(){
                console.log('asdsadasd');
                this.myDataStore.load();
            }
        };

        /*this.myDataStore = Ext.create('Ext.data.JsonStore', {
            fields: ['COUNTY', 'AMOUNT' ],
            data: [
                { COUNTY: 'London', AMOUNT: 10.92 },
                { COUNTY: 'Lancashire ', AMOUNT: 6.61 },
                { COUNTY: 'Kent', AMOUNT: 5.26 },
                { COUNTY: 'West Yorkshire', AMOUNT: 4.52 },
                { COUNTY: 'Nottinghamshire', AMOUNT: 4.01 },
                { COUNTY: 'Others', AMOUNT: 68.68 }
            ]
        });*/

        console.log(this.myDataStore.getData());

        me.items = [{
            xtype: 'polar',
            width: '100%',
            height: 500,
            store: this.myDataStore,
            insetPadding: 50,
            innerPadding: 20,
            legend: {
                docked: 'bottom'
            },
            interactions: ['rotate', 'itemhighlight'],
            /*sprites: [{
                type: 'text',
                text: 'Pie Charts - Basic',
                font: '22px Helvetica',
                width: 100,
                height: 30,
                x: 40, // the sprite x position
                y: 20  // the sprite y position
            }, {
                type: 'text',
                text: 'Data: Top 5 Counties',
                font: '10px Helvetica',
                x: 12,
                y: 425
            }, {
                type: 'text',
                text: 'Source: Database',
                font: '10px Helvetica',
                x: 12,
                y: 435
            }],*/
            series: [{
                type: 'pie',
                angleField: 'AMOUNT',
                label: {
                    field: 'COUNTY',
                    display: 'outside',
                    calloutLine: {
                        length: 60,
                        width: 3
                        // specifying 'color' is also possible here
                    }
                },
                highlight: true,
                tooltip: {
                    trackMouse: true,
                    renderer: function(storeItem, item) {
                        this.setHtml(storeItem.get('COUNTY') + ': ' + storeItem.get('AMOUNT') + '%');
                    }
                }
            }]
        }];

        this.callParent();
    }
});

Request in browser

Answer 1

There's no float field type by default; that should be number. That's probably why you only get half of your data parsed in your second example.

Answer 2

I only notice that you have the below at the end of your json from the database

{"COUNTY":"Other","AMOUNT":68.68}]}{"COUNTY":"Other","AMOUNT":68.68}]}

I presume Other should only be appearing once?

There also seems to be a comma missing between the two "Other" entries.