Tuesday, 7 April 2015

Chart control in asp.net

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 ,

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

Others

You will like to read it