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 asp.net. 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:

http://www.microsoft.com/downloads/en/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en   

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 --%>

          <Series>

       <asp:Series Name="Series1" ChartArea="ChartArea1" YValuesPerPoint="6"

                ChartType="Column">

            </asp:Series>

        </Series>

        <ChartAreas>

            <asp:ChartArea Name="ChartArea1">

                <Area3DStyle Enable3D="True" LightStyle="Realistic" Rotation="20"

                    WallWidth="5" />

            </asp:ChartArea>

        </ChartAreas>

    </asp:Chart>

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"]

.ConnectionString;

        try

        {

            con.Open();

            if (Page.IsPostBack == false)

            {

                bind();

            }

SqlConnection con = new SqlConnection();

private void bind();

    {

   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings

["connection"].ConnectionString);

        con.Open();

        // here i am define the sql query.

        SqlDataAdapter adp = new SqlDataAdapter(@"select top(7) * from tb_student_average

           order by tb_student_average.id desc", ConfigurationManager.ConnectionStrings["connection"]

.ConnectionString);

         DataSet ds = new DataSet();

        adp.Fill(ds);

        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";

     

        Chart1.DataBind();

        adp.Dispose();

        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]

GO

/****** Object:  Table [dbo].[tb_student_average]    Script Date: 03/07/2011 10:20:56 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

IF NOT EXISTS (SELECT * FROM sys.objects WHERE object_id = OBJECT_ID(N'[dbo].[tb_student_average]') AND type in (N'U'))

BEGIN

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

)

END

GO

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 .