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

fig11.gif

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

java.gif

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.

Clipboard26.jpg

Step 11 : Now click on the Ajax graph demo2 option and see the output.

Clipboard24.gif

Step 12 : Now similarly click on the Ajax demo graph 3 and see the output.

Clipboard28.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all