MS Chart control - Databind pie chart from Datatable in ASP .Net


In this article I will explain in brief about how to use the ASP.NET MS chart controls. First make sure that you have installed Microsoft Chart Controls for Microsoft .NET or download and install on your machine.

MS Chart control - Databind pie chart from Datatable in ASP .Net

There are the following features in Microsoft Chart Controls for Microsoft .Net :
    • 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 Customizations.
    • Interactivity and AJAX. 

Find the working code below to create a Chart using a data table:

Default.aspx

<%@ 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>

Bind datatable to Chart control : charts and graphs,chart for .net,asp charts

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

 To download example source code click here

Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!

Post a Comment

  1. Thank this helped mi. But now my requirement is like displaying count on Y axis for male and female country wise which are on x axis

    ReplyDelete

 
Top