How to create ASP.Net Chart Control from C# DataTable


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. 
chart control in 4.0 example, chart control tutorial, chart control samples, charts and graphs, chart control tutorial
Related Articles
First make sure that you have installed Microsoft Chart Controls for Microsoft .NET or download and install on your machine. Find the below features of Microsoft Chart Controls in :-

  • 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. 
MS Chart control - Databind pie chart from Datatable in ASP .Net charts and graphs
In the following chart control example you will learn how to create different types of charts in web application. Find the C# code below :- 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:Chart ID="Chart1" runat="server" Height="296px" Width="412px" BorderDashStyle="Solid"
            BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2px" BackColor="211, 223, 240"
                <asp:Title Text="Title of the Graph comes here" />
                <asp:Series Name="Series1" BorderColor="180, 26, 59, 105">
                <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
                    BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
                    <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" />
                    <AxisX LineColor="64, 64, 64, 64">
                        <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                        <MajorGrid LineColor="64, 64, 64, 64" />
Bind datatable to Chart control : charts and graphs,chart for .net,asp charts chart control example c#
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";

I hope you will enjoy the development tip while creating 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: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.