02:02
Unknown
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>
<%@ PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<%@ RegisterAssembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting"TagPrefix="asp"%>
<!DOCTYPE htmlPUBLIC "-//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>
<formid="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;
usingSystem.Web.UI.DataVisualization.Charting;
public partialclass _Default: System.Web.UI.Page
{
protected voidPage_Load(object sender, EventArgs e)
{
}
protected voidbut_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 voidFillData()
{
DataTabledt = new DataTable();
DataColumndc;
dc = newDataColumn();
dc.ColumnName = "Name";
dt.Columns.Add(dc);
dc = newDataColumn();
dc.ColumnName = "Age";
dt.Columns.Add(dc);
DataRowdr;
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#
4 comments:
Thanks much for this post...
Hi,
We are looking for good quality line chart. We have gone through your trial line chart. But we need example chart for satisfied all requirement below features. Looking forward for your response at earliest.
Note: We are using Asp.net 4.0 and we are data binding from database into line chart. need for good line quality
Features expected in the chart :
1. Should have all common graph types like line, bar, column, Pie. And good to have graph types like Area, Circular, Distribution, Financial, Funnel, Range etc.,
2. Combination of charts should be possible
3. Animations like call outs should be available (It will be helpful if tabular format can be displayed in chart or callout)
4. Multiple Y axis should be possible
5. No of points on y axis should be in our control
6. We should be allowed to set interval on Y axis
7. Minimum and maximum values should be allowed to set by us
8. Data should be coming from database
9. Labels for each data point should be possible
10. Tool tip should be available
11. Data Points should be clickable and navigation to another graph or another page should be possible.
12. Drill down of graphs should be possible
13. Smart labels should be available
14. Markers should be available.
Regards,
Silambarasan .B
Chart .NET control for grid column creation.
Thanks for the information
Post a Comment