connectseekers.com

Tuesday, 26 August 2014

Column 3D Chart in Asp.Net Using C#.Net and VB.Net

8/26/2014 - By Pranav Singh 1

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.

So for this article first we will create a new asp.net application and add a chart control in it. After adding chart control we will set the type of chart control in added chart control.


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

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:

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