connectseekers.com

Tuesday, 19 August 2014

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

8/19/2014 - By Pranav Singh 4

This article will show you how you can create a 3d pie chart in your asp.net application using c#.net and VB.net. This will demonstrate to bind the asp.net pie chart data with database.


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 pie chart.


Now after adding the chart control you .aspx page will look as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PieChart.aspx.cs" Inherits="PieChartAsp.Net.PieChart" %>

<%@ 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>Pie 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="Pie" Name="Series1" XValueMember="Country" YValueMembers="Growth"
                    IsVisibleInLegend="true" Color="255, 255,128,112" 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>

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 PieChartAsp.Net
{
    public partial class PieChart : 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 PieChartAsp.Net
    Partial Public Class PieChart
        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.


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

4 comments:

  1. Thank you :-) this code is useful,

    ReplyDelete
  2. Thanks for this code
    can you show examples of the other charts

    ReplyDelete
  3. Thanks a lot Its really helpful

    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