Extra lines are showing up in donut charts

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Zsolt on 25th July 2017
Hi Richard,

Sometimes when I drawing a donut, there are showing one or more extra lines through the donut as you can see on this image:
ibb.co/eSLcUk

Do you have an idea how can I fix it?
Thanks,

Best regards,
Zsolt
Posted by Richard on 25th July 2017
Hi there,

I'm not seeing them in either the SVG or canvas Pie charts as you see here:

dev.rgraph.net/fiddle/view.html/a-pir-chart-with-spurious-lines

Can you send me the code that you're using?



Richard
Posted by Zsolt on 25th July 2017
Hi,

See the code below
if you start to "playing" with the div resize you will see the extra lines.
It's very random, so you may have to resize 20-30 times (sometimes doing without resizing, but this is the fastest way).
The best way to get the lines resizing with the bottom-right corner in very small steps.
I tested on chrome and ff, the ff much less affected.


Thanks,
Zsolt

<!DOCTYPE html>
<html>
     <head>
         <title>RGraph Test</title>
         <script src="/js/jquery/jquery-3.1.1.min.js"></script>
         <script src="/js/jquery/jquery-ui-1.12.1.custom.min.js"></script>
         <script src="/js/rgraph/RGraph.common.core.js"></script>
         <script src="/js/rgraph/RGraph.common.dynamic.js"></script>
         <script src="/js/rgraph/RGraph.common.annotate.js"></script>
         <script src="/js/rgraph/RGraph.common.context.js"></script>
         <script src="/js/rgraph/RGraph.common.key.js"></script>
         <script src="/js/rgraph/RGraph.common.resizing.js"></script>
         <script src="/js/rgraph/RGraph.common.tooltips.js"></script>
         <script src="/js/rgraph/RGraph.common.effects.js"></script>
         <script src="/js/rgraph/RGraph.common.zoom.js"></script>
         <script src="/js/rgraph/RGraph.drawing.rect.js"></script>
         <script src="/js/rgraph/RGraph.bar.js"></script>
         <script src="/js/rgraph/RGraph.hbar.js"></script>
         <script src="/js/rgraph/RGraph.line.js"></script>
         <script src="/js/rgraph/RGraph.pie.js"></script>
         <script src="/js/rgraph/RGraph.drawing.text.js"></script>
         <script src="/js/rgraph/RGraph.drawing.xaxis.js"></script>
         <script src="/js/rgraph/RGraph.hprogress.js"></script>
        
         <script>
         var inp =
             {
                 data : [16949, 2994, 3214, 5604, 1937],
                 colours : ['#3366cc','#dc3912','#ff9900','#109618','#990099']
             };

             $(window).on('load', function(){

                 $('.content').resizable();
                
                 showChart(inp);
                
                 $('.content').on('resizestop', function()
                 {
                     showChart(inp);
                 });

             });
            
             function showChart(inp)
             {
                 var actualWidth = $('.content').width();
                 var actualHeight = $('.content').height();
                
                 var data = inp.data;
                 var colours = inp.colours;
    
                 var canvasObj = $('#cvs');
                 var canvas = document.getElementById('cvs');
    
                 canvasObj.ready(function()
                 {
                     RGraph.reset(canvas);
                     canvas.width = actualWidth;
                     canvas.height = actualHeight;
    
                     var pie = new RGraph.Pie({
                         id: 'cvs',
                         data: data,
                         options: {
                             variant: 'donut',
                             linewidth: 2,
                             exploded: 0,
                             strokestyle: 'rgba(0,0,0,0)',
                             shadowOffsetx: 2,
                             shadowOffsety: 2,
                             shadow: false,
                             colors: colours,
                             variantDonutWidth: 30
                         }
                     })
                     .on('beforedraw', function(obj)
                     {
                         RGraph.clear(obj.canvas, 'rgb(35, 31, 32)');
                     })
                     .draw();
    
                     pie.set('chart.variantDonutWidth', pie.radius / 4);
    
                     RGraph.redraw();
                 });
             }
         </script>
        
         <link rel="stylesheet" type="text/css" href="/styles/jquery/jquery-ui-1.12.1.custom.min.css"></link>

         <style>
             .content {
                 width: 300px;
                 height: 300px;
                 border: 1px solid #000000;
                 background: rgb(35, 31, 32);
             }
         </style>
     </head>
     <body>
         <div class="content">
             <canvas id="cvs" width="" height="">[No canvas support]</canvas>
         </div>
     </body>
</html>



Posted by Richard on 25th July 2017
Hi there,

You could try using the RGraph resizing features - I can't see any spurious lines when I use that.

www.rgraph.net/fiddle/view.html/a-pir-chart-with-spurious-lines


Richard
Posted by Zsolt on 26th July 2017
Hi,

thanks for your quick answer.
The resizing feature isn't good for me, because I'm using resizable divs (manually and automatically) with other responsive contents.

Eventually I found what caused the problem.
You cut the inner of the circle segment by segment. When I modified your code and put the cut in the draw function, it solved the problem.
Maybe not the best, but it's a working fix for me.

mod in the draw() function:
....
                 action === 0 ? co.fill() : co.stroke();
             }
         }

// My code begin
         if (prop['chart.variant'] == 'donut')
         {
             co.beginPath();
             co.fillStyle = prop['chart.background.color'];
             co.arc(this.centerx + x, this.centery + y, this.radius - prop['chart.variant.donut.width'], 0, 2 * Math.PI, 0);
             co.closePath();
             co.fill();
         }
// My code end

         if (prop['chart.labels.sticks']) {
....

mod in the drawSegment() function:
....
// commented this line only
         //co.arc(this.centerx + x, this.centery + y, r, startAngle, endAngle, 0);
....

Add a reply




« Back to message list