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!

Nick

  • 1 month later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.