Building Pie Chart for Windows 8 Metro


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;
  5.             Size outerArcSize = new Size(Radius, Radius);
  6.             Size innerArcSize = new Size(InnerRadius, InnerRadius);
  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;
  43.             path.Segments.Add(ButtomLine);
  44.             path.Segments.Add(OuterArc);
  45.             path.Segments.Add(EndLine);
  46.             path.Segments.Add(InnerArc);
  47.             
  48.             PathGeometry myPath = new PathGeometry();
  49.             myPath.Figures.Add(path);
  50.             return myPath;
  51.         }

Building Your Chart Plotter

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

Draw your Plotter
  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.                 {
  23.                     Radius = halfWidth,
  24.                     InnerRadius = innerRadius,
  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

image


Comments (7)

  1. Trackback from SilverlightShow.net

  2. Amazing Article How can I can the full Code says:

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

  3. mano says:

    where do we want to write this code?

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

  5. 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

  6. fadly says:

    I get some error whan i running this program…

    please help me…

  7. Ashish says:

    Hi sir This Code port in windows phone 8