Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. AJAX helps us develop web applications and retrieve a small amount of data from a web server. AJAX consists of different types of technology.

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

Step 1 : Open Visual Studio 2010.

Step 2 : Go to Solution Explorer and right-click.

step2.gif

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

Chart Control

step3.gif

Create Table for Chart Control

Step 4 : Go to Solution Explorer and right-click.

Step 5 : Go to Server Explorer and right-click.

step 5.gif

Define Value in the Table

Step 6 : Go to Table option and right-click.

step6.gif

Bind the Data:

Step 7 : Now go to the Default.aspx page and click on the Chart control.

step7.gif

Define Connection String :

 Step 8 : Select SQLDataSource option and click in ConnectionString.

step8.gif

Define Series and Area

Step 9 : Now right-click on the Chart control.

step 9.gif

Chart Area

Step 10 : Now click on the chart control.

step10.gif

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

Code :

<head runat="server">
 <title> my ajax chart</title>
 </head>
<body>
 <form id="form1" runat="server" style="background-color: #0099FF">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div style="background-color: #99FF99">
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <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">
 <series>
 <asp:Series Legend="Legend1" Name="Series1"
XValueType="Double" BorderColor="255, 224, 192" >
 </asp:Series>
 <asp:Series ChartArea="ChartArea1" Legend="Legend1" Name="Series4">
 </asp:Series>
 </series>
 <MapAreas>
 <asp:MapArea Coordinates="0,0,0,0" />
 </MapAreas>
 <chartareas>|
 <asp:ChartArea BackColor="255, 224, 192" Name="ChartArea1" BorderWidth="5">
 <AxisY Title="customer">
 </AxisY>
 <AxisX LineColor="BlanchedAlmond" Title="country">
 </AxisX>
 </asp:ChartArea>
 <asp:ChartArea Name="ChartArea2">
 </asp:ChartArea>
 </chartareas>
 <Legends>
 <asp:Legend BorderColor="128, 255, 128" Name="Legend1">
 </asp:Legend>
 </Legends>
 </asp:Chart>
 <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 />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

Step 12 : Now run the application by Pressing F5.

step12.gif