1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    9
    Vote Rating
    0
    adisharoon is on a distinguished road

      0  

    Default Unanswered: What data does the pie chart expect for angleField & lengthField?

    Unanswered: What data does the pie chart expect for angleField & lengthField?


    I am trying to create a pie chart, but I can't figure out from the documentation what kind of data Extjs expects. The raw data I am using is a list of names and corresponding numbers; I want the chart to show how many names have a given number.

    The example in shows a Ext.chart.series.Pie config option named "field", but this option doesn't appear in the API. I see in the source code that "field" is equivalent to the "angleField" option, but I can't determine what angleField and lengthField really do.

    Does angleField expect an actual angle, as in an integer less that 360? Is the lengthField in pixels? I had assumed that I would be able to just use the counts of stuff being charted, or at worst a percentage, instead of having to calculate angles and length.

    Of course, I haven't actually tried, yet. I thought the confusing documentation was enough of an issue to raise. I will start plugging in numbers and see what happens next.

    Alec

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    lengthField is the field that will tell the pie the length of the slice, basically the radius fo the circle. Look at this example:

    Code:
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'length'],
            data: [
                { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13, 'length' : 2 },
                { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3,  'length' : 2 },
                { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7,  'length' : 2 },
                { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23, 'length' : 2 },
                { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33, 'length' : 5 }
            ]
        });
    
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: store,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data1',
                showInLegend: true,
                lengthField : 'length',
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        // calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) {
                            total += rec.get('data1');
                        });
                        this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });
    angleField is the field that will tell the pie the angles of the slice. I would be cautious of this one as the internal will calculate this for you but if you change it, it can dramatically change the look of your pie chart. Here is an example:

    Code:
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'angle'],
            data: [
                { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13, 'angle' : 2 },
                { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3,  'angle' : 2 },
                { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7,  'angle' : 2 },
                { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23, 'angle' : 2 },
                { 'name': 'metric five',  'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33, 'angle' : 5 }
            ]
        });
    
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: store,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                field: 'data1',
                showInLegend: true,
                angleField : 'angle',
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        // calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) {
                            total += rec.get('data1');
                        });
                        this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });
    Now comment out the angleField in red and see what the pie should look like.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    9
    Vote Rating
    0
    adisharoon is on a distinguished road

      0  

    Default What about the "field" config option?

    What about the "field" config option?


    Thanks for the reply.

    I notice that in both examples you have a "field" config option with a value of "data1". As far as I can tell, this is not a config option listed in the API browser for either Ext.chart.series.Series or Ext.chart.series.Pie. The "angleField" config option, however, is listed as "required", which does not seem to be the case.

    It looks like Ext JS treats the value of the field provided as in the "field" option in each record as a portion of a total equal to the sum of each value. That works, I just need to calculate the counts of the raw data on the back end.

    I haven't tried out your examples yet, but my assumption is that the hidden "field" option, then, is all that's required, but it can be optionally overridden with the "angleField" option. Then, the lengthField option can optionally be applied, as well.

    It would be nice if the "field" option was listed in the API browser, the angleField option was not erroneously listed as "required", and the relationship between these config options made explicit.

    Alec

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,506
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    field and xField are both aliases for angleField. The docs for 4.1 have already been updated to document this.

Thread Participants: 2

Tags for this Thread