Jump to content

Best way to do graphics by lines, arcs, angles and filling the inside.


Recommended Posts

I know I know..pie charts... all over the internet... use this plug in, use that library...


Well, I'm trying to create an info graphic kind of pie chart, so it needs to be done a certain way.


Imagine a pie chart with only 2 data values.


Those that like the color red = 75%

Those that like the color white = 25%


You can image what the pie chart would look like,  3/4th's of the circle will be red, and a quarter of it white.


I want to create pie charts like that.  Only change the "radius" distance.


In the above example, the red will be a transparency key. and the white will be a solid color.  Meaning that when I am done creating the image that is the pie chart, half will be transparent, the other a solid color so I can see whats under the transparent part and do some neat layering.   


I need to be able to output this pie chart as an image to an HTML element.  It doesn't need to be saved anywhere, just be inserted into this element, though it may end up being inserted into a pdf file.


So, I need to know how to create 2 lines, both coming from a center point X and Y, each going a radius as Z distance away from the center point.


and then I need to connect those 2 lines with an arc, and fill it with a color.


My question is, what is the best way to handle this?  is there a better way to do it using PHP?  Javascript?  maybe even HTML5 ?  Remember, that I need to be able to make a color transparent, easily.  


While I don't have the math now, I did it 15 years ago in middle school....soooo I'm sure I'll figure that out! =D


Thanks so much in advanced!


Link to comment
Share on other sites

  • 1 month later...


This topic is now archived and is closed to further replies.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.