This article will show you how you can create a column 3D
chart in asp.net using c#.net and Vb.net. In this I have shown how to bind and
display the 3D chart in asp.net.
Some of my previous articles are as follows: How
to Create Column Chart in Windows Application Using C#.Net, Dynamic
Google Scatter Chart In an Asp.Net MVC Using C# and Javascript, Point
Chart in Asp.Net Using C#.Net and VB.Net, Pie
Chart in Asp.Net Using C#.Net and VB.Net.
After adding the
chart control we will add the ChartArea for making the chart 3D look. So after
adding all the propertied our .aspx code will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PieChartAsp.Net.WebForm1"
%>
<!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>Column
3D 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" Height="235px" Width="366px">
<Series>
<asp:Series Name="Series1" XValueMember="Country" YValueMembers="Growth">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="True" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
|
In above code I have
added the coordinate column name for binding the data to the datatable. Now let’s come to
the code part for assigning data to the chart control. Have a look of the below
code.
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 WebForm1 : 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 ChartAsp.Net
Partial Public Class Chart
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 simply
I have assign some values in datatable and after that assign to the chart
control.
Now we have done run the application and check the output.
DOWNLOAD
About the Author
good article..
ReplyDeleteThank You
ReplyDelete