In this article I will show you how you can create a 2D and
3D line chart using c#.net in your asp.net application. In this article I have
used Chart control.
Some of my previous articles are as follows: Point
Chart in Asp.Net Using C#.Net and VB.Net, Pie
Chart in Asp.Net Using C#.Net and VB.Net, Dynamic
Google Scatter Chart In an Asp.Net MVC Using C# and Javascript,Column 3D Chart in Asp.Net Using C#.Net and VB.Net, Point
Chart in Asp.Net Using C#.Net and VB.Net, Dynamic
Google Geo Chart In an Asp.Net MVC Using C# and Javascript.
So for this article first we will create a new asp.net application and add a chart control in your page. After adding chart control your page 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>Line
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"
ChartType="Line">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="True" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
|
In above code for making 2D and 3D chart we need change the
below mention part of code.
For 2D chart:
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="False" />
</asp:ChartArea>
</ChartAreas>
|
For 3D chart:
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="True" />
</asp:ChartArea>
</ChartAreas>
|
Now we will add the below code as shown below.
C#.Net Code:
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 Code:
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 I have prepared the datatable for
populating the data in chart. Now we have done. Run the application and check
the output.
2D Chart:
3D Chart:
About the Author
Thank you for this nice tutorial! You can also check out this fabulous ASP.net line chart control: https://demos.shieldui.com/aspnet/line-chart/basic-usage it provides lots of options and I have been using it with much success lately.
ReplyDelete