How to create ASP.Net Chart Control from C# DataTable
MS Chart Control - Databind Pie Chart from Datatable
In this tutorial you will learn how to use the new MS Chart to render a Column Chart and Pie Chart from a DataTable source in C#. I will explain in brief about how to use the ASP.NET MS chart controls.
Related Articles
 |
| asp.net chart control tutorial |
- C# - Best way to check if a drop down list contains a value?
- How to get html control value server side in asp.net
- Gridview css styles in asp.net
- Repeater control in asp.net example c# code
- Form based authentication in asp.net with example
- All supported chart types.
- Data series, chart areas, axes, legends, labels, titles, and more.
- Data Binding
- Data manipulation, such as copying, splitting, merging, alignment, grouping, sorting, searching, filtering, and more.
- Statistical formulas and financial formulas.
- Advanced chart appearance, such as 3D, anti-aliasing, lighting, perspective, and more.
- Chart rendering.
- Events and Customization.
- Interactivity and AJAX.
 |
| asp.net charts and graphs |
In the following asp.net chart control example you will learn how to create different types of charts in asp.net web application. Find the C# code below :-
<%@ 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:Chart ID="Chart1" runat="server" Height="296px" Width="412px" BorderDashStyle="Solid"
BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2px" BackColor="211, 223, 240"
BorderColor="#1A3B69">
<Titles>
<asp:Title Text="Title of the Graph comes here" />
</Titles>
<Series>
<asp:Series Name="Series1" BorderColor="180, 26, 59, 105">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
BackGradientStyle="TopBottom">
<Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
WallWidth="0" IsClustered="False"></Area3DStyle>
<AxisY LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisY>
<AxisX LineColor="64, 64, 64, 64">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="64, 64, 64, 64" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
 |
| asp.net chart control example c# |
Default.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;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(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;
DataTable dt = new DataTable();
dt.Columns.Add("Id", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Age", typeof(string));
dt.Columns.Add("Date", typeof(DateTime));
//
// Here we add five DataRows.
//
dt.Rows.Add(25, "Rk", "26", DateTime.Now);
dt.Rows.Add(50, "Sachin", "24", DateTime.Now);
dt.Rows.Add(10, "Nitin", "22", DateTime.Now);
dt.Rows.Add(21, "Aditya", "18", DateTime.Now);
dt.Rows.Add(100, "Mohan", "29", DateTime.Now);
Chart1.DataSource = dt;
Chart1.Series["Series1"].XValueMember = "Name";
Chart1.Series["Series1"].YValueMembers = "Age";
Chart1.DataBind();
}
}
I hope you will enjoy the development tip while creating asp.net charts and graphs using c# datatable. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Also If you like this article, don't forget to share this article with your friends and colleagues.
How to create ASP.Net Chart Control from C# DataTable
Reviewed by Ravi Kumar
on
6:16 PM
Rating:
Reviewed by Ravi Kumar
on
6:16 PM
Rating:
No comments: