connectseekers.com

Wednesday, 10 September 2014

Line Chart in Asp.Net Using C#.Net and VB.Net

9/10/2014 - By Pranav Singh 1

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.


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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

1 comment:

  1. 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

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top