Code Snippets: Chart Control in asp.net 4.0

Chart Control in asp.net 4.0

Introduction : In this article i will show you how to add Chart control in asp.net 4.0 and how to bind chart control in asp.net with Dataset .You just need to drag the chart control in aspx page so following assembly will be register in your web page and corresponding httpHandlers will be added in web config too .

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

Code For Bind Chart Control In asp.net : I have following complete html and code behind code for binding Chart control in c# asp.net. I have here created Bar chart control in asp.net.

HTML Code For Chart Control In asp.net :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartControl.aspx.cs" Inherits="HamidSite.ChartControl" %>

<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Chart ID="ChartControlTest" runat="server" Width="706px" Height="367px">
            <Series>
                <asp:Series Name="SeriesTest" IsValueShownAsLabel="true" Legend="LegendTest" ChartArea="ChartAreaTest"
                    XValueMember="MonthName" YValueMembers="Amount">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartAreaTest" Area3DStyle-LightStyle="Simplistic" AlignmentStyle="AxesView"
                    BorderDashStyle="Solid" Area3DStyle-Enable3D="true">
                </asp:ChartArea>
            </ChartAreas>            
        </asp:Chart>
    </div>
    </form>
</body>
</html>

C# Code For Chart Control in asp.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;
using System.Data.SqlClient;

namespace HamidSite
{
    public partial class ChartControl : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindChartControl();
            }
        }
        private void BindChartControl()
        {
            DataSet Ds = GetDataSet("Select MonthName , Amount from OrderTable");
            ChartControlTest.DataSource = Ds; 
            ChartControlTest.DataBind(); 
        }
        private DataSet GetDataSet(string Query)
        {
            DataSet Ds = new DataSet();
            try
            {
                string strCon = @"Data Source=ServerName;Initial Catalog=Test;Integrated Security=True;";  //Conntection String
                SqlConnection Con = new SqlConnection(strCon);
                SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
                Da.Fill(Ds);
            }
            catch (Exception) { }
            return Ds;
        }
    }
}

3 comments:

AnonymousNovember 14, 2012 at 9:25 PM
This comment has been removed by a blog administrator.
UnknownAugust 3, 2013 at 12:41 PM
i'm visit mostly links, all are good, please keep it.

http://aspdotnetblogspot.blogspot.in/2013/08/difference-between-sql-server-2008-and.html
AnonymousOctober 30, 2013 at 3:39 AM
.NET Chart WinForms Component

Code Snippets

Pages

Wednesday, January 11, 2012

Chart Control in asp.net 4.0

3 comments: