Pie percentage and values - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, jqxChart, pie

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

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

Author

Pie percentage and values Posts

February 4, 2013 at 10:39 am Pie percentage and values #14624

marchip

Member

It’s possible to set a Pie chart to view the value in percentage mode in the chart and in real value in the tooltip.

Example source

a:300

b:400

c:1200

I would a pie chart with the percentage of real value a:16%, b:21%, c:63%, but in a tooltip i would see a:300, b:400, c:1200

It’s possible?

Thanks

February 5, 2013 at 6:59 am Pie percentage and values #14708

Dimitar

Participant

Hello marchip,

Here is an example:

<!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 () {
            // 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;
                                        }
                                    }
                                ]
                        }
                    ]
            };
            // 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 data in sample.txt:

a, 300
b, 400
c, 1200

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.