Using AJAX Graphs in ASP.NET

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.

Using AJAX Graphs in ASP.NET

Reactions

3 Comments