connectseekers.com

Monday, 1 August 2016

Asp.Net Bar Chart From DataBase Table Using C#.Net and VB.Net

8/01/2016 - By Pranav Singh 0

This article will show you how you can create a 3d or 2d Bar chart in your asp.net application using c#.net and Vb.net. This will demonstrate to bind the asp.net point chart data with sql 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 addyour .aspx page add a asp.net  chart control. After adding chart control just set the chart property as Bar chart.

 
After adding the chart control your code will look as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart_Bar.aspx.cs" Inherits="WebApplication7.Chart_Line" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Asp.Net Bar Chart From DataBase Table 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="Bar" Name="Growth" XValueMember="Country" YValueMembers="Growth"
                        IsVisibleInLegend="true"
                        IsValueShownAsLabel="true" YValuesPerPoint="2">
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                        <AxisX LineColor="Gray">
                            <MajorGrid LineColor="Gray" />
                        </AxisX>
                        <AxisY LineColor="Gray">
                            <MajorGrid LineColor="Gray" />
                        </AxisY>
                        <Area3DStyle Enable3D="false" 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# Code:
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
namespace WebApplication7
{
    public partial class Chart_Bar: 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 dt = new DataTable();
            SqlConnection con = new SqlConnection("--Your connectionstring--");
            SqlDataAdapter da = new SqlDataAdapter("Select * from Country", con);
            da.Fill(dt);
            return dt;
        }
    }
}

VB.Net Code:
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data.SqlClient
Namespace WebApplication7
    Partial Public Class Chart_Bar
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, 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(_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()
            SqlConnection con = new SqlConnection("--Your connectionstring--");
            SqlDataAdapter da = new SqlDataAdapter("Select * from Country", con);
            da.Fill(_objdt);
            Return _objdt
        End Function
    End Class
End Namespace

Please check the table structure of the sql table.

Column Name
Data Type
Country
Varchar(50)
Growth
Int

Here is the country data


Now we have done run the application to check the 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