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
    37
    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
    37
    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