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: enter image description here

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

enter image description here

Could you post your complete code, including the graph's one? And are you sure the json response you've posted actually make it to the browser (that is, you can see the request in the network panel of the dev tools)? — rixo, Jul 21 '14 at 15:17
@rixo Added the full chart code and a screenshot of the ajax call in firebug :) — Kal, Jul 21 '14 at 15:24
possible duplicate of [ExtJS 5 Pie Chart Not Rendering Using Remote Store](http://stackoverflow.com/questions/24889632/extjs-5-pie-chart-not-rendering-using-remote-store) — rixo, Jul 24 '14 at 21:11

score 1 · Answer 1 · answered Jul 21 '14 at 14:11

1

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.

answered Jul 21 '14 at 14:11

DotNetDublin

770
1
9
23

1

Sorry edited the post to what i am actually getting right now :) – Kal Jul 21 '14 at 14:17

score 1 · Answer 2 · answered Jul 21 '14 at 14:59

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.

answered Jul 21 '14 at 14:59

rixo

23,815
4
63
68

Thanks for the reply. I have tried both `{name: 'AMOUNT', type: 'auto'}` and `{name: 'AMOUNT', type: 'number'}` still just shows the outer labels and not the colored chart. I tried not loading the store until **after** the chart has rendered and that didn't fix it either :/ – Kal Jul 21 '14 at 15:14

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

2 Answers2