Introducing the Graph/chart control of Microsoft in ASP.Net. Which will
help to make your reporting beautiful for Web application Asp.net application.
You can find out the chart control on the tool bar as below
position;
Microsoft provide the various type of chart controls, which
you can use it for based on your application and software needs.
Point Chart ,
FastPoint Chart ,
Bubble Chart ,
Line Chart ,
Spline Chart ,
StepLine Chart ,
FastLine Chart ,
Bar Chart ,
StackedBar Chart ,
StackedBar100 Chart ,
Column Chart ,
StackedColumn Chart ,
StackedColumn100 Chart ,
Area Chart ,
SplineArea Chart ,
StackedArea Chart ,
StackedArea100 Chart ,
Pie Chart ,
Doughnut Chart ,
Stock Chart ,
Candlestick Chart ,
Range Chart ,
SplineRange Chart ,
RangeBar Chart ,
RangeColumn Chart ,
Radar Chart ,
Polar Chart ,
ErrorBar Chart ,
BoxPlot Chart ,
Renko Chart ,
ThreeLineBreak Chart ,
Kagi Chart ,
PointAndFigure Chart ,
Funnel Chart ,
Pyramid Chart ,
FastPoint Chart ,
Bubble Chart ,
Line Chart ,
Spline Chart ,
StepLine Chart ,
FastLine Chart ,
Bar Chart ,
StackedBar Chart ,
StackedBar100 Chart ,
Column Chart ,
StackedColumn Chart ,
StackedColumn100 Chart ,
Area Chart ,
SplineArea Chart ,
StackedArea Chart ,
StackedArea100 Chart ,
Pie Chart ,
Doughnut Chart ,
Stock Chart ,
Candlestick Chart ,
Range Chart ,
SplineRange Chart ,
RangeBar Chart ,
RangeColumn Chart ,
Radar Chart ,
Polar Chart ,
ErrorBar Chart ,
BoxPlot Chart ,
Renko Chart ,
ThreeLineBreak Chart ,
Kagi Chart ,
PointAndFigure Chart ,
Funnel Chart ,
Pyramid Chart ,
Just demonstrating the code that you can directly used and
get the any type of chart very beautiful way in ASP.Net
You just need to place the below code for chart controls.
<asp:Chart ID="Chart1" runat="server" Height="296px" Width="412px"
BorderDashStyle="Solid" BackSecondaryColor="White"
BackGradientStyle="TopBottom" BorderWidth="2px" BackColor="211, 223, 240"
BorderColor="#1A3B69">
<Series>
<asp:Series Name="sample" 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>
Binding the chart control from code behind.
private void BindControls()
{
Dictionary<DateTime, int> testData = new Dictionary<DateTime, int>();
//
update chart rendering
Chart1.Series["sample"].ChartTypeName
= ddlChartType.SelectedValue;
Chart1.ChartAreas[0].Area3DStyle.Enable3D = cbUse3D.Checked;
Random rnd = new Random(Guid.NewGuid().GetHashCode());
for (int i = 0; i < Convert.ToInt32(rblValueCount.SelectedValue); i++)
{
testData.Add(DateTime.Now.AddDays(i),
rnd.Next(1, 50));
}
Chart1.Series["sample"].Points.DataBind(testData,
"Key", "Value", string.Empty);
}
Creating the application for Microsoft chart control
which will dynamically bind the chart based on your need and display just do
the copy and paste and you can see that on your system.
The code need to write for ASpx page will be;
<head runat="server">
<title></title>
<style type="text/css">
.border {
float: left;
width: 300px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
h2 {
margin-left: 5px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="clearfix">
<h2>Chart Example</h2>
<div style="float: left; width: 340px;">
<div class="border">
<h3>Chart type</h3>
<p>
<asp:DropDownList ID="ddlChartType" runat="server" AutoPostBack="True">
</asp:DropDownList>
</p>
</div>
<div class="border">
<h3>Number of values</h3>
<p>
<asp:RadioButtonList ID="rblValueCount" runat="server" AutoPostBack="True">
<asp:ListItem Selected="True" Value="10">10 Values</asp:ListItem>
<asp:ListItem Value="20">20
Values</asp:ListItem>
<asp:ListItem Value="50">50
Values</asp:ListItem>
</asp:RadioButtonList>
</p>
</div>
</div>
<div class="border">
<h3>3D Settings</h3>
<p>
<asp:CheckBox ID="cbUse3D" runat="server" AutoPostBack="True" Text="Use 3D Chart" />
</p>
</div>
</div>
<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">
<Series>
<asp:Series Name="sample" 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>
Code snippet for c# code side;
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!IsPostBack)
{
// bind all the chart type ddlChartType.DataSource = Enum.GetNames(typeof(SeriesChartType));
ddlChartType.DataBind();
}
BindControls();
}
/// <summary>
/// Binding the graph controls
/// </summary>
private void BindControls()
{
Dictionary<DateTime, int> testData = new Dictionary<DateTime, int>();
//
update chart rendering
Chart1.Series["sample"].ChartTypeName
= ddlChartType.SelectedValue;
Chart1.ChartAreas[0].Area3DStyle.Enable3D = cbUse3D.Checked;
Random rnd = new Random(Guid.NewGuid().GetHashCode());
for (int i = 0; i < Convert.ToInt32(rblValueCount.SelectedValue); i++)
{
testData.Add(DateTime.Now.AddDays(i),
rnd.Next(1, 50));
}
Chart1.Series["sample"].Points.DataBind(testData,
"Key", "Value", string.Empty);
}
Now if you will see the UI with different chart then it
will look alike;
No comments:
Post a Comment