Well I lagged a little on this one but here is the continuation of my drawing with MonoTouch tutorials. This one demonstrates how to draw a simple pie chart. You might want to read the previous two articles on drawing with MonoTouch before diving into this one. I just extended the existing drawing app so you download the updated source here to see all the examples.
I tried to make the function as generic as possible to give you the most flexibility.
This is the function for drawing a pie chart:
[sourcecode language=”csharp”]
private UIImage makePieChartImage (int width, int height, float percentage, CGColor baseColor, CGColor topColor)
{
//Create the CGBitmapContext object
CGBitmapContext ctx = new CGBitmapContext (IntPtr.Zero, width, height, 8, 4 * width, CGColorSpace.CreateDeviceRGB (), CGImageAlphaInfo.PremultipliedFirst);
//Create two CGPath objects, one for each slice of the pie
CGPath path1 = new CGPath ();
CGPath path2 = new CGPath ();
//There are 2 pi radians in a full circle
//Note that I will make the arc go backwards.
float twopi = (2f * (float)Math.PI) * -1f;
//Calculate the angle for the first slice
float angleTop = twopi * percentage;
//Calculate the arc start points, center of the circle
float x = width / 2;
float y = height / 2;
//Set the radius
float radius = x;
//Add the first arc path from 0 to first angle
path1.AddArc (x, y, radius, 0, angleTop, true);
//Add a line path back to the center of the circle to create a slice
path1.CGPathAddLineToPoint (x, y);
//Draw the first slice
ctx.SetFillColorWithColor (topColor);
ctx.AddPath (path1);
ctx.DrawPath (CGPathDrawingMode.Fill);
//Add the second arc path from first angle to full circle
path2.AddArc (x, y, radius, angleTop, twopi, true);
//Add a line path back to the center of the circle to create a slice
path2.CGPathAddLineToPoint (x, y);
//Draw the second slice
ctx.SetFillColorWithColor (baseColor);
ctx.AddPath (path2);
ctx.DrawPath (CGPathDrawingMode.Fill);
//return a UIImage object
return UIImage.FromImage (ctx.ToImage ());
}
[/sourcecode]
There’s a lot of stuff going on here so lets break it down:
Line 4 creates our drawing context.
Lines 7-8 declare two CGPath objects, one for each slice of the pie. Ideally your function would be dynamic enough to draw more than just two slices but I’ll leave that up to you. 🙂
Line 12 calculates 2 pi radians (360 degrees, full circumference of a circle.)
Line 15 calculates the angle for the first slice’s percentage. (Remember that your slices need to add up to 2 pi radians if you do extend the method to support more than two slices.)
Lines 18-19 calculate the center of the circle based on the dimensions passed in.
Line 22 sets the radius.
Line 25 creates the first arc from angle 0 to the first percentage calculated, the last parameter specifies if the arc should be drawn clockwise or not.
Line 26 draws a line back to the center of the circle from the endpoint of the first arc, this creates the first slice.
Line 30 sets the fill color for the slice.
Line 31 adds the path to our graphics context.
Line 32 draws the path using the Fill mode.
Lines 34 – 42 do the same thing but for the second slice.
Line 45 returns the pie chart as a UIImage.
As you can see this is a pretty simple function that can be used as a foundation for a more robust routine. I suggest you try to modify this function by creating a Slice class that contains all the information about your pie chart slices then change the drawing function to use the Slice objects to draw your pie chart. I’ll cover drawing a bar graph in my next drawing tutorial (I promise it won’t take 8 months this time.)