Pie chart @ 100% value exhibiting issues - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, javascript chart, jquery chart, Pie chart

This topic contains 8 replies, has 4 voices, and was last updated by Peter Stoev 9 years ago.

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

Author

Pie chart @ 100% value exhibiting issues Posts
June 14, 2012 at 8:01 pm Pie chart @ 100% value exhibiting issues #4944

robrichard
Member

Hi guys, great tools!

I ran into an issue with the pie chart where I have a number of items to chart, but let’s say I only have 1 item to chart – that is obviously going to be 100% (color the full pie with one color). Here is what I have found:

Firefox 12.0 it works ok, but it leaves a barely noticeable line at the start radius.
IE9 (non-compatibility mode), it animates the circle but then the circle goes away and only the line at the start radius remains.
IE9 (compatibility mode), it does exactly what FireFox does.
In Chrome 19, it animates the circle but then the circle goes away and only the line at the start radius remains.

Obviously a pie chart with 100% is unusual, but the case does indeed happen (particularly if you are displaying and updating charts real time as data rolls in).

June 15, 2012 at 4:42 am Pie chart @ 100% value exhibiting issues #4956

Peter Stoev
Keymaster

Hi robrichard,

Thank you for the feedback!

We reproduced the reported issue and will fix it in the next build.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 8, 2012 at 10:44 am Pie chart @ 100% value exhibiting issues #5754

adubovikov
Member

Hello,

We are also affected by the same bug, unfortunately Pie Chart is pretty much unusable in production while unable to deal with 0% and 100% sets. Are there any updates on a possible release date for the next build?

As a side note, it would also be very useful to be able to control the SVG outer border/borderwidth of the Chart widgets and/or disable it like for other widgets (currently the external SVG RECT seems hard-locked to stroke-width:1 despite its settings)

Thanks,

Homer Team

July 8, 2012 at 4:28 pm Pie chart @ 100% value exhibiting issues #5758

Peter Stoev
Keymaster

Hi adubovikov,

Please, provide the following information when you report an issue regarding our products?

– jQuery version, jQWidgets version, device type(PC, Mobile), browser name and version.
– Please, provide step by step instructions on how to reproduce the reported issue.

If you use the latest version of jQWidgets – ver. 2.2.1, please send a sample which reproduces the issue. If you use an older version, then upgrade to the latest one and try to reproduce the issue again.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 11, 2012 at 5:53 pm Pie chart @ 100% value exhibiting issues #5838

adubovikov
Member

Peter,

The same issue is as already reported above and we experience it in the same described terms, you also state yourself above its was reproduced and to be fixed in the forthcoming release. This is why we did not open a new ticket/topic for it in an effort not to clutter up the forum – I hope it makes sense – consider it an update request on this topic, but we will add some detail for sure.

Thanks,

Homer Team

July 11, 2012 at 8:25 pm Pie chart @ 100% value exhibiting issues #5854

Peter Stoev
Keymaster

The issue was reported for a previous version. That is why I asked you about the version of jQWidgets that you use. I did not understand from your answer whether you use jQWidgets 2.2.1 or a previous version. Thanks in advance.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 11, 2012 at 9:24 pm Pie chart @ 100% value exhibiting issues #5857
Peter Stoev
Keymaster
In addition to my previous post. I’ve prepared a sample with jqxChart and a 100% pie. I am using jQWidgets 2.2.1.

Here’s a screenshot: .

The source code of the sample is:
```
<!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.7.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: 'Browser' },
                    { name: 'Share' }
                ],
                url: '../sampledata/desktop_browsers_share_dec2011.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
            var settings = {
                title: "Desktop browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                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: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: false,
                            series:
                                [
                                    { 
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // 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>
```
The loaded data is:

Internet Explorer, 33.3

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
October 5, 2015 at 4:32 am Pie chart @ 100% value exhibiting issues #76414

apurva
Participant

Hello Peter,

I am using same code as yours but it is still showing radius line,please help.and also is there any way to define pie chart radius dynamically.

October 5, 2015 at 6:28 am Pie chart @ 100% value exhibiting issues #76419

Peter Stoev
Keymaster

Hi apurva,

If there is some issue, we will fix it for a future release. We need time to investigate whether this one has reoccurred after rewriting the Chart’s drawing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.