Introduction
Ajax (Asynchronous
JavaScript and XML) is a new web development technique use 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
Graph
A Graph is an abstract representation of a set
of objects where some pairs of the objects are connected by links. The
interconnected objects are represented by mathematical abstractions called
vertices, and the links that connect some pairs of vertices are called edege.The
edges may be directed (asymmetric) or undirected (symmetric).
Step 1 : Open Visual Studio 2010.
- Go to File->New->Websites
- Select ASP.NET Empty Websites
Step 2 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select Web Form
- Default.aspx page open
Step 3 : Go to Web Form [Design
Option] and drag control from Toolbox.
- Drag ScriptManager Control, Button Control
- Write the code for a designing graph
Code :
<body onload="init();">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h1 align=center>
AJAX Graph using ASP.NET</h1>
<p align=center style="background-repeat
:repeat-x">
<a href="AJAXGraph1.aspx">
AJAX Graph Demo1</a>
| <a href="AJAXGraph2.aspx">
AJAX Graph Demo2</a>
| <a href="AJAXGraph3.aspx">
AJAX Graph Demo3</a></p>
<div align=center >
<table class="gridTable">
<tr valign="bottom">
<td>
<div id="d1" class="gridDiv">
</div>
</td>
<td>
<div id="d2" class="gridDiv">
</div>
</td>
<td>
<div id="d3" class="gridDiv">
</div>
</td>
<td>
<div id="d4" class="gridDiv">
</div>
</td>
<td>
<div id="d5" class="gridDiv">
</div>
</td>
<td>
<div id="d6" class="gridDiv">
</div>
</td>
<td>
<div id="d7" class="gridDiv">
</div>
</td>
<td>
<div id="d8" class="gridDiv">
</div>
</td>
<td>
<div id="d9" class="gridDiv">
</div>
</td>
<td>
<div id="d10" class="gridDiv">
</div>
</td>
<td>
<div id="d11" class="gridDiv">
</div>
</td>
<td>
<div id="d12" class="gridDiv">
</div>
</td>
<td>
<div id="d13" class="gridDiv">
</div>
</td>
<td>
<div id="d14" class="gridDiv">
</div>
</td>
</tr></table><br />
<input id="Button1" type="button"
value="Start/Stop" onclick="return
Button1_onclick()" />
</div>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page
</script>
</div>
Create a Web Form for the next level Graph.
Step 4 : Go to Solution Explorer and
right-click.
- Select Add->New Item
- Select WebForm
- Default.aspx page opens
- Define the code for the second graph
Code :
<body onload="init();">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h1 align=center>
AJAX Graph using ASP.NET</h1>
<p align=center> <a href="AJAXGraph1.aspx">
AJAX Graph Demo1</a>
| <a href="AJAXGraph2.aspx">
AJAX Graph Demo2</a>
| <a
href="AJAXGraph3.aspx">
AJAX Graph Demo3</a></p>
<div align=center >
<table class="gridTable">
<tr valign="bottom">
<td>
<div id="d1" class="gridDiv">
</div>
</td>
<td>
<div id="d2" class="gridDiv">
</div>
</td>
<td>
<div id="d3" class="gridDiv">
</div>
</td>
<td>
<div id="d4" class="gridDiv">
</div>
</td>
<td>
<div id="d5" class="gridDiv">
</div>
</td>
<td>
<div id="d6" class="gridDiv">
</div>
</td>
<td>
<div id="d7" class="gridDiv">
</div>
</td>
<td>
<div id="d8" class="gridDiv">
</div>
</td>
<td>
<div id="d9" class="gridDiv">
</div>
</td>
<td>
<div id="d10" class="gridDiv">
</div>
</td>
<td>
<div id="d11" class="gridDiv">
</div>
</td>
<td>
<div id="d12" class="gridDiv">
</div>
</td>
<td>
<div id="d13" class="gridDiv">
</div>
</td>
<td>
<div id="d14" class="gridDiv">
</div>
</td>
</tr>
</table><br />
<input id="Button1" type="button"
value="Start/Stop" onclick="return
Button1_onclick()" />
</div>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</script>
</div>
</form>
</body>
</html>
Add JavaScript File
Step 5 : Go to the Solution
Explorer and right-click.
- Select Add->New Item
- Select JavaScript File
- Define the below code
Code :
function
jscript(divArray) {
var values;
var divs;
this.PlotValue =
function (newval) {
var i;
for (i = 0; i < values.length - 1; i++)
{ values[i] = values[i + 1]; }
values[i] = newval;
for (i = 0; i < divs.length; i++)
{ document.getElementById(divs[i]).style.height = values[i] +
'px'; }
}
function Init(_divArray) {
var x;
values = new Array(_divArray.length);
divs = _divArray;
for (x = 0; x < values.length; x++)
values[x] = 0;
}
Init(divArray);
}
Define
Script Function
Step 6 : Go to the Default.aspx page and define
script function for the graph page.
Function :
<script type="text/javascript"
src=AJAXGraph.js></script>
<script language="javascript">
var start = 1;
var mygraph;
function OnComplete(a) {
mygraph.PlotValue(a);
if (start == 0)
return;
window.setTimeout("PageMethods.GetNextValue(OnComplete,null)",
500);
}
function init() {
mygraph = new AJAXGraph(['d1',
'd2', 'd3',
'd4', 'd5',
'd6', 'd7',
'd8', 'd9',
'd10', 'd11',
'd12', 'd13',
'd14']);
PageMethods.GetNextValue(OnComplete, null);
}
Step 7 : Again we create a web Form and define the script reference for the graph.
Script code :
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</script>
Step 8 :
Now go to Design option and double-click in Start-stop button write a code.
Code :
// <![CDATA[
function Button1_onclick() {
start = !start;
if (start)
PageMethods.GetNextValue(OnComplete, null);
}
// ]]>
Step 9 :
Define the source code for the graph application on the Default3.aspx page.
Code :
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h1 align=center style="background-color:
#66FFCC"> AJAX Graph using ASP.NET</h1>
<p align=center> <a href="AJAXGraph1.aspx" style="background-color:
#66FF33"> AJAX Graph Demo1</a>
|
<a href="AJAXGraph2.aspx" style="background-color:
#66FF66"> AJAX Graph Demo2</a>
|
<a href="AJAXGraph3.aspx" style="background-color:
#00FF00"> AJAX Graph Demo3</a></p>
<div align=center >
Step 10 :
Now run the application by Pressing F5.
Step 11 : Now click on the Ajax graph demo2 option and
see the output.
Step 12 : Now similarly click on the Ajax demo graph
3 and see the output.
