Post
Ask Question

Chart Control in ASP.NET

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:

  1. create table emp(empName varchar(20),workinhDate date,Workinghour varchar(20))  
  2. go  
  3. insert into mcnemp  
  4. select 'd','1/12/2013','8'union all  
  5. select 'd','1/15/2013','6'union all  
  6. select 'd','2/18/2013','7'union all  
  7. select 'd','2/20/2013','4'union all  
  8. select 'd','2/26/2013','8'union all  
  9. select 'd','3/11/2013','5'union all  
  10. select 'd','3/16/2013','10'union all  
  11. select 'd','4/18/2013','20'union all  
  12. select 'd','5/20/2013','11'union all  
  13. select 'd','6/19/2013','6'  
  14. go  
  15. select * from mcnemp 

Output

chart-in-asp.net.jpg

Then create an ASP.NET website using the following procedure:

  1. Open Visual Studio
  2. Click on "File"
  3. Select "New" then select "website"
  4. Now a window appears; select "ASP.Net Empty Web Site"
  5. Provide an appropriate name and location
  6. Click "Ok"
  7. Right-click on the name of your site in Solution Explorer
  8. Now select "Add"then select "Add new Item"
  9. Select "webpage" and provide whatever name you wish
  10. Click "Ok"

Now use the following code in your .aspx page for adding the Chart Control:

  1. <asp:Chart ID="Chart1" runat="server" Width="488px">  
  2.         <series>  
  3.             <asp:Series Name="Series1" XValueMember="0" YValueMembers="2">  
  4.             </asp:Series>  
  5.         </series>  
  6.         <chartareas>  
  7.             <asp:ChartArea Name="ChartArea1">  
  8.             </asp:ChartArea>  
  9.         </chartareas>  
  10. </asp:Chart>
Now write the following code in your .CS page for page_load:

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     DataSet ds = new DataSet();  
  4.     SqlDataAdapter da = new SqlDataAdapter("select * from mcnemp", con);  
  5.     da.Fill(ds);  
  6.     Chart1.DataSource = ds;  
  7. }

Complete Code of the .aspx page

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>  
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <div>  
  11.         <asp:Chart ID="Chart1" runat="server" Width="488px">  
  12.             <series>  
  13.                 <asp:Series Name="Series1" XValueMember="0" YValueMembers="2">  
  14.                 </asp:Series>  
  15.             </series>  
  16.             <chartareas>  
  17.                 <asp:ChartArea Name="ChartArea1">  
  18.                 </asp:ChartArea>  
  19.             </chartareas>  
  20.         </asp:Chart>  
  21.     </div>  
  22.     </form>  
  23. </body>  
  24. </html>  
Complete Code of the aspx.cs page

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. public partial class _Default : System.Web.UI.Page  
  10. {  
  11.     SqlConnection con = new SqlConnection("server=.;database=dd;uid=sa;pwd=wintellect@1");  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         DataSet ds = new DataSet();  
  15.         SqlDataAdapter da = new SqlDataAdapter("select * from mcnemp", con);  
  16.         da.Fill(ds);  
  17.         Chart1.DataSource = ds;  
  18.     }  
  19. } 

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.


Similar Articles