1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      0  

    Default Unanswered: Pie Chart Has Weird Space Being Rendered

    Unanswered: Pie Chart Has Weird Space Being Rendered


    Hi Everyone,

    I have been having a strange problem while rendering a pie chart using Ext JS. Please see the attached screenshot. At the left of the pie chart, you will see a really thin white wedge. I'm not sure why this is being displayed. I double checked the data store being loaded and it appears to be correct. To test this, I even created the sample data store and it was still occuring.

    Code:
    var storeTrialActivities = new Ext.data.JsonStore({
      fields: [{name:'name', type:'string'},{name:'count', type:'int'}],
      data: [{'name': 'Advisor', 'count': 100}]
    });
    here is my full code for the pie chart:

    Code:
    function showPieChart (elemId, storeData, wid, hei, style, isPercentage) {
    	Ext.BLANK_IMAGE_URL = '/newui_assets/images/x.gif';
    	Ext.require('Ext.chart.*');
    
    
    	var seriesColors = ["#ba999e", "#5e6668", "#c4bfa6", "#7ea9cc", "#dee3e6", "#937c5d"];
    	var chartStyles = chartStylesNormal;
    	var labelStyles = labelStylesNormal;
    	var legendPosition = 'bottom';
    	
    	if (style == "mini") {
    		chartStyles = chartStylesMini;
    		labelStyles = labelStylesMini;
    		legendPosition = 'right';
    	}
    	
    	Ext.define('Ext.chart.theme.themeNormal', {                                     
            extend: 'Ext.chart.theme.Base',                                       
     
            constructor: function(config) {                                       
                this.callParent([Ext.apply({                                      
                    colors: seriesColors
                }, config)]);
            }                                                                     
        });
    	
    	Ext.onReady(function(){		
    		var chart = Ext.create('Ext.chart.Chart', {
    			renderTo: elemId,
    			width: wid,
    			height: hei,
    			animate: true,
    			store: storeData,
    			shadow:false,
    			theme: 'themeNormal',
    			legend: {
    				boxStrokeWidth: 0.3,
            		boxStroke: "#AAA",
            		position: legendPosition,
            		labelFont: 'normal 9px Arial'
            	},
    			series: [{
    				type: 'pie',
    				field: 'count',
    				showInLegend: true,
    				tips: {
    					trackMouse: true,
    					dismissDelay: 0,
    					hideDelay: 0,
    					width: 140,
    					height: 28,layout: 'fit',
    					renderer: function(storeItem, item) {
                			//this.setTitle(storeItem.get('count') + ((isPercentage)?"%":"") + " " + storeItem.get('name') + ((storeItem.get('count')>1)?"s":""));
    						this.setTitle(storeItem.get('count') + ((isPercentage)?"%":"") + " " + storeItem.get('name'));
                		}
    				},
    				highlight: {
    					segment: {
    						margin: 5
    					}
    				}
    			}]
    		});
    		
    		Ext.each(chart.legend.items, function(item) {
        	    item.un("mousedown", item.events.mousedown.listeners[0].fn);
        	});
    		
            //Ext.Array.forEach(Ext.query(".x-hide-visibility"), function (item) { item.setAttribute("class", "x-hide-display"); }); 
    	});
    }

    Any ideas or suggestions would be really appreciated.

    Thanks!
    Attached Images
    -->

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    What version are you running? I do not see this in 4.1.1

    Code:
    var storeTrialActivities = new Ext.data.JsonStore({
      fields: [{name:'name', type:'string'},{name:'count', type:'int'}],
      data: [{'name': 'Advisor', 'count': 100}]
    });
    
    var seriesColors = ["#ba999e", "#5e6668", "#c4bfa6", "#7ea9cc", "#dee3e6", "#937c5d"];
    var legendPosition = 'bottom';
    
    Ext.define('Ext.chart.theme.themeNormal', {                                     
        extend: 'Ext.chart.theme.Base',                                       
    
        constructor: function(config) {                                       
            this.callParent([Ext.apply({                                      
                colors: seriesColors
            }, config)]);
        }                                                                     
    });
    
    Ext.onReady(function(){        
        var chart = Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 300,
            height: 300,
            animate: true,
            store: storeTrialActivities,
            shadow:false,
            theme: 'themeNormal',
            legend: {
                boxStrokeWidth: 0.3,
                boxStroke: "#AAA",
                position: legendPosition,
                labelFont: 'normal 9px Arial'
            },
            series: [{
                type: 'pie',
                field: 'count',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    dismissDelay: 0,
                    hideDelay: 0,
                    width: 140,
                    height: 28,layout: 'fit',
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('count') + ((isPercentage)?"%":"") + " " + storeItem.get('name'));
                    }
                },
                highlight: {
                    segment: {
                        margin: 5
                    }
                }
            }]
        });
    });
    Scott.
    -->

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      0  

    Default


    Hi Scott,

    We are still using version 4.0.

    I don't think it is a bug with the Ext JS code. I tried my sample data with the example here: http://try.sencha.com/extjs/4.0.7/examples/charts/pie/viewer.html

    a
    nd it also worked fine... My best guess is that it might be something related to conflicting JS files or CSS files? But I'm not sure how that would affect the pie chart renderer.

    Was hoping someone else had seen this issue before and had some ideas....
    -->

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I would suggest starting with a base example and start adding your items until it breaks.

    Sometimes it is easier to find out what it is, but determining what it's not.

    Scott.
    -->

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      1  

    Default


    Good call Scott.

    I just tried removing some line items one by one to see the resulting behavior.

    Strangely, the little white space goes away if I remove the line
    animate: true

    If I put that line back in, then the space occurs again...

    If I set the value to false for animate, then the white space also goes away...

    any ideas why this would be causing the problem?

    Thanks
    -->

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Understood. Animate has been the cause of several issues. The good news is that it does seem to be working correct in 4.1.1
    http://jsfiddle.net/mgWNX/

    I strongly recommend moving to 4.1.2. There were many issues with 4.07.
    You may have some initial hurdles, but it is well worth the move.

    Scott.
    -->

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    1
    adriand_hbe is on a distinguished road

      0  

    Default


    That's good to know Scott.

    I'll get the upgrade planned here on our end.

    Thanks again!
    -->

Thread Participants: 1

Tags for this Thread