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]
  18. GO
  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" %>
  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>
  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>
  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>
  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;
  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. }
  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. }
  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.