Chart Control in AJAX

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.

• JavaScript
• XML
• Asynchronous Call to the server

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

Chart 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

Define Value in the Table

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

• Select Show Data Table
• Define all Data Field

Bind the Data:

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

• Select New Data Source option
• Define Data Source
• Add SQLDataSource

Define Connection String :

Step 8 : Select SQLDataSource option and click in ConnectionString.

• Select DataBase.mdf file

Define Series and Area

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

• Select Series property and click in button
  

• Define DataSource
• Define XValueMember, YValueMember
  

Chart Area

Step 10 : Now click on the chart control.

• Select Chart Area Option
• Visible True
• Select Style:3D