1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    20
    Vote Rating
    0
    Jem is on a distinguished road

      0  

    Default Unanswered: Piechart not displaying, what could be missing?

    Unanswered: Piechart not displaying, what could be missing?


    Hi,

    The following code is mostly copy/paste from the examples bundled with touch charts 2 beta. I'm completely lost as per how to get this working... Please have a look at the following code. It's a tab panel containing one element.

    The console outputs the following error at high speed:

    Code:
    1285touch-charts-debug.js:17113 TypeError: 'undefined' is not a function (evaluating 'me.getXField()')
    Please have a look at my code, I really need help solving this. Thanks!

    Code:
    Ext.define('FinansCloudMobile.view.TabPanel', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.tabpanel',
    
        config: {
            ui: 'light',
            activeItem: 2,
            tabBar: {
                docked: 'bottom',
                layout: {
                    pack: 'center',
                    type: 'hbox'
                }
            },
            items: [
    Boilerplate so far

    Code:
                {
                    xtype: 'container',
                    id: 'report',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Report',
                    iconCls: 'settings',
                    items: [
    Same up to here, what follows is the chart iteself. Almost a copy of the example.

    Code:
    Ext.create('Ext.chart.Chart', {
                        
                                type: 'pie',
                                width: 500,
                            height: 300,
                            
                            store: new Ext.data.JsonStore({
                                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                                data: [
                                    {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                                    {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                                    {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                                    {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                                    {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                                ]
                            }), // store
                            
                            series: [{
            
                                type: 'pie',
                                angleField: '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'
                                }
                            }], 
                            
                        }),
                    ]
                },
            ]
        }
    
    });

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    20
    Vote Rating
    0
    Jem is on a distinguished road

      0  

    Default


    series hadn't got a field:"data1" attribute... Beta charts is shipped with an outdated version of the docs!

    Solved.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Belgium
    Posts
    29
    Answers
    4
    Vote Rating
    4
    gamevampy is on a distinguished road

      0  

    Default


    Thanks Jem.
    Because of your reply, i checked the Sencha Touch Charts code itself, and noticed the problem (i didnt know what the fix should be with your answer).

    So the bug in the docs is the next: in the series-property, the name of "angleField" should be changed to "field".
    Code:
    series: [ 
       {
            type: 'pie',
            field: 'data1',
                        
            label: {
                  field: 'name',
                  display: 'rotate',
                  contrast: true
            }
       }
    ]

Thread Participants: 1