Post
Ask Question

Showing Chart in ASP.Net With Database

The following is my SQL Server Data Table with the data I will show in the chart.

SQL server Data Table

                                                                              Image 1.

Here I will show the total number of users by their city (Address). The following is my table in design mode.

table desine view

                                             Image 2.

The script of my table is:

  1. CREATE TABLE [dbo].[Employee](  
  2.     [CompanyName] [varchar](50) NULL,  
  3.     [EmployeeCode] [int] NOT NULL,  
  4.     [EmployeeSupervisorCode] [int] NULL,  
  5.     [EmployeeName] [varchar](50) NULL,  
  6.     [ProjectName] [varchar](50) NULL,  
  7.     [JoiningDate] [datetime] NULL,  
  8.     [Experience] [varchar](50) NULL,  
  9.     [Mobile] [varchar](15) NULL,  
  10.     [Address] [varchar](50) NULL,  
  11.     [CreatedDate] [datetime] NULL,  
  12.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
  13. (  
  14.     [EmployeeCode] ASC  
  15. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  16. ) ON [PRIMARY]  
  17.   
  18. GO  
  19.   
  20. SET ANSI_PADDING OFF  
  21. GO  
You can drag and drop a chart control from the tool box to your aspx page like the following in my aspx code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartControlDemo.aspx.cs" Inherits="ChartControlApplication.ChartControlDemo" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  4. <!DOCTYPE html>  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Showing Employee Information in Chart</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.         <div>  
  12.             <asp:Chart ID="EmployeeChartInfo" runat="server" Height="450px" Width="550px">  
  13.                 <Titles>  
  14.                     <asp:Title ShadowOffset="3" Name="Items" />  
  15.                 </Titles>  
  16.                 <Legends>  
  17.                     <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />  
  18.                 </Legends>  
  19.                 <Series>  
  20.                     <asp:Series Name="Default" />  
  21.                 </Series>  
  22.                 <ChartAreas>  
  23.                     <asp:ChartArea Name="ChartArea1" BorderWidth="1" />  
  24.                 </ChartAreas>  
  25.             </asp:Chart>  
  26.         </div>  
  27.     </form>  
  28. </body>  
  29. </html>  
Now, make sure your web.config file has the following peice of code:
  1. <?xml version="1.0"?>  
  2. <!--  
  3.   For more information on how to configure your ASP.NET application, please visit  
  4.   http://go.microsoft.com/fwlink/?LinkId=169433  
  5.   -->  
  6. <configuration>  
  7.   <appSettings>  
  8.     <add key="ChartImageHandler" value="storage=file; timeout=20;" />  
  9.   </appSettings>  
  10.   
  11.   <system.web>  
  12.     <compilation debug="true" targetFramework="4.5">  
  13.       <assemblies>  
  14.         <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
  15.       </assemblies>  
  16.     </compilation>  
  17.     <httpRuntime targetFramework="4.5"/>  
  18.   </system.web>  
  19.   
  20.   <system.webServer>  
  21.     <handlers>  
  22.       <remove name="ChartImageHandler" />  
  23.       <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"  
  24.       path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />  
  25.     </handlers>  
  26.   </system.webServer>  
  27.   
  28. </configuration>  
Now the aspx.cs code is:
  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. using System.Web.UI.DataVisualization.Charting;  
  10.   
  11. namespace ChartControlApplication  
  12. {  
  13.     public partial class ChartControlDemo : System.Web.UI.Page  
  14.     {  
  15.         protected void Page_Load(object sender, EventArgs e)  
  16.         {  
  17.             if (!IsPostBack)  
  18.             {  
  19.                 GetEmployeeChartInfo();  
  20.             }  
  21.         }  
  22.   
  23.         private void GetEmployeeChartInfo()  
  24.         {  
  25.             DataTable dt = new DataTable();  
  26.             using (SqlConnection con = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated Security=true;Initial Catalog=Test"))  
  27.             {  
  28.                 con.Open();  
  29.                 SqlCommand cmd = new SqlCommand("SELECT Address as Name, COUNT(EMPLOYEECODE) AS Total  FROM Employee GROUP BY Address", con);  
  30.                 SqlDataAdapter da = new SqlDataAdapter(cmd);  
  31.                 da.Fill(dt);  
  32.                 con.Close();  
  33.             }  
  34.             string[] x = new string[dt.Rows.Count];  
  35.             int[] y = new int[dt.Rows.Count];  
  36.             for (int i = 0; i < dt.Rows.Count; i++)  
  37.             {  
  38.                 x[i] = dt.Rows[i][0].ToString();  
  39.                 y[i] = Convert.ToInt32(dt.Rows[i][1]);  
  40.             }  
  41.   
  42.             EmployeeChartInfo.Series[0].Points.DataBindXY(x, y);  
  43.             EmployeeChartInfo.Series[0].ChartType = SeriesChartType.Pie;  
  44.             EmployeeChartInfo.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  45.             EmployeeChartInfo.Legends[0].Enabled = true;  
  46.         }  
  47.     }  
  48. }  
Now run your application:

Employee Chart Info
                                                                              Image 3.


Similar Articles