Thursday, 31 March 2011

Chart Control In ASP.NET

Introduction: Hello guys,  in this article i will explain the new feature of ASP.NET. Hey , i am talking about “CHART CONTROL”. With the help of this control you can create a chart, i mean Graph. This is very interesting feature of the With the help of the chart we can define percentage of student, population of the country, and everything. These type of chart you can see in the excelsheet. With the help of the chart control we can show everthing and every type of data that is store in the database. Wih the help of chart you can display every type of data easily that can easy to understand for every user.
Implementation: Firstly, we need a chart control. If there in no chart control is  installed in your visul studio, then you can download the chart control from below link:
when you download the chart control from above link, then you will see that  there is a bin folder. Inside this folder there will be a .dll file for the chart control. You will have need this .dll file to install the chart control in your visul studio.
Now i am explaining the way to install the chart control in the visual studio. Go to the toolbox of the visual studio, right click at the standart option , a popup windowe will be appear. Then click at the choose option. A dialogbox will be appear that is shown in below figure:

 Then click the on the  browse button and choose the downloaded .dll file. Then press ok button, you will see in the  toolbox, there will be added a new control named “chart”. This chart control you can show in the below figure.

Now i will explain that how we can bind the chart control. First crate a new website add page named graph.aspx. Now drag and drop the chart control from the toolbox to the graph.aspx page.
Code for graph.aspx page:

<asp:Chart ID="Chart1" runat="server" Width="732px"
        Height="400px" ImageStorageMode="UseImageLocation" BackColor="Transparent"
        BackImageTransparentColor="White" Visible="false" >
<%-- this is a series. this will used to bind the xaxis and yaxis of the chart control --%>
       <asp:Series Name="Series1" ChartArea="ChartArea1" YValuesPerPoint="6"

            <asp:ChartArea Name="ChartArea1">
                <Area3DStyle Enable3D="True" LightStyle="Realistic" Rotation="20"
                    WallWidth="5" />
Code for graph.aspx.cs page:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.IO;
using System.Diagnostics;
using System.Drawing;
using System.Text;
using System.Net.Mail;
using System.Text.RegularExpressions;
using System.Threading;

public partial class result_chart : System.Web.UI.Page
    SqlConnection con = new SqlConnection();
    SqlCommand cmd;
    DataTable dt;
    String Query;
    SqlDataAdapter adapter;
    protected void Page_Load(object sender, EventArgs e)
            // here i am declare a connectionstring to attach the database 
        con.ConnectionString = ConfigurationManager.ConnectionStrings["connection"]

            if (Page.IsPostBack == false)

SqlConnection con = new SqlConnection();
private void bind();
   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings
        // here i am define the sql query.
        SqlDataAdapter adp = new SqlDataAdapter(@"select top(7) * from tb_student_average
           order by desc", ConfigurationManager.ConnectionStrings["connection"]
         DataSet ds = new DataSet();
        Chart1.DataSource = adp;
        // here i am displaying the legend title. i mean blur color of line is displaying the marks average
        Chart1.Legends.Add("average_marks").Title = "Average";
        // here i am giving the title of the x-axis
        Chart1.ChartAreas["ChartArea1"].AxisX.Title = "Student Name";
        // here i am giving the title of the y-axis
        Chart1.ChartAreas["ChartArea1"].AxisY.Title = "Average";
        // here i am binding the x-axisvalue with the chart control
        Chart1.Series["Series1"].XValueMember = "student_name";
        // here i am binding the y-axisvalue with the chart control
        Chart1.Series["Series1"].YValueMembers = "average_marks";

        con.Close();    }

Below I am displaying the  the output in the image.

SQL script for the table tb_student_average
/****** Object:  Table [dbo].[tb_student_average]    Script Date: 03/07/2011 10:20:56 ******/
IF  EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[tb_student_average]') AND type in (N'U'))
DROP TABLE [dbo].[tb_student_average]
/****** Object:  Table [dbo].[tb_student_average]    Script Date: 03/07/2011 10:20:56 ******/
IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[tb_student_average]') AND type in (N'U'))
CREATE TABLE [dbo].[tb_student_average](
      [id] [bigint] IDENTITY(1,1) NOT NULL,
      [student_name] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
      [average_marks] [decimal](18, 0) NULL
SET IDENTITY_INSERT [dbo].[tb_student_average] ON
INSERT [dbo].[tb_student_average] ([id], [student_name], [average_marks]) VALUES (1, N'raman', CAST(20 AS Decimal(18, 0)))
INSERT [dbo].[tb_student_average] ([id], [student_name], [average_marks]) VALUES (2, N'vikas', CAST(50 AS Decimal(18, 0)))
INSERT [dbo].[tb_student_average] ([id], [student_name], [average_marks]) VALUES (3, N'sanjeev', CAST(51 AS Decimal(18, 0)))
INSERT [dbo].[tb_student_average] ([id], [student_name], [average_marks]) VALUES (4, N'vimal', CAST(49 AS Decimal(18, 0)))
SET IDENTITY_INSERT [dbo].[tb_student_average] OFF

Conclusion:Through this article, you have learned, how we can bind chart control in ASP.NET .


  1. Simple and easy to understand


  2. Replies
    1. Hi!! Raghavendra Kumar. Thank you sir. Please feel free to get in touch with my blog and you can also give us your expensive suggestions to improve this blog.

  3. please give example for biding two tables in a single chart...????
    Thanks in Advance

    1. hi!! cherry. To bind a single chart with the two tables you can use simply sql joins...



  4. Hi!! it really useful and easy to understand. please give example of x axis and y axis setting in chart can be done.


  5. Code is not properly formatted and contains errors and its also not displaying anything when run

    1. Hello Heemanshu Bhalla.

      How are you?

      Sir how you can write this thing. Sir please read the above comments also.

      Please explain me that which error you are facing now. We will help you to solve your issue. Did you add the .dll file which i mentioned in the article?

      Thanks and Regards
      Using ASP.Net

  6. its really nice post.


  7. it gives the error Chart1 does not exist in current context

  8. I have read your information its very useful topic for me. Thanks for providing information. training in jalandhar

  9. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic.

    Online Training for Big Data
    best Apache Spark online course