Working with Cahrt control in

In this article we will discuss the chart functionality introduced in . We will see how can we use the chart control available in visual studio. We will see it with the help of an example. We are not using any third party tool for implementing chart.

The chart control is not available in the toolbox. So if we want to use it we have to do 2 things initially.

1. Add the below httpHandler in the web.config file system.web section:

<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

2. we have to add below directive in the design page:

<%@ Register Assembly="System.Web.DataVisualization,
Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting"
TagPrefix="asp" %>

Now we can add the chart control normally:

<asp:Chart ID="chProduct" runat="server" ></asp:Chart>

Now we will see how can we use the chart to show diffrent types of datas. For this
we first create 2 tables:

CREATE TABLE [dbo].[Product](
[Id] [int] NULL,
[PCategoryId] [int] NULL,
[PName] [varchar](50) NULL

CREATE TABLE [dbo].[ProductCategory](
[Id] [int] NULL,
[CategoryName] [varchar](50) NULL

Now we will create a stored procedure that will return the number of Products in each Productcategory.

Create PROCEDURE CountProductCategoryWise
SELECT Count(*) As Count , CategoryName
FROM ProductCategory
ON ProductCategory.Id = PCategoryId
GROUP BY CategoryName

Now in the design page we will have below code:

<asp:Chart ID="chProduct" runat="server" ondatabound="chProduct_DataBound">
<asp:Series Name="ProductCategorySeries" XValueMember="CategoryName" ChartType="Line"
<asp:ChartArea Name="ProductChartArea">

Note: ChartType property indicates the type of chart you want like area, bar,pie etc.
XValueMember and YValueMember indicates the x and y co-ordinates.

And in codebehind we will write below code:

public static SqlConnection con;
public static SqlCommand cmd;
string c = ConfigurationManager.ConnectionStrings["ProductConnectionString"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)
con = new SqlConnection(c);
cmd = new SqlCommand();

if (!IsPostBack)
cmd = new SqlCommand("CountProductCategoryWise", con);
cmd.CommandType = CommandType.StoredProcedure;

SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
chProduct.DataSource = dt;


We can different types of operations on chart like sorting, filtering etc.
Here below code show the sorting and the filtering methods:

protected void chProduct_DataBound(object sender, EventArgs e)
// performs sorting

chProduct.DataManipulator.Sort(PointSortOrder.Descending, "Y",

// performs filtering
// 2 denotes the number on whose basis filtering will be performed. i.e. here it will show
//category which contains 2 or more products.

chProduct.DataManipulator.FilterTopN(2, "ProductCategorySeries",
"ProductCategorySeries", "Y", true);

I have attached the snapshots of the normal output and the chart after sorting and filtering performed.


  • Snapshots of the outputs (44842-14043-snapshots-of-the-output.rar)
  • Comments

    No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: