1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default [4.1-pr1] Reloading pie chart with less data orphans labels

    [4.1-pr1] Reloading pie chart with less data orphans labels


    REQUIRED INFORMATIONExt version tested:
    • Ext 4.1-pr1
    Browser versions tested against:
    • IE9 NOTHING RENDERS AT ALL
    • FF7.0.1 (firebug 1.8.3
    • Chrome 15.0.874.106 beta-m
    DOCTYPE tested against:
    • xhtml1-transitional
    Description:
    • Loading the pie with say 6 records and then loading it with 2 will result in 2 pie slices, but 6 labels total (with the 4 extra floating within the pie). The legend has only 2 labels as expected.
    Steps to reproduce the problem:
    • Load the pie chart example
    • Reload the pie chart store with generateData(2, 20)
    The result that was expected:
    • The labels remaining should only be for the two records.
    The result that occurs instead:
    • There are labels for the previous 6 records instead of just the two.
    Test Case: (modified from the example in the SDK)
    Code:
    Ext.require('Ext.chart.*');
    Ext.require('Ext.layout.container.Fit');
    
    
    Ext.onReady(function () {
        store1.loadData(generateData(6, 20));
    
    
        var donut = false,
            panel1 = Ext.create('widget.panel', {
            width: 400,
            height: 400,
            title: 'Semester Trends',
            renderTo: Ext.getBody(),
            layout: 'fit',
            tbar: [{
                text: 'Reload Data',
                handler: function() {
                    store1.loadData(generateData(2, 20));
                }
            }, {
                enableToggle: true,
                pressed: false,
                text: 'Donut',
                toggleHandler: function(btn, pressed) {
                    var chart = Ext.getCmp('chartCmp');
                    chart.series.first().donut = pressed ? 35 : false;
                    chart.refresh();
                }
            }],
            items: {
                xtype: 'chart',
                id: 'chartCmp',
                animate: true,
                store: store1,
                shadow: true,
                legend: {
                    position: 'right'
                },
                insetPadding: 10,
                theme: 'Base:gradients',
                series: [{
                    type: 'pie',
                    field: 'data1',
                    showInLegend: true,
                    donut: donut,
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        //calculate percentage.
                        var total = 0;
                        store1.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'
                    }
                }]
            }
        });
    });
    HELPFUL INFORMATIONScreenshot or Video:
    • attached
    See this URL for live test case: http://Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP Pro
    Attached Images

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Should I open this in the bugs forum instead?
    * Or if that's appropriate, could an admin move this post to Bugs?

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    20
    Vote Rating
    0
    waitingmyself is on a distinguished road

      0  

    Default


    i have the same problem

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    3
    Vote Rating
    0
    wdunn is on a distinguished road

      0  

    Default


    Same issue.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34
    Vote Rating
    0
    gordonk66 is on a distinguished road

      0  

    Default Work around

    Work around


    Here is the work around I'm using. Add a renderer to the label for the chart and do some kind of verification with the store backing the chart to determine if the label should be an empty string. In my case any store item with a value of zero does not need a label.

    Code:
    label: {
            field: 'name',
            display: 'rotate',
            font: '18px Arial',
            renderer: function(name) {
                   label = "";
                   // Look up the record from the store to determine if the label should be shown
                   if (Ext.data.StoreManager.get('pieStore').findRecord('name', name).get('value') > 0) {
                         label = name;
                   }
                    return label;
            }
    }