Home > ASP.NET > How to create a Pie chart using ASP.Net and C#

How to create a Pie chart using ASP.Net and C#


43

 

There are 4 things you need to do in order to get this configured and working on your machine, remember, however that you will need Visual Studio 2010 and .Net 4.
  • Create a Website project
  • Modify the Web.Config file
  • Modify the Default.aspx file
  • Modify the Default.aspx.cs file
I’ll assume you know how to create a Website project…File, New, Website, ASP.Net project…
The Web.Config file needs to be modified to contain the httpHandler and controls. These configurations enable the asp:Chart tag which is used in the Default.aspx file.

<httpHandlers>

  <add path="ChartImg.axd"
      verb="GET,HEAD,POST"
      type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization,
      Version=4.0.0.0, Culture=neutral,
      PublicKeyToken=31bf3856ad364e35"
      validate="false"/>
</httpHandlers>
<controls>
  <add tagPrefix="asp"
      namespace="System.Web.UI.DataVisualization.Charting"
      assembly="System.Web.DataVisualization,
      Version=4.0.0.0,
      Culture=neutral,
      PublicKeyToken=31bf3856ad364e35"/>
</controls>
In the Default.aspx file we will add the chart, titles, legend, series and chartareas.

<asp:chart id="Chart1" runat="server" Height="300px" Width="400px">

  <titles>
    <asp:Title ShadowOffset="3" Name="Title1" />
  </titles>
  <legends>
    <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False"
    Name="Default" LegendStyle="Row" />
  </legends>
  
  <series>
    <asp:Series Name="Default" />
  </series>
  <chartareas>
    <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
  </chartareas>
</asp:chart> 
And lastly, we will add the code to the code-behind file to populate and configure the chart. First thing I do is to load the data values for the chart. If this was implemented in a program being used to represent real data, then the values would not be hardcoded. You would connect to a database, run a query and then have your business logic create the contents of the values. For simplicity, I hard coded the values. Then I simply went through and set the properties that created the above Pie Chart.

protected void Page_Load(object sender, EventArgs e)

{
  double[] yValues = { 71.15, 23.19, 5.66 };
  string[] xValues = { "AAA", "BBB", "CCC" };
  Chart1.Series["Default"].Points.DataBindXY(xValues, yValues);
  Chart1.Series["Default"].Points[0].Color = Color.MediumSeaGreen;
  Chart1.Series["Default"].Points[1].Color = Color.PaleGreen;
  Chart1.Series["Default"].Points[2].Color = Color.LawnGreen;
  Chart1.Series["Default"].ChartType = SeriesChartType.Pie;
  Chart1.Series["Default"]["PieLabelStyle"] = "Disabled";
  Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  Chart1.Legends[0].Enabled = true;
}
Hope this help !
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: