Introduction:
Here I will explain how to create dynamic Ajax pie chart in asp.net with database using c#, vb.net or create pie chart in asp.net with database example in c#, vb.net.
Description:
In previous articles I explained Ajax collapsible panel example in asp.net, Ajax auto complete textbox, Ajax country state city dropdown, Ajax calendar control example with custom date format, Ajax rating control example with database and many articles related to Ajax and asp.net. Now I explain how to create dynamic Ajax pie chart in asp.net with database using c#, vb.net.
Here I will explain how to create dynamic Ajax pie chart in asp.net with database using c#, vb.net or create pie chart in asp.net with database example in c#, vb.net.
Description:
In previous articles I explained Ajax collapsible panel example in asp.net, Ajax auto complete textbox, Ajax country state city dropdown, Ajax calendar control example with custom date format, Ajax rating control example with database and many articles related to Ajax and asp.net. Now I explain how to create dynamic Ajax pie chart in asp.net with database using c#, vb.net.
First design table one table countrydetails in your database like as
shown below
Data Type
|
Allow Nulls
|
|
ID
|
Int(set
identity property=true)
|
No
|
name
|
Varchar(50)
|
no
|
value
|
Int
|
no
|
Once we create table we need to enter some dummy
data for our application purpose.
To implement Ajax pie chart with
database first we need to add AjaxControlToolkit to your bin folder and
design your aspx page like this
<%@ Register TagPrefix="ajaxToolkit"
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pie Chart Example with
Database in asp.net</title>
</head>
<body>
<form id="form1"
runat="server">
<div style="width:40%">
<ajaxToolkit:ToolkitScriptManager ID="scriptmanager1"
runat="server"
/>
<ajaxToolkit:PieChart ID="countrychart"
runat="server"
ChartHeight="300"
ChartWidth="450" ChartTitle="World
wide Data usage %" ChartTitleColor="#0E426C">
</ajaxToolkit:PieChart>
</div>
</form>
</body>
</html>
|
C# Code
In code
behind add the following namespaces
using System;
using System.Data;
using System.Data.SqlClient;
|
After
adding namespaces and write the following code in page load
protected void Page_Load(object
sender, EventArgs e)
{
DataTable dt = new DataTable();
using (SqlConnection con = new
SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select name,total=value from countrydetails order
by total desc", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
foreach(DataRow dr in
dt.Rows)
{
countrychart.PieChartValues.Add(new
AjaxControlToolkit.PieChartValue
{
Category = dr["name"].ToString(),
Data = Convert.ToDecimal(dr["total"]),
});
}
}
|
VB.NET Code
Imports System.Data
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As
Object, e As EventArgs) Handles
Me.Load
Dim dt As New DataTable()
Using con As New SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select
name,total=value from countrydetails order by total desc", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
con.Close()
End Using
For Each dr As DataRow In
dt.Rows
countrychart.PieChartValues.Add(New
AjaxControlToolkit.PieChartValue() With { _
.Category = dr("name").ToString(),
_
.Data = Convert.ToDecimal(dr("total")) _
})
Next
End Sub
End Class
|
Demo
 |
Download
Sample Code Attached
(Note: To
get piechart in ajax control toolkit you need to download .NET 4.0 version ajax
control toolkit dll)
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
7 comments :
Very nice tutorial on Ajax Pie Chart.. i was looking for this example on internet..Thank you Suresh..:)
Thanks Sir But Whats the code to change the color of each percentage
How to Change The Color of the each slice of the Pie chart...
Pabitra Behera,Bhubaneswar
Chart shape is not running perfectly what to do ??
say about any link in which difine mvc
asp.net showing element element piechart is not known element
Hello Friends ...Please tell how to change the colour of the chart..
Note: Only a member of this blog may post a comment.