jQWidgets Forums

Tagged: Pie chart, pie chart labels

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Pie chart is not displaying third share's label below the graph Please help!! Posts

February 8, 2013 at 1:54 pm Pie chart is not displaying third share's label below the graph Please help!! #14893

Zafar

Member

Hi!

My code below shows three shares but displays only two labels below the graph.

Could you please help fix me.

/*
jQWidgets v2.5.5 (2012-Nov-28)
Copyright (c) 2011-2012 jQWidgets.
License: http://jqwidgets.com/license/
*/

$(document).ready(function() {

$.fn.display3 = function(jsonArray) {

var sampleData = [

{“Browser”: “Age 18-35”, Share:450},
{“Browser”: “Age 36-55”, Share:800},
{“Browser”: “Age 56-115”, Share:600},

];

sampleData[0].Share = 980;
sampleData[1].Share = 460;
sampleData[2].Share = 300;

var source =
{
localdata: sampleData,
datafields: [
{ name: ‘Browser’ },
{ name: ‘Share’ },
],

};

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + ‘” : ‘ + error); } });

// prepare jqxChart settings

var settings = {

title: “Report 1”,
description: “(Young, Adult, and Old)”,
enableAnimations: true,
showLegend: true,
source: dataAdapter,
colorScheme: ‘scheme12’,
seriesGroups:
[
{
type: ‘pie’,
showLabels: true,
series:
[
{
dataField: ‘Share’,
displayText: ‘Browser’,
labelRadius: 100,
initialAngle: 0,
radius: 140,
centerOffset: 5,
formatSettings: { sufix: ‘ Persons’, decimalPlaces: 0 }
}
]
},

]
};
// setup the chart
$(‘#r4jqxChart3’).jqxChart(settings);

}

}); // End – $(document).ready(function(){});

Thank you!!
Zafar

February 12, 2013 at 12:04 pm Pie chart is not displaying third share's label below the graph Please help!! #15062

Peter Stoev

Keymaster

Hi Zafar,

Here’s a working sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Pie Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                var sampleData = [
                {"Browser": "Age 18-35", Share:450},
                {"Browser": "Age 36-55", Share:800},
                {"Browser": "Age 56-115", Share:600},
                ];
                sampleData[0].Share = 980;
                sampleData[1].Share = 460;
                sampleData[2].Share = 300;
                var source =
                {
                    localdata: sampleData,
                    datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                    ],
                };
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + '" : ' + error); } });
                // prepare jqxChart settings
                var settings = {
                    title: "Report 1",
                    description: "(Young, Adult, and Old)",
                enableAnimations: true,
                showLegend: true,
                source: dataAdapter,
                colorScheme: 'scheme12',
                seriesGroups:
                [
                {
                    type: 'pie',
                    showLabels: true,
                    series:
                    [
                    {
                        dataField: 'Share',
                        displayText: 'Browser',
                        labelRadius: 100,
                        initialAngle: 0,
                        radius: 140,
                        centerOffset: 5,
                        formatSettings: { sufix: ' Persons', decimalPlaces: 0 }
                    }
                    ]
                },
                ]
            };
            // setup the chart
           $("#jqxChart").jqxChart(settings);    
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.