Online stock streaming using ASP.Net and AJAX controls

• Download source link - 437 Kb

Introduction

It always made me wonder how sites like http://finance.yahoo.com and http://finance.google.com display stock quotes online so quickly and without refreshing entire page. So I decided to implement something similar. It looks very difficult to implement these kind of streaming, but ASP.Net and it's feature rich AJAX controls makes it really simple to implement this. This is my first attempt to build similar streaming web page. This sample may sound fairly easy to you and some of you might think that everyone knows this. But it might provide a good base for those who wants to build similar web sites and still have no idea where to start.

Using Code

Sample code provided in this article includes a web page Default.aspx and Default.aspx.cs code behind.

Default.aspx (UI)

<!--Script Manager must be inserted before any other AJAX control-->
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <!--Ajax update panel-->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        
        <!--Grid View which will display quotes-->
        <asp:GridView ID="GridView1" runat="server" Width="800px" BackColor="White" BorderColor="#336666"
            BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal">
            <FooterStyle BackColor="White" ForeColor="#333333" />
            <RowStyle BackColor="White" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
            <PagerStyle ForeColor="White" HorizontalAlign="Center" BackColor="#336666" />
            <HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
         
         <!--Ajax Timer control which will refresh grid view at specified interval (2 seconds)-->
         <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick" Enabled=true >
        </asp:Timer>
        </ContentTemplate>        </asp:UpdatePanel>
  

UI code is fairly simple. First component is Script Manager. This component is necessary for AJAX functionality. After Script Manager, next component is UpdatePanel. This ajax control stops ASP.Net page from posting back. Instead of posting back page, it sends control inputs to server using client side javascripts. When it receives response from server, it refreshes content inside it on client side. Next control is an AJAX timer control. It rebinds grid with new quotes every 2 seconds.

Default.aspx.cs (Code Behind)

    DataTable GetGridData()
    {
        DataTable DT = new DataTable();
        DT.Columns.Add("Symbol",typeof(string));
        DT.Columns.Add("Company Name",typeof(string));
        DT.Columns.Add("LastTrade", typeof(float));
        DT.Columns.Add("Bid", typeof(float));
        DT.Columns.Add("Ask", typeof(float));
        DT.Columns.Add("Volume", typeof(int));
        DT.Columns.Add("Market Capital", typeof(string));
        DT.Columns.Add("EPS", typeof(float));
        DT.Columns.Add("P/E", typeof(float));

        Random r = new Random();

        //Apple

        //Get a random value of last trade, bid, ask and volume.

        float LastTrade = ((float)r.Next(17222,17434))/100;
        float Bid = LastTrade - (float)0.34;
        float Ask = LastTrade + (float)0.43;
        int Volume = r.Next(23000000, 23600000);
        DT.Rows.Add("AAPL", "Apple Inc.", LastTrade, Bid, Ask, Volume, "153.88B", 3.93, 44.71);

        //Microsoft

        LastTrade = ((float)r.Next(3378, 3487)) / 100;
        Bid = LastTrade - (float)0.34;
        Ask = LastTrade + (float)0.43;
        Volume = r.Next(38064903, 40075689);
        DT.Rows.Add("MSFT", "Microsoft Corporation", LastTrade, Bid, Ask, Volume, "153.88B", 2.13, 21.2);

        //Yahoo

        LastTrade = ((float)r.Next(2520, 2834)) / 100;
        Bid = LastTrade - (float)0.34;
        Ask = LastTrade + (float)0.43;
        Volume = r.Next(14400000, 15500000);
        DT.Rows.Add("YHOO", "Yahoo Inc.", LastTrade, Bid, Ask, Volume, "34.48B", 1.42, 10.23);

        //Google

        LastTrade = ((float)r.Next(67025, 69000)) / 100;
        Bid = LastTrade - (float)5;
        Ask = LastTrade + (float)5;
        Volume = r.Next(4500000, 5000000);
        DT.Rows.Add("GOOG", "Google Inc.", LastTrade, Bid, Ask, Volume, "213.73B", 12.42, 53.23);

        //WYNN

        LastTrade = ((float)r.Next(13249, 14022)) / 100;
        Bid = LastTrade - (float)0.90;
        Ask = LastTrade + (float)0.89;
        Volume = r.Next(1222785, 1400000);
        DT.Rows.Add("WYNN", "Wynn Resorts Ltd.", LastTrade, Bid, Ask, Volume, "15.13B",1.81, 73.15);

        return DT;
    }

GetGridData() function simulates quotes for different stock symbols. Instead of simulated data you can replace this function to fetch real time quotes from other sources. This function builds a data table using random quotes and returns it.

    protected void Timer1_Tick(object sender, EventArgs e)
    {
        //Bind grid view

        GridView1.DataSource = GetGridData();
        GridView1.DataBind();
    }

Timer1_Tick() function is a timer function which executes every 2 seconds. It rebinds grid with simulated stock data.

Points of Interest

As you can see here, I am using a simulation for stock quotes. It would be interesting to know how can we fetch real time quotes from Yahoo/Google or any other source.

These are few links I have found which discusses this,
http://tutorials.programmingsite.co.uk/yahoocsv.php http://asp.programmershelp.co.uk/xmlstock1.php
http://www.webdeveloper.com/forum/archive/index.php/t-6821.html
http://aspalliance.com/articleViewer.aspx?aId=112&pId=

If you have any other ideas, please post it here.