How to create Chart in asp.net ?

Saturday, February 4, 2012

How to create Chart in asp.net ?

Create Chart control in asp.net

 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;
        }
    }
}