Add label to dojo pie chart

Question

I have added code to draw pie chart from grid data. I want to add name of parameter to on chart. How could i represent this.

I want to plot pie chart area vs no of people with that that area. I am getting chart but not able to represent area name in chart. How can i achieve this.

jsfiddle link : http://jsfiddle.net/rajeevprasanna/9wG3m/

//charts
        plotPieChart();
        function plotPieChart() {
            dojo.empty("peiDiv");

            // Create the chart within it's "holding" node
            var pieChart = new dojox.charting.Chart2D("peiDiv");

            // Set the theme
            pieChart.setTheme(dojox.charting.themes.Claro);

            // Add the only/default plot
            pieChart.addPlot("default", {
                type: "Pie",
                radius: 200,
                fontColor: "black",
                labelOffset: 20,
                labels: true 
            });
       new dojox.charting.action2d.Tooltip(pieChart,"default");
           new dojox.charting.action2d.MoveSlice(pieChart,"default");

            var series = makeseries(data);

            // Add the series of data
            pieChart.addSeries("Area vs Employees", series);

            // Render the chart!
            pieChart.render();

        }

     function makeseries(data) {
            var area_counts = {};
            for (var i = 0, ii = data.items.length; i<ii; i++) {
                var d = data.items[i],
                    area = d['Area'],
                    count = area_counts[area] || 0; 
                area_counts[area] = count + 1;
            }
            return Object.keys(area_counts).map(function(area) {
                return {x: area, y: area_counts[area]};
            });
        }


var data = {
    identifier: 'id',
    label: 'id',
    items: []
};

var data_list = [
        { "Name":"Africa", "Age": 10,  "Gender":"Male", "Area" : "Java", "Experience": 1},
        { "Name":"Asia1",  "Age": 45,  "Gender":"Male", "Area" : "Pel",      "Experience": 3},
        { "Name":"Asia2",  "Age": 35,  "Gender":"Male", "Area" : "Java", "Experience":2},
    { "Name":"Asia3",  "Age": 23,  "Gender":"Male", "Area" : "C",    "Experience":1},  
    { "Name":"Asia4",  "Age": 78,  "Gender":"Male", "Area" : "C++", "Experience":4}
];

var i, len;
for(i=0, len = data_list.length; i < len; ++i){
    data.items.push(dojo.mixin({'id': i + 1 }, data_list[i % len]));
}

var layout = [
    { field: "id", datatype:"number"}, 
    { field: "Name",       name: "Name",       width: 10, editable: true, datatype:"string" },
    { field: "Age",        name: "Age",        width: 10, editable: true, datatype:"number"  },
    { field: "Gender",     name: "Gender",     width: 10, editable: true, type: "dojox.grid.cells.Select", options: [ "Male", "Female"]}, 
    { field: "Area",       name: "Area",       width: 10, editable: true, datatype:"string"   },
    { field: "Experience", name: "Experience", width: 10, editable: true, datatype:"number"  }        
];

// In case you've close the filter bar, here's a way to bring it up.
function showFilterBar(){
    dijit.byId('grid').showFilterBar(true);
}

Answer 1

I got the answer by tweaking series function like this : added text:fieldValue

function makeseries(data) {
            var area_counts = {};
            for (var i = 0, ii = data.items.length; i<ii; i++) {
                var d = data.items[i],
                    area = d['Area'],
                    count = area_counts[area] || 0; 
                area_counts[area] = count + 1;
            }
            return Object.keys(area_counts).map(function(area) {
                return {x: area, y: area_counts[area], **text: area**};
            });
        }