Click here to Skip to main content
13,046,533 members (73,864 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 6 Apr 2012

Working with MS Chart

, 6 Apr 2012
Rate this:
Please Sign up or sign in to vote.
Article Describes how to Generate a Simple Chart using ASP.NET chart control


The MS Chart control comes with Visual Studio 2010 so we don't have to download and install MS Chart as in the previous versions of VS.


In this article I'm binding a simple DataTable to an MS Chart which shows the employee count department wise and here I'm not going to explain how to generate the DataTable.

Using the code

Following is my SQL table structure:

DeptID  DepatName 
1       Management
2       Academic
3       Financial
4       Service

EmpID EmpName  DeptID
1     Chamara  1
2     Janaka   1
3     Asanka   2
4     Menaka   2
5     Lahiru   3
6     Iroshan  4
7     Gihan    4

You can write a SQL query to get the employee count department wise. In my sample I have used a LINQ query to get the result set but you can use your own way.

Following is my method using LINQ, which returns a DataTable.

public DataTable GetData()
    CompanyDataClassesDataContext CCD = new CompanyDataClassesDataContext();
    DT = new DataTable();
    DT = (from dept in CCD.tblDepartments
              emp in CCD.tblEmployees on dept.DeptID equals emp.DeptID into dept_emp
          select new
              DeptName = dept.DepatName,
              EmpCount = dept_emp.Count()

    return DT;

Create a new Website in VS 2010. Drag and drop an MS chart control from the toolbox to your ASPX page and modify the markup as follows.

<asp:Chart ID="Chart1" runat="server" Width="500px" Height="500px" 

      <asp:Series ChartArea="myChartArea" Name="Series1" ChartType="Doughnut"

                  XValueMember="DeptName" YValueMembers="EmpCount" 

                  XValueType="String" YValueType="Int32">
     <asp:ChartArea Name="myChartArea" Area3DStyle-Enable3D="true">
       <AxisY Title="Employee Count"></AxisY>
       <AxisX Title="Department"></AxisX>
       <Area3DStyle Enable3D="True" Inclination="20" />

In the chart series you have to specify the X and Y value members which are returned from the query. In my case the DataTable contains the DeptName and EmpCount columns.

In the code-behind, add the following method:

private void BindChart()
    DataRepository DR;
    DR = new DataRepository();
    Chart1.DataSource = DR.GetData();
    Chart1.Titles.Add("Department Wise Employee Count");

The DR.GetData() method returns the DataTable and you can use your own way of retrieving a DataTable. Then cind it to the chart control data source.

The LoadChartOptions() method will specify the chart specific options.

private void LoadChartOptions()
    Chart1.Legends.Add(new Legend("DBAs"));
    Chart1.Legends[0].TableStyle = LegendTableStyle.Auto;
    Chart1.Legends[0].Docking = Docking.Bottom;

    Chart1.Series[0].Label = "#AXISLABEL -> #VALY{D}";
    Chart1.Series[0].ChartType = SeriesChartType.Doughnut;
    Chart1.Series[0]["PieLabelStyle"] = "Inside";
    Chart1.Series[0]["PieLabelStyle"] = "Disabled";
    Chart1.Series[0].BackGradientStyle = GradientStyle.DiagonalLeft;
    Chart1.Series[0].BackSecondaryColor = System.Drawing.Color.LightGray;
    Chart1.Series[0]["PieLineColor"] = "Black";
    Chart1.Series[0]["PieDrawingStyle"] = "Concave";


Finally bind your chart on page load:

protected void Page_Load(object sender, EventArgs e)
    if (!Page.IsPostBack)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Chamara Janaka
Software Developer Insight Software Solutions Lanka PVT Ltd
Sri Lanka Sri Lanka
No Biography provided

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 6 Apr 2012
Article Copyright 2012 by Chamara Janaka
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid