This article will show you how you can create a 3d pie chart
in your asp.net application using c#.net and VB.net. This will demonstrate to
bind the asp.net pie chart data with database.
Some of my previous articles are as follows: Dynamic
Google Scatter Chart In an Asp.Net MVC Using C# and Javascript, How
To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript,
How
to Create Column Chart in Windows Application Using C#.Net.
So for this article first we will create a new asp.net
application and add the your .aspx page add a asp.net chart control. After adding chart control just
set the chart property as pie chart.
Now after adding the chart control you .aspx page will look
as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PieChart.aspx.cs" Inherits="PieChartAsp.Net.PieChart"
%>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting"
TagPrefix="asp"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pie
Chart in Asp.Net Using C#.Net and VB.Net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Width="500px">
<Series>
<asp:Series ChartType="Pie" Name="Series1" XValueMember="Country" YValueMembers="Growth"
IsVisibleInLegend="true" Color="255, 255,128,112" IsValueShownAsLabel="true">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisX LineColor="Gray">
<MajorGrid LineColor="Gray"
/>
</AxisX>
<AxisY LineColor="Gray">
<MajorGrid LineColor="Gray"
/>
</AxisY>
<Area3DStyle Enable3D="True" LightStyle="Realistic"></Area3DStyle>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend></asp:Legend>
</Legends>
</asp:Chart>
</div>
</form>
</body>
</html>
|
Now let’s cone to code end where we will assign data to the
chart control. Here is the C# and VB code as follows.
C#.Net
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace PieChartAsp.Net
{
public partial class PieChart : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
_objdt = new DataTable();
_objdt = GetDataForChart();
BindDataToChartcontrol(_objdt);
}
///
/// This function will bind data to chart control
///
public void BindDataToChartcontrol(DataTable _objdt)
{
Chart1.DataSource = _objdt;
Chart1.DataBind();
}
///
/// This method will provide data
/// In this methos you can fatch data from DB and pass it to chart control
///
public DataTable GetDataForChart()
{
DataTable _objdt = new DataTable();
_objdt.Columns.Add("Country", typeof(string));
_objdt.Columns.Add("Growth", typeof(long));
_objdt.Columns.Add("LabelValue");
var _objrow = _objdt.NewRow();
_objrow["Country"] = "India";
_objrow["Growth"] = 9;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"] = "America";
_objrow["Growth"] = 14;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"] = "Sri Lanka";
_objrow["Growth"] = 4;
_objdt.Rows.Add(_objrow);
_objrow = _objdt.NewRow();
_objrow["Country"] = "Africa";
_objrow["Growth"] = 3;
_objdt.Rows.Add(_objrow);
return _objdt;
}
}
}
|
VB.Net
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data
Namespace PieChartAsp.Net
Partial Public Class PieChart
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs)
Dim
_objdt As New
DataTable()
_objdt = GetDataForChart()
BindDataToChartcontrol(_objdt)
End Sub
'''
''' This
function will bind data to chart control
'''
Public Sub BindDataToChartcontrol(ByVal _objdt As DataTable)
Chart1.DataSource = _objdt
Chart1.DataBind()
End Sub
'''
''' This method will provide data
''' In this methos you can fatch data from DB and pass it to chart control
'''
'''
Public Function GetDataForChart() As DataTable
Dim _objdt As New DataTable()
_objdt.Columns.Add("Country", GetType(String))
_objdt.Columns.Add("Growth", GetType(Long))
_objdt.Columns.Add("LabelValue")
Dim _objrow = _objdt.NewRow()
_objrow("Country") = "India"
_objrow("Growth") = 9
_objdt.Rows.Add(_objrow)
_objrow = _objdt.NewRow()
_objrow("Country") = "America"
_objrow("Growth") = 14
_objdt.Rows.Add(_objrow)
_objrow = _objdt.NewRow()
_objrow("Country") = "Sri Lanka"
_objrow("Growth") = 4
_objdt.Rows.Add(_objrow)
_objrow = _objdt.NewRow()
_objrow("Country") = "Africa"
_objrow("Growth") = 3
_objdt.Rows.Add(_objrow)
Return _objdt
End Function
End Class
End Namespace
|
In above code I have first I have prepared the data which is
stored in datatable, and then it is pass to the function to bind the data to
the chart control.
Now we have done run the page and check output.
DOWNLOAD
About the Author
Thank you :-) this code is useful,
ReplyDeleteThanks for you valuable comment.
DeleteThanks for this code
ReplyDeletecan you show examples of the other charts
Thanks a lot Its really helpful
ReplyDelete