Pie Graph Generator: Values of >180 degrees are incorrect?

Started by gretty, Jan 10 2012 12:46 AM

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

You cannot reply to this topic

2 replies to this topic

#1 gretty Members - Reputation: 148

Like

0Likes

Like

Posted 10 January 2012 - 12:46 AM

Hello

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>

Back to top

Sponsor:

#2 RulerOfNothing Members - Reputation: 815

Like

1Likes

Like

Posted 10 January 2012 - 03:11 AM

Firstly, your program doesn't seem to work for angles less than 180 degrees either. I note that if you put the following:

	var rad  = Math.PI * deg / 180;
	var r	= diameter / 2;
	var x	= r * Math.sin(rad);
	var y	= r * Math.cos(rad);
	var midX = diameter;
	var midY = diameter;
	   x = midX + x;
	   y = midY - y;
	return {mX: x, mY: y};

to replace the current body of the resolveToPoint function, and remove the dependence of the arc endpoint on the angle, then the two lines coming from the centre of the pie graph are in the right spot, though the rest of the code has trouble putting the body of the pie graph in the right spot if the angle is between 90 and 180 degrees or 270 and 360 degrees.

Back to top

#3 gretty Members - Reputation: 148

Like

0Likes

Like

Posted 10 January 2012 - 03:55 AM

Thanks man

Its working now, I struggle soooo much with maths for a programmer

PS heres the new code to display values > 180 correctly now

function resolveToPoint( /*int*/ deg, /*int*/ diameter )
{
    var rad  = Math.PI * deg / 180;
    var r   = diameter / 2;
    var x   = r * Math.sin(rad);
    var y   = r * Math.cos(rad);
    var midX = diameter;
    var midY = diameter;
   x = midX + x;
   y = midY - y;
    return {mX: x, mY: y};
}

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

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

Back to top

Back to General Programming

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.