This article will show you how you can create a 3d point
chart in your asp.net application using c#.net and VB.net. This will
demonstrate to bind the asp.net point chart data with database. This will show
chart control with data without using AjaxControlToolKit Chart control.
Some of my previous
articles are as follows: Pie
Chart in Asp.Net Using C#.Net and VB.Net, 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 point chart.
After adding the chart control your code will look as shown
below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs" Inherits="ChartAsp.Net.Chart" %>
<%@ 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>Point
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="Point" Name="Growth" XValueMember="Country" YValueMembers="Growth"
IsVisibleInLegend="true"
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>
|
So for enabling 2d and 3d chart we need to just set the Area3DStyle Enable3D="False" for making it 2D chart.
So For 2D
<Area3DStyle Enable3D="False"
LightStyle="Realistic"></Area3DStyle>
|
So For 3D
<Area3DStyle Enable3D="True" LightStyle="Realistic"></Area3DStyle>
|
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 ChartAsp.Net
{
public partial class Chart : 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 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.
About the Author
0 comments:
Please let me know your view