Home/ Questions/Q 7058821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:09:30+00:00

I have made a very simple Pie Graph generator using Javascript & SVG graphics.

  • 0

I have made a very simple Pie Graph generator using Javascript & SVG graphics. You just enter the angle of the pie graph you want then click the button.

My Problem: It generates graphs that are too big for the angles 100 degrees, 180 degrees & many others. It does generate the correct pie for the angle 277. For an angle such as 180 which should be a half circle it shows a pie of 270 degrees for some reason.

Whats wrong with my simple algorithm that leads to the wrong pie shapes/values?

The JSFiddle is here (for some reason the JSFiddle wont update but if you copy the HTML below it all works): http://jsfiddle.net/mabg3/1/

<html>
<head>
    <script type="text/javascript">
    <!--
function createPieGraph()
{
   var angle    = parseInt(document.getElementById("angleVal").value, 10);
   var path     = document.getElementById("pie"); //document.createElement("path");
   var diameter = 200
   var rad      = diameter/2;
   var point    = resolveToPoint(angle, diameter);
   var d        = "M"+diameter+","+diameter+" L"+point.mX+","+point.mY+" A"+rad+","+rad+" "+determineDisplayType(angle)+" "+determineArcEnd(angle, diameter, rad)+" z";
   path.setAttribute("d", d);
}

function resolveToPoint( /*int*/ deg, /*int*/ diameter ) 
{
   var rad  = Math.PI * deg / 180;
   var r    = diameter / 2;
   var x    = r * Math.cos(rad);
   var y    = r * Math.sin(rad);
   var midX = diameter;
   var midY = diameter;

   if (deg <= 90)
   {
      console.log("1");
      x = midX + x;
      y = midY - y;
   }
   else if (deg <= 180)
   {
      console.log("2");
      x = midX + x;
      y = midY + y;
   }
   else if (deg <= 270)
   {
      console.log("3");
      x = midX - x;
      y = midY + y;
   }
   else if (deg <= 360)
   {
      console.log("4");
      x = midX - x;
      y = Math.abs(y);
   }

   return {mX: x, mY: y};
}

function determineDisplayType( /*int*/ deg )
{
   if (deg <= 90)
      return "0 0,0";
   else if (deg <= 180)
      return "0 1,0";
   else if (deg <= 270)
      return "0 1,0";
   else if (deg <= 360)
      return "1 1,1";

   return "0 0,0";
}

function determineArcEnd( /*int*/ deg, /*int*/ diameter, /*int*/ rad )
{
   if (deg >= 270)
      return ""+rad+","+diameter;

   return ""+diameter+","+rad;
}
    -->
    </script>
</head> 
<body>

    <svg id="main" width="400" height="400" style="background-color: red;">
        <path id="pie" fill="blue" stroke="white"></path>
    </svg>

    <input type="text" id="angleVal" value="Enter angle"></input>
    <input type="button" onclick="createPieGraph();" value="Show Pie Graph"></input>
</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/mabg3/11/

    Firstly, the fiddle didn’t work because your javascript was being wrapped, but your inline click handler was looking for a global function. I unwrapped it (see the drop box on the left), which isn’t a good idea for real code, but solves the problem easily enough in this example.

    I also made the code much shorter. Not sure what all those functions were for; the only flag that needs changing is the large-arc if the angle is more than half the circle. The sweep flag is constant because we always render in one orientation.

    My code can be easily improved and generalised (you can handle negative and >360 angles differently, you can make the initial angle different, etc.), but it works well enough.

    • 0