This issue duplicates another issue.
  1. #1
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default Ext.chart.Legend never rendered afterwards if the chart store is initial empty

    Ext.chart.Legend never rendered afterwards if the chart store is initial empty


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • FF17
    DOCTYPE tested against:
    • DTD XHTML 1.0 Transitional
    Description:
    • Tested with Ext.chart.series.Pie, if the chart store has initial no data, the legend is after a dataLoad never rendered.
    Steps to reproduce the problem:
    • see working example
    The result that was expected:
    • see working example
    The result that occurs instead:
    • see working example
    Test Case:
    Code:
                Ext.require(['Ext.chart.*',
                'Ext.Window', 
                'Ext.fx.target.Sprite', 
                'Ext.layout.container.Fit', 
                'Ext.window.MessageBox', 
                'Ext.data.*']);
            console.log('start');
            
            Ext.onReady(function () {
                console.log('start1');
                
                Ext.define('SingleM', {
                    extend: 'Ext.data.Model',
                    idProperty: 'Zt',
                    fields: [
                        {
                            name: 'Zt',
                            dateFormat: 'd.m.Y H:i',
                            type: 'date'
                        },
                        {
                            name: 'Bm',
                            type: 'int'
                        }
                    ]
                }); 
                
                Ext.define('PieM', {
                    extend: 'Ext.data.Model',
                    //idProperty: 'Name',
                    fields: [
                        {
                            name: 'Name',
                            type: 'string'
                        },
                        {
                            name: 'Bm',
                            type: 'int'
                        }
                    ]
                });        
                    
                var data1 = [{"Zt":"22.11.2012 06:50","Bm":"6"},
                    {"Zt":"22.11.2012 07:00","Bm":"13"},{"Zt":"22.11.2012 07:10","Bm":"19"},
                    {"Zt":"22.11.2012 07:20","Bm":"25"},{"Zt":"22.11.2012 07:30","Bm":"31"},
                    {"Zt":"22.11.2012 07:40","Bm":"37"},{"Zt":"22.11.2012 07:50","Bm":"42"},
                    {"Zt":"22.11.2012 08:00","Bm":"46"},{"Zt":"22.11.2012 08:10","Bm":"48"},
                    {"Zt":"22.11.2012 08:20","Bm":"54"},{"Zt":"22.11.2012 08:30","Bm":"60"},
                    {"Zt":"22.11.2012 08:40","Bm":"62"},{"Zt":"22.11.2012 08:50","Bm":"66"},
                    {"Zt":"22.11.2012 09:00","Bm":"70"},{"Zt":"22.11.2012 09:10","Bm":"74"},
                    {"Zt":"22.11.2012 09:20","Bm":"76"},{"Zt":"22.11.2012 09:40","Bm":"81"},
                    {"Zt":"22.11.2012 09:50","Bm":"87"},{"Zt":"22.11.2012 10:00","Bm":"92"},
                    {"Zt":"22.11.2012 10:10","Bm":"98"},{"Zt":"22.11.2012 10:20","Bm":"103"},
                    {"Zt":"22.11.2012 10:30","Bm":"108"},{"Zt":"22.11.2012 10:40","Bm":"109"},
                    {"Zt":"22.11.2012 10:50","Bm":"115"},{"Zt":"22.11.2012 11:00","Bm":"121"},
                    {"Zt":"22.11.2012 11:10","Bm":"126"},{"Zt":"22.11.2012 11:20","Bm":"132"},
                    {"Zt":"22.11.2012 11:30","Bm":"136"},{"Zt":"22.11.2012 11:40","Bm":"138"},
                    {"Zt":"22.11.2012 11:50","Bm":"144"},{"Zt":"22.11.2012 12:00","Bm":"149"},
                    {"Zt":"22.11.2012 12:50","Bm":"155"},{"Zt":"22.11.2012 13:00","Bm":"161"},
                    {"Zt":"22.11.2012 13:10","Bm":"165"}];
                    
    
                var store = Ext.create('Ext.data.JsonStore', {
                    storeId: 'SingleS',
                    model: 'SingleM',
                    data: data1
                });
                
                var store2= Ext.create('Ext.data.JsonStore', {
                    storeId: 'PieS',
                    model: 'PieM'
                });
                      
                var chart = Ext.create('Ext.chart.Chart', {
                        xtype: 'chart',
                        animate: true,
                        store: store2,
                        shadow: true,
                        legend: {
                            position: 'right',
                            update: true
                        },
                        insetPadding: 30,
                        //theme: 'Base:gradients',
                        series: [{
                            type: 'pie',
                            field: 'Bm',
                            showInLegend: true,
                            //donut: donut,
                            tips: {
                              trackMouse: true,
                              width: 140,
                              height: 28,
                              renderer: function(storeItem, item) {
                                //calculate percentage.
                                var total = 0;
                                store2.each(function(rec) {
                                    total += rec.get('Bm');
                                });
                                this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Bm') / 480 * 100) + '%');
                              }
                            },
                            highlight: {
                              segment: {
                                margin: 20
                              }
                            },
                            label: {
                                field: 'Name',
                                display: 'rotate',
                                contrast: true,
                                font: '18px Arial',
                                renderer: function(v) { return v; }
                            }
                        }]
                    });
            
                var panel1 = Ext.create('widget.panel', {
                    width: 800,
                    height: 600,
                    title: 'Semester Trends',
                    renderTo: Ext.getBody(),
                    layout: 'fit',
                    tbar: [{
                        text: 'Save Chart',
                        handler: function() {
                            Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                                if(choice == 'yes'){
                                    chart.save({
                                        type: 'image/png'
                                    });
                                }
                            });
                        }
                    }, {
                        text: 'Reload Data',
                        handler: function() {
                            // Add a short delay to prevent fast sequential clicks
                            window.loadTask.delay(100, function() {
                                store1.loadData(generateData(6, 20));
                            });
                        }
                    }, {
                        enableToggle: true,
                        pressed: false,
                        text: 'Donut',
                        toggleHandler: function(btn, pressed) {
                            chart.series.first().donut = pressed ? 35 : false;
                            chart.refresh();
                        }
                    }],
                    items: chart
                });
                
                store.loadData(data1);
                //store.add(data1);
                var pieData = [];
                pieData.slice();
                pieData.push({'Name':'Arbeitszeit', 'Bm':store.max('Bm')});
                pieData.push({'Name':'Stillstand', 'Bm':480-store.max('Bm')});
                store2.loadData(pieData);
                //store2.add(pieData);
                //chart.refresh();
                //chart.redraw();
                //console.log(pieData);
            });
    HELPFUL INFORMATION Screenshot or Video:
    • not 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:
    • Win7
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Thanks for the test case, this is a dupe of: EXTJSIV-7458

    Should be already fixed for the 4.2 release.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1

Tags for this Thread