Pie Chart Control with Supplement Pie Chart (MS Chart ASP.NET)

One of the most common types of chart is pie chart control. This control helps in visualizing data and percentage distribution on pie chart or on donut chart.

Today we will see two types of pie chart one as a whole another with supplement chart for better readability of small distributions in your pie chart.

Pie Chart:

Create a new ASP.NET page and add Chart control from the toolbox then alter some properties like height, width, and chart type:

<asp:Chart ID="Chart1" runat="server" Height="536px" Width="980px">

<Series>

<asp:Series Name="Series1" ChartType="Pie">

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

After setting basic chart type, open code behind file and on page load lets generate dummy data to load in our pie chart:

string[] keys={"IE6","IE7","IE8+","Chrome","Firefox","Netscape"};

int[] values={200,320,400,50,20,10};

Chart1.Series[0].Points.DataBindXY(keys, values);

Chart1.Series[0].CustomProperties = "PieLabelStyle=Inside";

Chart1.Series[0].Palette = ChartColorPalette.EarthTones;

Here we are setting fictitious data about browser use in keys and setting their corresponding values after that we are binding those values to pie chart using DataBindXY method.

Chart1.Series[0].CustomProperties = "PieLabelStyle=Inside";

 

This line helps us determine where do we want to show our label text, possible values can be Inside or Outside.

Chart1.Series[0].Palette = ChartColorPalette.EarthTones;

This line of code gives us ability to select from predefined color Palettes for chart control.

After setting this your chart would look like this:

 

Pie Chart with supplement chart:

This is good but sometimes you need to combine these small segments and show them in a big chart for better readability.

So we will take our chart to next level and define a supplement chart for small segments.

If you have WebSample of chart control then you already have PieCollectedDataHelper utility class but if you don't have it then you can download whole WebSample from this link: http://archive.msdn.microsoft.com/mschart (under download tab you can choose target version of your .net framework)

Once you have this sample downloaded open sample website -> App_Code -> Utilities directory and you should see PieCollectedDataHelper class. This is free to use class so feel free to poke around and see what's in there.

After adding this class to your project and changing its namespace (if you like) add following code right below your pervious code inside Page_Load event:

PieCollectedDataHelper pieHelper = new PieCollectedDataHelper(Chart1);

pieHelper.CollectedPercentage = 10;

pieHelper.ShowCollectedDataAsOneSlice = false;

pieHelper.ChartAreaPosition = new System.Drawing.RectangleF(3f, 3f, 93f, 96f);

pieHelper.SupplementedAreaSizeRatio = 0.5f;

pieHelper.ShowSmallSegmentsAsSupplementalPie("Series1");

  • Now what we are doing here is creating instance of PieCollectedDataHelper class and passing our chart control's id as parameter
  • CollectedPercentage determine if the percentage of small value what you define here will be consider that below that should be collected so we will assign 10 to it so we can collect Chrome, Firefox, Netscape into it.
  • ShowCollectedDataAsOneSlice determine if we want to show small segment in main chart as one slice (one color) or in their individual slices
  • ChartAreaPosition takes Rectangle to determine the position of supplement chart in the main chart's chart area
  • SupplementedAreaSizeRatio determine the size of your supplement chart it can vary from 0.1f to 1f. For this example I kept it half of the main chart
  • ShowSmallSegmentAsSupplementPie takes name of main chart's series

After making this modification your chart with supplement chart will look like this:

Tags: , ,

ASP.NET | MS Chart