Results 1 to 6 of 6

Thread: Pie Chart showing line for 0% or 100%

  1. #1
    Sencha Premium User
    Join Date
    Dec 2013
    Location
    Panama City Beach, FL
    Posts
    4

    Default Pie Chart showing line for 0% or 100%

    This issue is supposed to be fixed in 6.5.0, bug # EXTJS-17104.

    Is there a fix i can apply to version 5.1?

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    There wasn't an override on the ticket so I threw this together from the pull request. If it works for you, don't forget to remove it when you upgrade.

    UPDATE: Use the override code on this post instead.
    Code:
    Ext.define('overrides.draw.sprite.Sector', {
        override: 'Ext.draw.sprite.Sector',
        // EXTJS-17104 - When a pie chart displays only one slice, the border of the slice creates a vertical line
    
        updatePath: function (path, attr) {
            var startAngle = Math.min(attr.startAngle, attr.endAngle),
                endAngle = Math.max(attr.startAngle, attr.endAngle),
                midAngle = this.midAngle = (startAngle + endAngle) * 0.5,
                fullPie = Math.abs(endAngle - startAngle) === Ext.draw.Draw.pi2,
                margin = attr.margin,
                centerX = attr.centerX,
                centerY = attr.centerY,
                startRho = Math.min(attr.startRho, attr.endRho),
                endRho = Math.max(attr.startRho, attr.endRho);
    
    
            if (margin) {
                centerX += margin * Math.cos(midAngle);
                centerY += margin * Math.sin(midAngle);
            }
            if (!fullPie) {
                path.moveTo(centerX + startRho * Math.cos(startAngle), centerY + startRho * Math.sin(startAngle));
                path.lineTo(centerX + endRho * Math.cos(startAngle), centerY + endRho * Math.sin(startAngle));
            }
            path.arc(centerX, centerY, endRho, startAngle, endAngle, false);
            path[fullPie ? 'moveTo' : 'lineTo'](centerX + startRho * Math.cos(endAngle), centerY + startRho * Math.sin(endAngle));
            path.arc(centerX, centerY, startRho, endAngle, startAngle, true);
        }
    });
    Any code delivered as a result of the subject support incident is delivered as is and is not officially supported. Any such code is subject to the standard license agreement between the customer and Sencha. It is the customer's responsibility to implement and maintain the workaround/override. In addition, the customer will be responsible for removing the workaround or override at the proper time when the appropriate official release is available.

    BY USING THIS CODE YOU AGREE THAT IT IS DELIVERED "AS IS", WITH NO WARRANTIES WHATSOEVER, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.

  3. #3
    Sencha Premium User
    Join Date
    Dec 2013
    Location
    Panama City Beach, FL
    Posts
    4

    Default

    Thank you.

  4. #4
    Sencha Premium User
    Join Date
    Dec 2013
    Location
    Panama City Beach, FL
    Posts
    4

    Default

    It is working now but i had to make a couple changes to 'fullPie'.

    When i first tested the override it always returned 'false' for 'fullPie' even though i only had one 100% slice.
    Then i noticed that the value for 'Math.abs(endAngle - startAngle)' vs 'Ext.draw.Draw.pi2' is off by 1 at the 15th decimal place (6.283185307179587 vs 6.283185307179586).
    Hardcoding the new value fixed the 100% slice but when i had 2 slices, 100% and 0%, i still ended up with the 0% line.
    Adding a check for 0 as well as 6.283185307179587 seems to work for all cases, even when i have multiple slices with some being 0.

    Here is the modified line.....
    fullPie = ((Math.abs(endAngle - startAngle) === 6.283185307179587) || (Math.abs(endAngle - startAngle) === 0)),

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Likely a difference between 5.x and 6.x. Thanks for sharing your findings and the line needing modification!

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    You were correct about that line. Another fix was checked in last month, consisting of a change to that same line:
    Code:
    fullPie = Ext.Number.isEqual(Math.abs(endAngle - startAngle), Ext.draw.Draw.pi2, 1e-10),
    Here's the full override:
    Code:
    Ext.define('overrides.draw.sprite.Sector', {
        override: 'Ext.draw.sprite.Sector',
        // EXTJS-17104 - When a pie chart displays only one slice, the border of the slice creates a vertical line
    
    
        updatePath: function (path, attr) {
            var startAngle = Math.min(attr.startAngle, attr.endAngle),
                endAngle = Math.max(attr.startAngle, attr.endAngle),
                midAngle = this.midAngle = (startAngle + endAngle) * 0.5,
                fullPie = Ext.Number.isEqual(Math.abs(endAngle - startAngle), Ext.draw.Draw.pi2, 1e-10),
                margin = attr.margin,
                centerX = attr.centerX,
                centerY = attr.centerY,
                startRho = Math.min(attr.startRho, attr.endRho),
                endRho = Math.max(attr.startRho, attr.endRho);
    
    
    
    
            if (margin) {
                centerX += margin * Math.cos(midAngle);
                centerY += margin * Math.sin(midAngle);
            }
            if (!fullPie) {
                path.moveTo(centerX + startRho * Math.cos(startAngle), centerY + startRho * Math.sin(startAngle));
                path.lineTo(centerX + endRho * Math.cos(startAngle), centerY + endRho * Math.sin(startAngle));
            }
            path.arc(centerX, centerY, endRho, startAngle, endAngle, false);
            path[fullPie ? 'moveTo' : 'lineTo'](centerX + startRho * Math.cos(endAngle), centerY + startRho * Math.sin(endAngle));
            path.arc(centerX, centerY, startRho, endAngle, startAngle, true);
        }
    });
    Any code delivered as a result of the subject support incident is delivered as is and is not officially supported. Any such code is subject to the standard license agreement between the customer and Sencha. It is the customer's responsibility to implement and maintain the workaround/override. In addition, the customer will be responsible for removing the workaround or override at the proper time when the appropriate official release is available.


    BY USING THIS CODE YOU AGREE THAT IT IS DELIVERED "AS IS", WITH NO WARRANTIES WHATSOEVER, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.

Similar Threads

  1. Labels in Line Chart not showing up.
    By dillu5c5 in forum Ext: Q&A
    Replies: 1
    Last Post: 7 Oct 2014, 8:18 AM
  2. Line Chart only showing straight linear line
    By mbbaker in forum Ext: Discussion
    Replies: 9
    Last Post: 2 Jul 2014, 6:52 AM
  3. Line chart isn't showing
    By zwikske in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 4 Feb 2014, 3:49 AM
  4. Line chart not showing line
    By bgeiger in forum Sencha Architect 2.x: Help & Discussions
    Replies: 1
    Last Post: 24 Jul 2012, 12:32 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •