How to Create Pie Chart in Asp.net

Description:-

Here We Will Create Char Control in dot net. In this article I’m going to explain how to bind chart control from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis. Here I’ll show you how to bind chart from SQL Server database. You could follow the steps given below.

If you open up your default.aspx and look at the toolbox, you will find the "Chart" Control in the section "Data".

Create Employee table in your Sql Server

CREATE TABLE [dbo].[Employee](

      [EmpID] [int] IDENTITY(1,1) NOT NULL,

      [FirstName] [varchar](50) NULL,

      [LastName] [varchar](50) NULL,

      [Salary] [int] NULL,

      [Address] [varchar](100) NULL,

      [Location] [varchar](50) NULL,

 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED

(

      [EmpID] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

Now create Webpage and design for chart. Or else Register Ajaxcontroltoolkit in Webpage.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Html Code:-

<div style="width:40%">
   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
   </asp:ToolkitScriptManager>
   <asp:PieChart ID="PieChart1" runat="server" ChartHeight="300" ChartWidth="450" ChartTitle="Employee Salary Details" ChartTitleColor="#0E426C">
   </asp:PieChart>
</div>

Code Behind:-

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    using (SqlConnection con = new SqlConnection("Data Source=;Initial Catalog=;Persist Security Info=True;User ID=;Password= "))
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("select FirstName,Salary from Employee", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(dt);
        con.Close();
    }
    foreach (DataRow dr in dt.Rows)
    {
        PieChart1.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
        {
            Category = dr["FirstName"].ToString(),
            Data = Convert.ToDecimal(dr["Salary"]),
        });
    }
}

Web.config File

<appSettings>
   <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;"/>
</appSettings>

At <system.web><httpHandlers>, the following entry will be added:

<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

     

In the node <system.web><pages><controls>, the tag-definition will be added

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

     

At the end, a reference to the DataVisualization assembly will be added at <system.web><compilation><assemblies>

<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

Or else you can register in page datavisualization

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace = "System.Web.UI.DataVisualization.Charting" TagPrefix="asp"%>

Author : Umesh Patel

Related Posts