jQuery UI Widgets Forums Chart show absolute values, is it possible?

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

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

  • nklapper
    Participant

    Is it possible to show absolute values, along with percentages, on a pie chart?

    For example: slice(1) is 15% of a total pie of absolute value 200. Is there a way to also display the absolute value of slice(1) as 30? Either in the series displayText or perhaps the legend text?

    Thanks!


    Dimitar
    Participant

    Hello nklapper,

    This can be achieved using formatFunction, as shown in the following example. We hope it is helpful to you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var sampleData = [{ name: 'a', value: 30 }, { name: 'b', value: 170 }];
                // prepare chart data as an array
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name' },
                        { name: 'value' }
                    ],
                    localdata: sampleData
                };
    
                var total = 0;
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function (data) {
                        for (var i = 0; i < data.length; i++) {
                            total += data[i].value;
                        }
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Desktop browsers share",
                    description: "(source: wikipedia.org)",
                    enableAnimations: true,
                    showLegend: false,
                    showBorderLine: true,
                    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: 'scheme02',
                    seriesGroups:
                        [
                            {
                                type: 'pie',
                                showLabels: true,
                                series:
                                    [
                                        {
                                            dataField: 'value',
                                            displayText: 'name',
                                            labelRadius: 120,
                                            initialAngle: 15,
                                            radius: 170,
                                            centerOffset: 0,
                                            formatFunction: function (value, a, b, c) {
                                                var percentage = value * 100 / total;
                                                return 'Value: ' + value + ' (' + percentage + '%)';
                                            }
                                        }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.