Wednesday, 20 March 2013

Ajax Chart Control example

Chart Control

The Chart control include pie, area, range, point, circular, accumulation, data distribution, Ajax interactive, doughnut. We can statically declare chart data within the control declaration, or alternatively use data-binding to populate it dynamically. At runtime the server control generates an image (for example a .PNG file) that is referenced from the client HTML of the page using a <img/> element output by the <asp:chart/> control.  The server control supports the ability to cache the chart image, as well as save it on disk for persistent scenarios.  It does not require any other server software to be installed, and will work with any standard ASP.NET page.

Web Control for creating Chart

Line Charts
Smooth Line Charts
Column Charts
Area Charts
Scattered Charts
Stacked Column Charts
Pie Charts
Stacked Area Charts

Step 1 : Open Visual Studio 2010.
Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.
Select Add->New Item
Select WebForm

Default.aspx page open

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.
Drag Chart control, ScriptManager control, UpdatePanel control

Create Table for Chart Control

Step 4 : Go to Solution Explorer and right-click.
Select Add->New Item
Select SqlDataSource

Step 5 : Go to Server Explorer and right-click.
Select Table option and right-click
Select Add New Table and define Field
Step 6 : Go to Table option and right-click.
Select Show Data Table

Define all Data Field

Step 7 :
Now go to the Default.aspx page and click on the Chart control.
Select New Data Source option
Define Data Source

Step 8 : Select SQLDataSource option and click in ConnectionString.
Select DataBase.mdf file

Step 9 : Now right-click on the Chart control.
Select Series property and click in button
Define DataSource
Define XValueMember, YValueMember
Step 10 : Now click on the chart control.
Select Chart Area Option
Visible True
Select Style:3D

Step 11 : Now go to Default.aspx [Source] option and write the below code.

Code :

<head runat="server">
    <title> my ajax chart</title>
    <form id="form1" runat="server" style="background-color: #0099FF">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <div style="background-color: #99FF99">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <br />
      <h1> MY AJAX CHART</h1>
asp:Chart ID="Chart1" runat="server" BackColor="SandyBrown"
        BorderlineColor="Red" DataSourceID="SqlDataSource2" onload="Chart1_Load"
        Palette="Fire" BackGradientStyle="LeftRight" BackSecondaryColor="Maroon"
            Height="500px" Width="500px">
            <asp:Series Legend="Legend1" Name="Series1"
                XValueType="Double" BorderColor="255, 224, 192" >
            <asp:Series ChartArea="ChartArea1" Legend="Legend1" Name="Series4">
            <asp:MapArea Coordinates="0,0,0,0" />
            <asp:ChartArea BackColor="255, 224, 192" Name="ChartArea1" BorderWidth="5">
                <AxisY Title="customer">
                <AxisX LineColor="BlanchedAlmond" Title="country">
             <asp:ChartArea Name="ChartArea2">
            <asp:Legend BorderColor="128, 255, 128" Name="Legend1">
          <asp:SqlDataSource ID="SqlDataSource2" runat="server"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT * FROM [my customer]"></asp:SqlDataSource>
        <br />