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

[adisharoon]

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

[mitchellsimoens]

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

    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:

    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.

[adisharoon]

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

[skirtle]

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