Rendering pie chart using xtype and Ext.create

Question

I first tried to render a pie chart using xtype into centre region of a panel with border layout. Here is the code:

{
            xtype:'pie',
            renderTo: Ext.getBody(),
            width: 200,
            height: 150,
            animate: true,
            layout:'fit',
            store: store,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'salary',
                showInLegend: true,
                highlight: {
                  segment: {
                    margin: 20
                  }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]    

}

I am getting the following error:

Uncaught TypeError: Cannot call method 'substring' of undefined

But when i take the same code and use Ext.create then it is working fine.

var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
animate: true,
layout:'fit',
store: store,
theme: 'Base:gradients',
series: [{
    type: 'pie',
    field: 'salary',
    showInLegend: true,
    highlight: {
      segment: {
        margin: 20
      }
    },
    label: {
        field: 'name',
        display: 'rotate',
        contrast: true,
        font: '18px Arial'
    }
}]    
});

I am using chart as an item instead.

What can be the problem?

Here is the store:

var store=Ext.create('Ext.data.Store',{
model:'Layouts.Person',
autoLoad:true,
data:{'items':[
                {'name':'john','empno':'1111','salary':'1234'},
                {'name':'edward','empno':'1212','salary':'2234'},
                {'name':'frank','empno':'1567','salary':'9774'},
                {'name':'michel','empno':'3456','salary':'8932'},
      ]},
proxy:{
    type:'memory',
    reader:{
        type:'json',
        root:'items'
    }
}
});

The xtype for pie chart is pie:

http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.chart.series.Pie.html

user3333132 user3333132 · Accepted Answer · 2014-02-26T06:12:17

try this code it will work out for you.

{
    xtype:'chart',
    animate: true,
    width: 500,
    height: 300,
    store: store,
    theme: 'Base:gradients',
    series: [{  
        type: 'pie',
        field: 'data1',
        showInLegend: true,
        tips: {
          trackMouse: true,
          width: 140,
          height: 28,
          renderer: function(storeItem, item) {
            //calculate and display percentage on hover
            var total = 0;
            store.each(function(rec) {
                total += rec.get('data1');
            });
            this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
          }
        },
        highlight: {
          segment: {
            margin: 20
          }
        },
        label: {
            field: 'name',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
}

Rendering pie chart using xtype and Ext.create

1 Answers