1. #1
    Ext JS Premium Member antonye's Avatar
    Join Date
    May 2010
    Location
    London, UK
    Posts
    27
    Vote Rating
    0
    antonye is on a distinguished road

      0  

    Question Pie Chart Orientation in ExtJS vs Excel

    Pie Chart Orientation in ExtJS vs Excel


    We have an ExtJS UI which is basically a preview of data before it is saved down to an Excel file.
    The issue is due to the orientation of how the data is drawn in ExtJS compared to Excel:

    ExtJS - starts from the 3 o'clock position and draws data in an anti-clockwise direction
    Excel - starts from the 12 o'clock position and draws data in a clockwise direction.

    ExtJS.vs.Excel.png

    Unfortunately, the format of the Excel file is fixed, as it is used elsewhere in the company, so I really need to bring the display of the ExtJS pie chart in line with Excel.

    I have checked the API but cannot find anything about either the start position or orientation when drawing the chart.

    So, does anyone know how to do this, or know of a suitable alternative UX which will allow me to do this?

    Thanks!

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    Did you ever get anywhere with this?

  3. #3
    Ext JS Premium Member antonye's Avatar
    Join Date
    May 2010
    Location
    London, UK
    Posts
    27
    Vote Rating
    0
    antonye is on a distinguished road

      0  

    Default


    Yes, we did manage to solve it!
    I think we did something with adding a dummy value to get the right position, then overwriting the array with the correct values and it worked fine.

    I'll see if I can dig out the code for you and give an example.

  4. #4
    Ext JS Premium Member antonye's Avatar
    Join Date
    May 2010
    Location
    London, UK
    Posts
    27
    Vote Rating
    0
    antonye is on a distinguished road

      0  

    Thumbs up


    I've just checked through our code base and it was actually a bit easier than that!

    There are two properties that you need to set, neither of which are in the docs.

    degree: sets the start point for the pie chart in degrees - we set this to zero
    direction: set which direction the pie chart should populate - we set this to "clockwise"

    From our codebase we actually set the direction twice as we're creating reuseable components rather than directly on the page, but you get the idea...

    Code:
    portfolio.ui.components.cSectorGraph = Ext.extend(Ext.Panel, {
        pieChartId: null,
        legendsId: null,
        originalColors: [
    			'#006f51',
    			'#e2e3e4',
    			'#c9cacc',
    			'#808284',
    			'#00a4e8',
    			'#b1e3fa',
    			'#f58025',
    			'#fbba87',
    			'#fee0c8'
    		],
    
    
        colors: [],
    
    
        constructor: function(config) {
    
    
            Ext.chart.Chart.CHART_URL = homePath + 'extjs/resources/charts.swf';
    
    
            // create internal store and load data from config   
            this.storeSectors = new Ext.data.ArrayStore({
                fields: [
    					{ name: 'Sector' },
    					{ name: 'Allocation', type: 'float' }
    				]
            });
    
    
            var parent = this;
            this.pieChartId = Ext.id();
    
    
            // create Pie Chart
            var chartPie = new Ext.chart.PieChart({
                id: this.pieChartId,
                store: this.storeSectors,
                categoryField: 'Sector',
                dataField: 'Allocation',
                extraStyle: {
                    clockwise: true,
                    legend: {
                        display: 'none',
                        padding: 0,
                        font: {
                            family: 'Tahoma',
                            size: 10
                        }
                    }
                },
                tipRenderer: function(chart, record, index) {
                    return record.data.Sector;
                },
    
    
                listeners: {
                    beforeRender: function() {
                        this.seriesStyles = { colors: parent.colors };
                    }
                }
            });
    
    
            this.legendsId = Ext.id();
            var legends = new Ext.Container({
                id: this.legendsId,
                html: legendHtml,
                listeners: {
                    afterRender: function() {
                        this.getEl().update(this.newHtml);
                    }
                }
            });
    
    
            this.degree = 0;
            this.direction = 'clockwise';
            var legendHtml = null;
    
    
            // initial load
            if (config.data) {
                legendHtml = this.LoadSectorData(config.data);
            };
    
    
            var _config = {
                id: config.id,
                parent: config.parent,
                title: config.title,
                border: config.border,
                layout: 'hbox',
                height: config.height,
                flex: config.flex,
                layoutConfig: {
                    align: 'stretch',
                    pack: 'start'
                },
                items: [
                        {
                            layout: 'fit',
                            width: 250,
                            items: legends
                        },
                        {
                            layout: 'fit',
                            flex: 1,
                            items: chartPie
                        }
                    ]
            }
    
            portfolio.ui.components.cSectorGraph.superclass.constructor.apply(this, [_config]);
    
    
        },
    
    ...
    
    }
    Hope this helps!

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    Hmmm neither of those options worked for me, but I'm in ExtJS 4.2 so maybe that's why. What I ended up doing was just duping the code for a pie series and creating my own class with modified math that put things in the correct order.

    Thanks though.

Similar Threads

  1. Pie Chart
    By Bleak in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 6 Feb 2010, 10:05 PM
  2. [ext 3.0.3] Pie chart disappear wher chart store is reloaded
    By e-tip in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 24 Nov 2009, 7:12 AM
  3. Skinning Pie Chart with ExtJs
    By nkortha in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 18 Nov 2009, 5:11 AM
  4. How can i get a pie chart with 3D display ?
    By madhu_g in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 16 Sep 2009, 1:39 AM
  5. Any Issues with Pie Chart, Please help.
    By ektanit in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 15 Jun 2009, 11:50 AM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi