connectseekers.com

Thursday, 21 August 2014

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

8/21/2014 - By Pranav Singh 0

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.

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

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

0 comments:

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