How to add array to JQWidget pie chart?

Question

I am trying to use a JQWidget pie chart. The initial example is in a text file, but I would like to use my own values in the chart. I have 4 sections (A,B,C,Unknown) that will add up to 100 to create the pie chart.

Category A has a value of APercent

Category B has a value of BPercent

Category C has a value of CPercent

Category Unknown has a value of UKPercent

I am stuck trying to add all of the values to the pie chart. Currently my chart loads the four legends but without names and loads only one of the categories.

 var bigPie = [];


       bigPie.push({
         A: APercent
        });
       bigPie.push({
         B: BPercent
        });
       bigPie.push({
         C: CPercent
        });
       bigPie.push({
         Unknown: UKPercent
        });





$(document).ready(function () {

 // prepare chart data as an array
          // prepare jqxChart settings
            var settings = {
                title: "Information",
                description: "Legs",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: true,
                legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: bigPie,

                colorScheme: 'scheme03',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: ‘A',
                                        displayText: ‘%',
                                        labelRadius: 170,
                                        initialAngle: 15,
                                        radius: 145,
                                        centerOffset: 0,
                                        formatFunction: function (value) {
                                            if (isNaN(value))
                                                return value;
                                            return parseFloat(value) + '%';
                                        },
                                    }
                                ]
                        }
                    ]
            };

Any help or suggestions would be appreciated. Thank you in advance. If I am not clear or too vague about something, then please let me know. Thank you again!

Answer 1

first, your array must have objects which has 2 properties at least. one for the label (A,B,C,D in your case) and the other for the value (APercent,BPercent,CPercent,UKPercent in your case) it looks like this..

var bigPieTobe = [
    {category:"A", percent: 20}
    , {category:"B", percent: 30}
    , {category:"C", percent: 40}
    , {category:"Unknown", percent: 10}
];

second, you must tell jqxChart which property is category and which is value.

           dataField: 'percent',
            displayText: 'category',

full source code would be like this...

// prepare chart data as an array
var bigPieTobe = [
    {category:"A", percent: 20}
    , {category:"B", percent: 30}
    , {category:"C", percent: 40}
    , {category:"Unknown", percent: 10}
];

// prepare jqxChart settings
var settings = {
    title: "Information",
    description: "Legs",
    enableAnimations: true,
    showLegend: true,
    showBorderLine: true,
    legendLayout: { left: 700, top: 160, width: 300, height: 200, flow: 'vertical' },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: bigPieTobe,

    colorScheme: 'scheme03',
    seriesGroups:
    [
        {
            type: 'pie',
            showLabels: true,
            series:
            [
                {
                    dataField: 'percent',
                    displayText: 'category',
                    labelRadius: 170,
                    initialAngle: 15,
                    radius: 145,
                    centerOffset: 0,
                    formatFunction: function (value) {
                        if (isNaN(value))
                            return value;
                        return parseFloat(value) + '%';
                    }
                }
            ]
        }
    ]
};
$("#jqxChart").jqxChart(settings);

you can see the result here http://jsfiddle.net/znwua337/1/