Chart control in asp.net and its different type and views.
Chart control in asp.net and its different type and views.
In My previous Post (Read) ,I had bind chart control with database.
Now Here I am showing different types of chart and its view(3D or 2D).
Firstly design Your web page with different type of controls.
Here I am using Dropdownlist,RadioButtonList,CahekBox,Chart Control and
SqldataSource.
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)))
.aspx Part
<h4> Chart type : </h4>
<asp:DropDownList ID="drdChartType"
runat="server"
AutoPostBack="True"
onselectedindexchanged="ddlChartType_SelectedIndexChanged">
</asp:DropDownList>
<h4> 3D Settings : </h4>
<asp:CheckBox ID="chk3D" runat="server"
AutoPostBack="True"
Text="Use
3D Chart" oncheckedchanged="cbUse3D_CheckedChanged" />
<h4>Inclination angle :</h4>
<asp:RadioButtonList ID="rdb_angle" runat="server"
AutoPostBack="True"
onselectedindexchanged="rblInclinationAngle_SelectedIndexChanged">
<asp:ListItem Value="-90">-90°</asp:ListItem>
<asp:ListItem Value="-70">-70°</asp:ListItem>
<asp:ListItem Value="-50">-50°</asp:ListItem>
<asp:ListItem Value="-30">-30°</asp:ListItem>
<asp:ListItem Value="-20">-20°</asp:ListItem>
<asp:ListItem Value="-10">-10°</asp:ListItem>
<asp:ListItem Value="0">0°</asp:ListItem>
<asp:ListItem Value="10">10°</asp:ListItem>
<asp:ListItem Selected="True"
Value="20">20°</asp:ListItem>
<asp:ListItem Value="30">30°</asp:ListItem>
<asp:ListItem Value="50">50°</asp:ListItem>
<asp:ListItem Value="70">70°</asp:ListItem>
<asp:ListItem Value="90">90°</asp:ListItem>
</asp:RadioButtonList>
<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:usgConnectionString %>"
SelectCommand="SELECT
[student_name], [average_marks] FROM [tb_student_average]">
</asp:SqlDataSource>
.Cs Part
protected void Page_Load(object sender, EventArgs
e)
{
if (!IsPostBack)
{
// bind chart type names to drd
bind_chart_typr();
}
}
//For Binding chart_type DRD
public void
bind_chart_typr()
{
drdChartType.DataSource = Enum.GetNames(typeof(SeriesChartType));
drdChartType.DataBind();
}
//For handling all Events.
protected override void OnPreRender(EventArgs
e)
{
base.OnPreRender(e);
// update chart rendering
Chart1.Series["Series1"].ChartTypeName
= drdChartType.SelectedValue;
Chart1.ChartAreas[0].Area3DStyle.Enable3D = chk3D.Checked;
Chart1.ChartAreas[0].Area3DStyle.Inclination = Convert.ToInt32(rdb_angle.SelectedValue);
}
It will look like ::
In 2D view
In 3D view :
Comments
Post a Comment