Building Pie Chart for Windows 8 Metro

Building Pie Chart for Windows 8 Metro

Rate This
  • Comments 7

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

Leave a Comment
  • Please add 1 and 2 and type the answer here:
  • Post
  • Trackback from SilverlightShow.net

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

    please help me...

  • Hi sir This Code port in windows phone 8

Page 1 of 1 (7 items)