ASP.Net 4.0 Chart Controls


ASP.Net 4.0 Chart Control - Built into ASP.Net and Windows Forms.Charts are used to Represent the numerical data in the Graphical Format. Chart Control provides options to create different types of charts. Learn ASP.Net 4.0 Chart Controls

About ASP.Net 4.0 Chart Control


Built into ASP.Net and Windows Forms.Charts are used to Represent the numerical data in the Graphical Format. Chart Control provides options to create different types of charts.

Chart Introduction


Chart is used to present the numerical data in the Graphical Format. The Chart is made up of
1. Data Points - Represents Individual numbers in the form Column, Bar or Line in the Chart
2. Data Series - Represents the Group of Related Data points in the Chart.
Note: Data Points will have two componets X and Y.

ASP.Net Chart Control


1. Introduced in .Net Framework 4.0 and ASP.Net 4.0 version.
1. Chart Controls API makes it easy to sort, search, filter, group, and export the chart data.
2. Adding the Chart to ASP.Net Form
Drag the Control from the Toolbar and Drop into the Form. The following code will added to the ASP.Net Page.

<asp:Chart ID="Chart3" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

1.
<asp:Chart>
- Represents the Chart Control.
2.
<Series>
- Represents the Chart Data Series.
3.
<asp:Series>
- Represents the Individual Data Series in the Chart.
4.
<asp:ChartArea >
-Represents the Chart Area.
5.
<Points>
- Represents Individual Data Points.

Steps to Create the Chart in ASP.Net


1. Create table tbltask with following Fields.
1.EmpName[varchar]-Programmer name
2.Coding [int]-Number of hours worked
Bugfixing [int]-Number of hours worked

Step 2: Add the SQLDataSource control to ASP.Net Page and Set the Connection to Database.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"ConnectionString="Data Source=BINSP512;Initial Catalog=wpfDB;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmpName, Coding, BugFixing FROM [tblTask]">
</asp:SqlDataSource>

Step 3: Add the Chart Control to the ASP.Net Page and Set the Properties according to the given code.

<!-- DataSourceID Property Sets the DataSource Connection for the Chart-->
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1">
<Series>
<!-- asp:Series - Adds the Data Series to the Chart -->
<asp:Series ChartType="Column" Name="Coding" XValueMember="EmpName" YValueMembers="Coding">
</asp:Series>
<asp:Series ChartType="Column" Name="BugFixing" XValueMember="EmpName" YValueMembers="BugFixing"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<!-- Adds the Titles to the X and Y Axis -->
<AxisY Title="Number of Hours Worked">
</AxisY>
<AxisX Title="Employee Name">
</AxisX>
</asp:ChartArea>
</ChartAreas>
<Legends>
<!-- Adds Legend to the Chart -->
<asp:Legend Name="l1" LegendStyle="Table">
</asp:Legend>
</Legends>
<Titles>
<!-- Sets the Chart Title -->
<asp:Title Name="Title1" Text="Employees Working Details">
</asp:Title>
</Titles>
</asp:Chart>


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: