Using AJAX Graphs in ASP.NET

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.