Introduction
This
tutorial uses the new MS Chart to render a column graph from a Data Table in C#
and ASP.NET 2.0 to 4.0
Description
In this tutorial, we will be looking at the new addition to the
.NET Framework, MS Charts. We will be rendering a bar graph from a Data Table,
and show just how easy Microsoft make it for us to do so. We can use the Chart
control like other ASP.NET data controls, and assign it a data source.
Please note that MS Chart will not work in ASP.NET 2.0 and below. If you are working within 3.5 or 4.0, then you can download the MS Chart extension at the following
Please note that MS Chart will not work in ASP.NET 2.0 and below. If you are working within 3.5 or 4.0, then you can download the MS Chart extension at the following
We will programmatically instantiate and populate a Data Table on
page load. In a real-world application, the chart would be fed with data from
an external source, like a database or XML file.
There is not just one way to render a Chart in ASP.NET. Using MS Chart, we can either give it a data source like any other data control or we can loop through the data values and plot each point on the graph individually. In this example, we will show you both ways.
Before we begin anything, and even start up Visual Studio.NET, we first need to download and install the Chart extension. You can download from the above web address, and the install is a quick process - consisting of two axes.Once installed, we can start up Visual Studio and create a new Web Application. Then the first thing to do is add two references in the Web.config:
In system.web/http Handlers, add the following:
There is not just one way to render a Chart in ASP.NET. Using MS Chart, we can either give it a data source like any other data control or we can loop through the data values and plot each point on the graph individually. In this example, we will show you both ways.
Before we begin anything, and even start up Visual Studio.NET, we first need to download and install the Chart extension. You can download from the above web address, and the install is a quick process - consisting of two axes.Once installed, we can start up Visual Studio and create a new Web Application. Then the first thing to do is add two references in the Web.config:
In system.web/http Handlers, add the following:
For .net framework
3.0 and 3.5
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false" />
</httpHandlers>
For .net framework 4.0
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false" />
</httpHandlers>
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ 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:Button ID="but_LoadData" runat="server" Text="Load Data" OnClick="but_LoadData_OnClick" />
<br />
<br />
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
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;
public partial
class _Default
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void
but_LoadData_OnClick(object sender, EventArgs e)
{
Chart1.Series["Series1"].ChartType
= SeriesChartType.Column;
Chart1.Series["Series1"]["DrawingStyle"] = "Emboss";
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.Series["Series1"].IsValueShownAsLabel
= true;
FillData();
}
private void
FillData()
{
DataTable
dt = new DataTable();
DataColumn
dc;
dc = new
DataColumn();
dc.ColumnName = "Name";
dt.Columns.Add(dc);
dc = new
DataColumn();
dc.ColumnName = "Age";
dt.Columns.Add(dc);
DataRow
dr;
dr = dt.NewRow();
dr["Name"]
= "Sunil Gurjar";
dr["Age"]
= "27";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"]
= "Anil Kumar";
dr["Age"]
= "32";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"]
= "Amit Kumar";
dr["Age"]
= "35";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"]
= "Narendra";
dr["Age"]
= "32";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"]
= "Sudhir";
dr["Age"]
= "16";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"]
= "Pooja";
dr["Age"]
= "25";
dt.Rows.Add(dr);
Chart1.DataSource = dt;
Chart1.Series["Series1"].XValueMember
= "Name";
Chart1.Series["Series1"].YValueMembers
= "Age";
Chart1.DataBind();
}
}
Downloads
You can download the complete source
code in Asp.net C#
No comments :
Post a Comment