Pie Chart section label to show John: 8000(20%) - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, jqxChart, percent, pie

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 5 months ago.

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

Author

Pie Chart section label to show John: 8000(20%) Posts

April 23, 2013 at 10:43 am Pie Chart section label to show John: 8000(20%) #19810

archana

Member

Hello Support,

Pie section shows value of the section, when show labels is true and percentage if it is specified in formatSettings.

On mouseover or tooltip I can see John:8000.

I want to show it all together and also the name of the series in the label besides the pie section.

presently it shows just 8000, I want to show it like John: 8000(20%)

How can I acheive this?

April 24, 2013 at 5:27 am Pie Chart section label to show John: 8000(20%) #19872

Dimitar

Participant

Hello archana,

Here is the solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <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 () {
            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Name' },
                    { name: 'Value', type: "number" }
                ],
                url: 'sample.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            $.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#ffff00', '#ff0000', '#ccffff'] });
            var sumValue = 0;
            $.each(dataAdapter.records, function () {
                var current = this;
                sumValue += current.Value;
            });
            // prepare jqxChart settings
            var settings = {
                title: "Items",
                enableAnimations: true,
                showLegend: false,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'myScheme',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Value',
                                        displayText: 'Name',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatFunction: function (value) {
                                            return (value / sumValue * 100).toFixed(2) + "%";
                                        },
                                        toolTipFormatFunction: function (value) {
                                            return value + " (" + (value / sumValue * 100).toFixed(2) + "%)";
                                        }
                                    }
                                ]
                        }
                    ]
            };
            // 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>

and here is the contents of the file sample.txt:

John, 8000
Paul, 30000
Luke, 2000

Best Regards,
Dimitar

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.