1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    7
    Vote Rating
    0
    ronenil is on a distinguished road

      0  

    Default Unanswered: ExtJS Pie Chart doesn't render correctly on $(window).resize

    Unanswered: ExtJS Pie Chart doesn't render correctly on $(window).resize


    Hi All,

    I have a page with few iframes that one of them loads the pie chart into it.

    this is my code for creating the pie chart :
    Code:
    var chart=Ext.create('Ext.chart.Chart', {                   renderTo: 'resultdiv',
                       width: $(window).width(),
                       id:'pietest',
                       height:$(window).height(),
                       store: store,
                       insetPadding: 20,
                       theme: 'Base:gradients',
                       legend: {
                                position: 'right',
                                field: 'key',
                                boxStroke:'#ffffff'
                        },
                        
                        
                       series: [{
                         type: 'pie',
                         
                         showInLegend: true,
                         colorSet: colorSet,
                         field: 'value',
                         
                         renderer: function(sprite, record, attributes, index, store)  //gradient colors renderer
                         {
                            var midAngle = (sprite.segment.startAngle + sprite.segment.endAngle) * 0.5;
                            if ( record.data.value == 100)
                            {
                                sprite.surface.series[0].highlight.segment.margin=0;
                            }
                            
                            if (record.data.color.toLowerCase() == 'red')
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#redGradient)',
                                        stroke: '#ffffff'
                                        
                                    }, true);
                                } else if (record.data.color.toLowerCase() == 'yellow') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                    
                                        fill: 'url(#yellowGradient)',
                                        stroke: '#ffffff'
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'green') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#greenGradient)',
                                        stroke: '#ffffff'
                                        
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'purple') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#purpleGradient)',
                                        stroke: '#ffffff'
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'blue') {
                                sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#blueGradient)',
                                        stroke: '#ffffff'
                                        
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'brown') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#brownGradient)',
                                        stroke: '#ffffff'
                                        
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'pink') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#pinkGradient)',
                                        stroke: '#ffffff'
                                        
                                    }, true);
                                }
                                else if (record.data.color.toLowerCase() == 'turquoise') 
                                {
                                    sprite.surface.addGradient(getGradient(record.data.color.toLowerCase(), midAngle));
                                    sprite.setAttributes({
                                        
                                        fill: 'url(#turquoiseGradient)',
                                        stroke: '#ffffff'
                                    }, true);
                                }
                         },
                         tips: {
                            trackMouse: true,
                            maxWidth:500,
                            styleHtmlContent: true,
                            
                            renderer: function (storeItem, item) 
                            {
                                
                                var tooltipText = storeItem.get('key') + ': ' + storeItem.get('value') + '%';
                                
                                tooltipText+="<br>Count: " + storeItem.get('count');
                                
                                this.setTitle(tooltipText);
                           }
                        },
                         label: {
                           field: 'key',
                           display: 'middle',
                           contrast:false,
                           font: '12px Arial Bold',
                           //renders the piechart value and percentage labels
                           renderer: function (label){
                                // this will change the text displayed on the pie to percentage
                                var cmp = Ext.getCmp('pietest'); // id of the chart
                                var index = cmp.store.findExact('key', label); // the field containing the current label
                                var data = cmp.store.getAt(index).data;
                                return data.label; // the field containing the label to display on the chart
                            }
                         },
    
    
                        highlight: {
                            segment: {
                              margin: 10
                            }
                        }
    
    
                       }]
                });
    in the following :
    $(window).resize(function()
    {
    chart.doComponentLayout($(window).width(), $(window).height());
    }

    the chart doesn't render well , accutaly when i hover the pie slices the get their new position.
    after a lot of workaround when i disabled the gradient that i calculate on run time the chart resizes well and centered.

    someone is familiar how to fix this issue ?

    p.s i don't if suitable but i thought of defining a chart create it and destroy upon iframe resize,
    and create it again in the same handler.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,033
    Vote Rating
    213
    Answers
    481
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Could you render a viewport into the iFrame - give the viewport a 'fit' layout and the chart be its sole child item?

    Or, out of curiosity, why use iFrames and not just a Window component?

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    7
    Vote Rating
    0
    ronenil is on a distinguished road

      0  

    Default


    Sorry for the late response, but I am kind of newbie with ExtJS.

    Can you please elaborate on viewport? it would be much of a help for some example.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    7
    Vote Rating
    0
    ronenil is on a distinguished road

      0  

    Default


    Quote Originally Posted by ronenil View Post
    Sorry for the late response, but I am kind of newbie with ExtJS.

    Can you please elaborate on viewport? it would be much of a help for some example.
    after loading the chart on viewport the behavior remains the same, when re-sizing the iframe the chart still renders badly and not centered until the pie segments are hovered.

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,033
    Vote Rating
    213
    Answers
    481
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Out of curiosity, why use iFrames and not just a Window component? I've found that mixing iFrames into the page can be challenging and I avoid it if a component from the framework will do the job without the iFrame.

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Posts
    7
    Vote Rating
    0
    ronenil is on a distinguished road

      0  

    Default


    few of my web pages has integrated with 3rd party reporting tools via iframes.
    I started integrating with Ext.JS , it seems that it inevitable to remove those iframes