Wednesday 17 October 2012

Create Chart In ASP.net

Create Chart control in asp.net 
Aspx Page

<asp:Chart ID="Chart1" runat="server" BorderlineColor="Black" BorderlineDashStyle=
"Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom" BackSecondaryColor=
"White" Width="720px" Height="450px">
<Titles>
<asp:Title Name="Title1" Text="" Alignment="TopCenter" Font="Verdana, 12pt, 
style=Bold">
</asp:Title>
</Titles>
<Series>
<asp:Series Name="Series1" CustomProperties="DrawingStyle=Cylinder,
MaxPixelPointWidth=50" ShadowOffset="2" IsValueShownAsLabel="True" 
ChartType="Column">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BackGradientStyle="TopBottom" BackSecondaryColor=
"#B6D6EC"
BorderDashStyle="Solid" BorderWidth="2">
<AxisX Interval="1" TextOrientation="Rotated90">
<MajorGrid Enabled="False" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart> 

Coad Behind

Dataview dv = ExpenseDetails.GetExpApproverChart();
Chart1.Series["Series1"].Points.DataBindXY(dv, "ColumnName1", dv, "ColumnName2"); 

OR


Chart.aspx
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart.aspx.cs"
Inherits="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>ASP.NET Chart Control Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1><b>ASP.NET Chart Control Example</b></h1>
<asp:Chart ID="ChartAspnet" runat="server" Height="400px" Width="500px">
<Series>
<asp:Series Name="SeriesASPNET" ChartType="Column" ChartArea="ChartAreaASPnet">
</asp:Series>
<asp:Series Name="SeriesASPNET1" ChartType="Column" ChartArea="ChartAreaASPnet">
</asp:Series>
 
</Series>
 
<ChartAreas>
 
<asp:ChartArea Name="ChartAreaASPnet">
 
</asp:ChartArea>
 
</ChartAreas>
 
</asp:Chart>
 
</div>

 
</form>
</body>
</html>
 
 
Chart.aspx.cs
 
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.Web.UI.DataVisualization.Charting;

namespace ASPNETChart
{
    public partial class Chart : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable objDT = default(DataTable);
            objDT = CreateDataTable();

            ChartAspnet.DataSource = dt;

            ChartAspnet.Series[0].YValueMembers = "ChartVolume1";
            ChartAspnet.Series[1].YValueMembers = "ChartVolume2";

            ChartAspnet.Series[0].XValueMember = "Date";
            
            ChartAspnet.DataBind();
        }

        
        private DataTable CreateDataTable()
        {
            DataTable objDT = new DataTable();

            objDT.Columns.Add("Date");
            objDT.Columns.Add("ChartVolume1");
            objDT.Columns.Add("ChartVolume2");

            DataRow objDr;

            objDr = objDT.NewRow();
            objDr["Date"] = "Jan";
            objDr["ChartVolume1"] = 3500;
            objDr["ChartVolume2"] = 4102;
            objDT.Rows.Add(objDr);

            objDr = objDT.NewRow();
            objDr["Date"] = "Feb";
            objDr["ChartVolume1"] = 6046;
            objDr["ChartVolume2"] = 4222;
            objDT.Rows.Add(objDr);

            objDr = objDT.NewRow();
            objDr["Date"] = "Mar";
            objDr["ChartVolume1"] = 4909;
            objDr["ChartVolume2"] = 2935;
            objDT.Rows.Add(objDr);

            objDr = dt.NewRow();
            objDr["Date"] = "Apr";
            objDr["ChartVolume1"] = 4500;
            objDr["ChartVolume2"] = 5320;
            objDT.Rows.Add(objDr);

            objDr = dt.NewRow();
            objDr["Date"] = "May";
            objDr["ChartVolume1"] = 5500;
            objDr["ChartVolume2"] = 5001;
            objDT.Rows.Add(objDr);

            objDr = objDT.NewRow();
            objDr["Date"] = "Jun";
            objDr["ChartVolume1"] = 3566;
            objDr["ChartVolume2"] = 4456;
            objDT.Rows.Add(objDr);

            return objDT;
        }
    }
}

No comments:

Post a Comment