Home/ Questions/Q 8083605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T17:31:34+00:00

I have a problem, please give me some suggestion ? My problem is :

  • 0

I have a problem, please give me some suggestion ? My problem is : Drawing 3D Pie Chart and When you click and move to a point in Pie chart, the portion will display from the beginning point (at 12 o’clock direction) to the point that mouse are released.

Please give me some idea, i’m not good at Math, and do not know how to calculate the angel where mouse released from a point and drawing portion from the given point to point where mouse released.

Thanks in advance ! Sorry for my bad english, if it make you’re hard to understand what i’m trying to say. Thanks again !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Old question, but sounds like a fun problem. I’m sticking with 2D at this point. If you require 3D, you can start by learning this and then figuring out how to turn it into 3D space, which is obviously much more difficult.

    You want to find the angle of the pie slice formed by an arc starting at 12 o’clock (pi/2) and ending at the radius which bisects the mouse click and the vertex. Then use canvas to fill that region.

    what you want

    The math –

    Find this angle by constructing a right triangle:

    Side 1 (y): Vertically from the circle’s center (vertex) to the click’s y position

    Side 2 (x): Horizontally from the click’s y position to the click’s x position

    Side 3: Diagonally from the vertex to the x position of the click (this is the hypotenuse, in red, and does not need to be known)

    get x and y

    Remember, mouse position is counted left to right and top to bottom.

    See how the length of the side x is equal to the click’s x position minus the radius of the circle?

    Next, use the cotangent (adjacent side / opposite side), and subtract it from pi (180 degrees) to find the angle of the shaded region.

    use cotan

    As you can see, in some quadrants you will add pi, and in some you won’t, but that’s essentially how you find the angle of your slice.

    Also, you have to adjust 1/4 of the way around the circle (1/2 pi) because you’re starting at 1/2 pi (90 degrees).

    The Code –

    It’s a jQuery plugin –

    https://raw.github.com/thilosavage/pielighter/master/pielighter.js

    The diameter of the circle is set by the size property of the canvas element.

    i.e.
    <canvas id='myPIe' size='400'></canvas>
    will create your circle 400px wide.

    You can customize the border size, border color, and pie filling color.

    You can add callbacks for onRelease and onDrag, which are passed percent, degrees, and radians of the selected slice.

    Simple demo: http://thilosavage.com/projects/pielighter/demo-simple.php

    Full demo: http://thilosavage.com/projects/pielighter/demo-full.php

    • 0