# Building Pie Chart for Windows 8 Metro

### Building Pie Chart for Windows 8 Metro

Rate This

I came to a point were I need to use a Pie chart for a Project if you tried to search online you will not find a free charting control so I decided to build one. there is a huge modification in .NET 4.5 framework specially when it come to Paths and drawing because of

• Different namespaces
• Performance enhancement
• etc…

so I decided to build a charting library on my own and here I’ll give you an initial start on build a Pie Chart

# Building a Pie

so the Frist step is to build a Pie Slice that will represent your pie percentage so you need to construct a method to build your Paths and Points of your Arcs below is the method code for that

Draw Pie
1. private PathGeometry DrawGeometry()
2.         {
3.
4.             bool largeArc = WedgeAngle > 180.0;
7.
8.             Point innerArcStartPoint = Utilities.ComputeCartesianCoordinate(RotationAngle, InnerRadius);
9.             Point ButtomLineEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle, Radius);
10.             Point OuterArcEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle + WedgeAngle, Radius);
11.             Point EndLineEndPoint = Utilities.ComputeCartesianCoordinate(RotationAngle + WedgeAngle, InnerRadius);
12.
13.
14.             innerArcStartPoint.X += CentreX;
15.             innerArcStartPoint.Y += CentreY;
16.             ButtomLineEndPoint.X += CentreX;
17.             ButtomLineEndPoint.Y += CentreY;
18.             OuterArcEndPoint.X += CentreX;
19.             OuterArcEndPoint.Y += CentreY;
20.             EndLineEndPoint.X += CentreX;
21.             EndLineEndPoint.Y += CentreY;
22.
23.
24.             PathFigure path = new PathFigure();
25.             path.StartPoint = innerArcStartPoint;
26.
27.
28.             ArcSegment InnerArc = new ArcSegment();
29.             InnerArc.Size = innerArcSize;
30.             InnerArc.SweepDirection = SweepDirection.Counterclockwise;
31.             InnerArc.Point = innerArcStartPoint;
32.             InnerArc.IsLargeArc = largeArc;
33.
34.             LineSegment ButtomLine = new LineSegment();
35.             ButtomLine.Point = ButtomLineEndPoint;
36.             ArcSegment OuterArc = new ArcSegment();
37.             OuterArc.SweepDirection = SweepDirection.Clockwise;
38.             OuterArc.Point = OuterArcEndPoint;
39.             OuterArc.Size = outerArcSize;
40.             OuterArc.IsLargeArc = largeArc;
41.             LineSegment EndLine = new LineSegment();
42.             EndLine.Point = EndLineEndPoint;
47.
48.             PathGeometry myPath = new PathGeometry();
50.             return myPath;
51.         }

Then you will need to build your chart plotter area which will calculate the values and turn it into angles to draw you a full Pie

Below if my Plotter building Method

1. private void ConstructPiePieces()
2.         {
3.             Dictionary<string, double> myCollectionView = getDate();
4.             double halfWidth = this.Width / 2;
5.             double innerRadius = halfWidth * HoleSize;
6.
7.             // compute the total for the property which is being plotted
8.             double total = 0;
9.             foreach (Object item in myCollectionView.Values)
10.             {
11.                 total += GetPlottedPropertyValue(item);
12.             }
13.
14.             // add the pie pieces
15.             Container.Children.Clear();
16.             double accumulativeAngle = 0;
17.             foreach (Object item in myCollectionView.Values)
18.             {
19.                 double wedgeAngle = GetPlottedPropertyValue(item) * 360 / total;
20.
21.                 PieDataPoint piece = new PieDataPoint()
22.                 {
25.                     CentreX = halfWidth,
26.                     CentreY = halfWidth,
27.                     WedgeAngle = wedgeAngle,
28.                     RotationAngle = accumulativeAngle,
29.                 };
30.
31.                 Container.Children.Insert(0, piece);
32.
33.                 accumulativeAngle += wedgeAngle;
34.             }
35.
36.         }

the output of the above is this sample Pie Chart. I’m still in the process of Building a Charting component for windows 8 feel free to request for the code but The Component is still in progress

• Post

• Thanks for your Amazing Help I was looking for something like that

• where do we want to write this code?

• I've already released an assembly for this u can use it straight away

• What is the relationship between Code1 and Code2. You are not using DrawGeometry() in Code2, so how does Pie gets drawn to the Screen ??

Could you explain more

• I get some error whan i running this program...