Sencha Touch 2 pie chart not displaying -


i attempting follow this example creating pie chart.

i added simple code create , dock toolbar top of view still using code example linked above. doing made chart not display. blank page.

my code pasted below:

        ext.define('revivaltimes.view.chart', {             extend: 'ext.chart.polarchart',             xtype: 'chart',              requires: [                 'ext.chart.series.pie',                 'ext.chart.interactions.rotate'             ],              config: {                 title: 'statistics',                 iconcls: 'settings',                  layout: 'fit',  /**************** toolbar causes second error - disappearing chart **************/                 items: [{                     docked: 'top',                     xtype: 'toolbar',                     title: 'statistics chart',                     items :[                         {                             align : 'left',                             name : 'nav_btn',                             iconcls : 'list',                             iconmask: true,                             ui : 'plain',                         },                         {                             align : 'right',                             name : 'user_btn',                             iconcls : 'user',                             iconmask: true,                             ui : 'plain',                         }                     ]                 }],     /**********************************************************************/                  animate: true,                 interactions: ['rotate'],                 colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],                 store: {                   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}                   ]                 },                 series: [{                     type: 'pie',                     label: {                         field: 'name',                         display: 'rotate'                     },                     xfield: 'data3',                     donut: 30                 }]              } //config         }); 

when visit chart view, following error:

uncaught typeerror: object [object object] has no method 'renderframe'

update:

i should explain not using default tabbar navigation. implemented slide navigation following this tutorial.

i using following controller code switch views:

    ext.define('revivaltimes.controller.navigation', {     extend: 'ext.app.controller',      config: {          refs: {             main: 'main',             navigation : 'navigation',         },          control: {             "button[name='nav_btn']": {                 tap: 'togglenav'             },             navigation : {                 itemtap : function(list, index, target, record){                     this.togglenav();                      // console.debug('list: ' + list);                     // console.log('index: ' + index);                     // console.error('target: ' + target.tosource());                     // console.warn('record: ' + record);                      // json.stringify(target);                      switch(index){                         case 0:                              this.getmain().setactiveitem(0);                             break;                         case 1:                              this.getmain().setactiveitem({xtype:'messagesview'});                             break;                         case 2:                             this.getmain().setactiveitem({xtype:'articleslistview'});                             break;                         case 3:                             this.getmain().setactiveitem({xtype:'categoriesview'});                             break;                         case 4:                             // this.getmain().setactiveitem({xtype:'chart'});                             this.getmain().setactiveitem({xtype:'chartcontainer'});                             break;                         default:                             break;                     }                 }             }         }      },      togglenav: function(){         // console.log('responding!');         var me = this;         mainel = me.getmain().element;          if (mainel.hascls('out')) {             mainel.removecls('out').addcls('in');              me.getmain().setmasked(false);         } else {             mainel.removecls('in').addcls('out');               me.getmain().setmasked(true);         }     }  }); 

when select last option on slide navigation, view changes pie chart fails load explained above.

try this:-

ext.define('revivaltimes.view.main', {     extend: 'ext.container',     xtype: 'main',            config: {         layout: 'fit',         items: [{             docked: 'top',             xtype: 'toolbar',             title: 'statistics chart',             items :[             {                 align : 'left',                 name : 'nav_btn',                 iconcls : 'list',                 iconmask: true,                 ui : 'plain'             },             {                 align : 'right',                 name : 'user_btn',                 iconcls : 'user',                 iconmask: true,                 ui : 'plain'             }             ]         },{             xtype: 'chart'         }]     } }); 

Comments

Popular posts from this blog

php - Magento - Deleted Base url key -

javascript - Tooltipster plugin not firing jquery function when button or any click even occur -

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -