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
Post a Comment