Threaded View

  1. #1
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,781
    Vote Rating
    167
    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