Introduction
In this article I describe how to create a chart in ASP.NET which take data from back end and show it's graph on the front end.
First of all create a table in your SQL Server using the following command:
create table emp(empName varchar(20),workinhDate date,Workinghour varchar(20))
go
insert into mcnemp
select 'd','1/12/2013','8'union all
select 'd','1/15/2013','6'union all
select 'd','2/18/2013','7'union all
select 'd','2/20/2013','4'union all
select 'd','2/26/2013','8'union all
select 'd','3/11/2013','5'union all
select 'd','3/16/2013','10'union all
select 'd','4/18/2013','20'union all
select 'd','5/20/2013','11'union all
select 'd','6/19/2013','6'
go
select * from mcnemp
Output
![chart-in-asp.net.jpg]()
Then create an ASP.NET website using the following procedure:
- Open Visual Studio
- Click on "File"
- Select "New" then select "website"
- Now a window appears; select "ASP.Net Empty Web Site"
- Provide an appropriate name and location
- Click "Ok"
- Right-click on the name of your site in Solution Explorer
- Now select "Add"then select "Add new Item"
- Select "webpage" and provide whatever name you wish
- Click "Ok"
Now use the following code in your .aspx page for adding the Chart Control:
<asp:Chart ID="Chart1" runat="server" Width="488px">
<series>
<asp:Series Name="Series1" XValueMember="0" YValueMembers="2">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
Now write the following code in your .CS page for page_load:
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter("select * from mcnemp", con);
da.Fill(ds);
Chart1.DataSource = ds;
}
Complete Code of the .aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Width="488px">
<series>
<asp:Series Name="Series1" XValueMember="0" YValueMembers="2">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>
</div>
</form>
</body>
</html>
Complete Code of the aspx.cs page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("server=.;database=dd;uid=sa;pwd=wintellect@1");
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter("select * from mcnemp", con);
da.Fill(ds);
Chart1.DataSource = ds;
}
}
Now run your project by clicking F5.
Output
![chart-in-asp.net-.jpg]()
Summary
In this article I described how to create a chart in ASP.NET. I hope this article has helped you to understand this topic. Please share if you know more about this. Your feedback and constructive contributions are welcome.