extjs - Sencha Chart phantom labels everywhere -

i've got chart :

ext.define('carbozero.view.piechart', {     extend: 'ext.chart.polarchart',     alias: 'widget.piechart',      requires: [         'carbozero.view.override.piechart'     ],      config: {         animate: false,         store: 'relativedata',         colors: [             '#115fa6',             '#94ae0a',             '#a61120',             '#ff8809',             '#ffd13e',             '#a61187',             '#24ad9a',             '#7c7474',             '#a66111',             '#222222',             '#115ea6',             '#94cc0a',             '#b61120',             '#dd8809',             '#11d13e',             '#a68887',             '#94df9d',             '#7f74f4',             '#112341',             '#abcdef1'         ],         series: [             {                 type: 'pie',                 renderer: function(sprite, record, attributes, index, store) {                      if(record.type === 'label')                     {                         var total = ext.getstore('relativedata').gettotal();                         var name = record.text;                         var value = ext.getstore('relativedata').getbyname(name);                            var ratio = math.round((value/total)*10000)/100;                          sprite.labelcfg.text = sprite.labelcfg.text +" : "+ ratio +"%";                     }                 },                 labelfield: 'strname',                 xfield: 'numvalue'             }         ],         interactions: [             {                 type: 'rotate'             }         ],         legend: {             xtype: 'legend',             docked: 'bottom',             itemid: 'pie_legend',             itemtpl: [                 '<tpl if="value != 0">',                 '   <span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}',                 '</tpl>'             ],             maxitemcache: 100,             store: 'relativedata'         },         listeners: [             {                 fn: 'onpolarinitialize',                 event: 'initialize'             }         ]     }  }); 

which uses store

ext.define('carbozero.store.relativedata', {     extend: 'ext.data.store',     alias: 'store.relativedata',      requires: [         'carbozero.model.relativeelement'     ],      config: {         destroyremovedrecords: false,         model: 'carbozero.model.relativeelement',         storeid: 'relativedata'     },      gettotal: function() {         var total =0;         for( var i=0; i<this.getcount();i++)         {             total += this.getat(i).get('numvalue');         }          return total;     },      getbyname: function(name) {         var value;          for(var i=0;i<this.getcount();i++)         {             if(this.getat(i).get('strname')===name)             {                 value = this.getat(i).get('numvalue');                 break;             }          }         return value;     }  }); 

i fill store using function :

var relstore = ext.getstore('relativedata'); var elestore = ext.getstore('element'); var relmodel; var elemodel; var booladded = false;  relstore.removeall();  //convert co2 qty for(var = 0; i< elestore.getcount();i++) {     elemodel = elestore.getat(i);     relmodel = ext.create(appname + '.model.relativeelement');     relmodel.set('strname',elemodel.get('strname'));     relmodel.set('numvalue', elementcompute(elemodel));     if(elemodel.get('numvalue')*elemodel.getfactor() >0)     {         booladded = true;         relstore.add(relmodel);     } }  app.getcontroller('titlebar').parenttotitle();  //no element had value superior 0, nothing displayed if(!booladded) {     app.getcontroller('popup').chartalert(); } this.refreshpie(); ///special line needed 

has can see store local , use store fill self. last line of function used fill store-linked chart 'this.refreshpie()' magic contribute problem have. here :

pie.sync(); pie.redraw(); 

if lines not there, no chart displayed @ all. not make sense since .sync should use non-local store...

problem is, i'm happy works @ displaying chart... there 1 little thing not understand.

my chart display level of data-tree, when go level store updated nodes in level.

what happens when go in tree, kind of problem happens

the old data labels stay on chart (coal, nuclear) , new 1 added on it... checked store, it's filled right models, checked check inside pie+chart model , couldnt find messed up...

ie. in picture electricity supposed displayed.

can me out, black magic of sencha touch charts getting upper hand on patience.

good know if rotation of chart (interation rotation - proced on gesture) labels reset themselve , display properly...

let's call serie._label.instances array has arrlabels.

get serie attributes.serie in renderer()

• let's arrlabels has 5 elements in it.
• now let's empty , add store of chart 3 new elements.
• sencha update 3 first cells new data, not delete last 2 useless now.
• those last 2 appear on chart if should not there @ all.

my solution make double check , slice elements out arrlabels.slice(index,1) , chart.refresh().

i not recommend solution if store contains alot of elements has called alot.

renderer() called 4 time sprite display o(4n)...

plus know need check if element needs displayed or not in o(n).

so o(n^(4n)) approx o(n^n).

i bug reported it, sencha team should it.

bug report : http://www.sencha.com/forum/showthread.php?270229-chart-serie._label_instances-updating-is-not-working-properly