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
    5,032
    Answers
    389
    Vote Rating
    185
    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


    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
    5,032
    Answers
    389
    Vote Rating
    185
    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


    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