How can use Chart controls in Asp.net using c#
Chart controls in Asp.net using c#
Here I am using asp.net chart control for preparing reports
section attractive and best understandable.
It is very easy to any type of user understand a graphical representation
very easily than a raw data.
So here I am writing this article for binding chart control
with database table data.
Firstly if u don’t have chart control in your toolbox list,
then u can download it from this link…
Database Table
Table Structure.
CREATE TABLE [dbo].[student](
[id] [bigint] IDENTITY(1,1) NOT NULL,
[student_name] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
[average_marks] [decimal](18, 0) NULL
)
Insert Some values…
INSERT [dbo].[student] ( [student_name],
[average_marks]) VALUES
('kandy', CAST(45 AS Decimal(18, 0)))
INSERT [dbo].[student] ( [student_name],
[average_marks]) VALUES
( 'Sam', CAST(23 AS Decimal(18, 0)))
INSERT [dbo].[student] ( [student_name],
[average_marks]) VALUES
( 'Rahul', CAST(101 AS Decimal(18, 0)))
INSERT [dbo].[student] ( [student_name],
[average_marks]) VALUES
( 'sahil', CAST(65 AS Decimal(18, 0)))
.apsx part
//Just drag chart control from from your tool box on .aspx
page.After that bind it using SqlDataSource.
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" >
<Series>
<asp:Series Name="Series1"
IsXValueIndexed="True"
XValueMember="student_name"
YValueMembers="average_marks" ChartType="Column">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Title="Marks">
</AxisY>
<AxisX
Title="Student
Name">
</AxisX>
<Area3DStyle
Enable3D="True"
/>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:kandyConnectionString %>"
SelectCommand="SELECT
[student_name], [average_marks] FROM [student]">
</asp:SqlDataSource>
In this article I am using a chart control and binding its
data using sqlDatsource.
Set some ptoperties.
In ChartArea section
of chart control ,I assigned
<AxisY Title="Marks"> and <AxisX Title="Student Name"> for displaying its
side name.
And using its series property for binding data to its x-axis and Y-axis
<asp:Series Name="Series1"
IsXValueIndexed="True"
XValueMember="student_name"
YValueMembers="average_marks" ChartType="Column">
</asp:Series>
In chart control there is many type charts .You can use it
according to your need.
For this you have to use ChartType="Column" property
Finaly after all work it will look like this.
This is column chart,that’s by its look like this but you
modify it using use ChartType="Column" property.
Comments
Post a Comment