Asp.Net Chart Control

The Chart Control :

Chart control used to provide graphical representations of data.
To working with chart control we need to following steps:
1) add Refernce of Assembly 'System.Web.DataVisualization' from '.Net' section.
2) In Web.Config file add below line between <configuration> <system.web> <system.web></configuration>section.

"Web.Config"

<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>
<pages>
    <controls>
    <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" 
                assembly="System.Web.DataVisualization, 
	Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </controls>
</pages>

Syntax:

<asp:Chart ID="chtMovies" runat="server"  />

The Chart control has three main components:
1) Series
2) Chart area and
3) Data points

Sr.No	components	Description
1)	Series	A series is a collection of data points. Different types of charts display a series in different ways, but the underlying format for specifying a series of data points remains the same.
2)	Chart area	Define the plot areas for which a series is plotted. For instance, a line graph would be defined as a single plot area. If you want to display a line graph and a bar graph on a single chart, you would define two chart areas.
3)	Data points	A single point of data within a series.

Series, chart areas, and data points can all be assign either declaratively or programmatically.
The chart’s x-and y-axes are associated to the dataset’s returned columns through the XValueMember and
YValueMembers properties on the Series.
The default chart type is Column, which displays each data point as a vertical bar. We can
change the way the data points display by setting the ChartType property on the Series.
We can use more than 30 different chart types to provide visualizations of our data.

S.N.	chart types
1)	Area
2)	Bar
3)	Line
4)	Pie
5)	Box Plot
6)	Candlestick
7)	Column

Code: ChartDemo01.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartDemo01.aspx.cs" 
                Inherits="LearnAsp.Net.Control.Chart.ChartDemo01" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Chart ID="chtMovies" runat="server">
                <Series>
                    <asp:Series Name="MovieCategorySeries"
                        XValueMember="Category" YValueMembers="Count"> 
                 <%-- ChartType="Bar"--%>
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="MovieChartArea">
                    </asp:ChartArea>
                </ChartAreas >
            </asp:Chart>
        </div>
    </form>
</body>
</html>

Code: ChartDemo01.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LearnAsp.Net.Control.Chart
{
    public partial class ChartDemo01 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            chtMovies.DataSource = GetMoviesDetails();
            chtMovies.DataBind();
        }

        public DataTable GetMoviesDetails()
        {
            // Here we create a DataTable with four columns.
            DataTable tblMovies = new DataTable();
            tblMovies.Columns.Add("Category", typeof(string));
            tblMovies.Columns.Add("Count", typeof(string));
            // Here we add five DataRows.
            tblMovies.Rows.Add("Advantue", "3");
            tblMovies.Rows.Add("Animation", "4");
            tblMovies.Rows.Add("Drama", "2");
            tblMovies.Rows.Add("Harror", "1");
            tblMovies.Rows.Add("Commedy", "3");
            return tblMovies;
        }
    }
}

Output:

22 December 2019

Asp.Net Chart Control

No comments:

Post a Comment