AJAX Pattern: Streaming Quotes


 definition
 overview
 ajax pattern in action
 source code



definition

A comprehensive control that displays real-time stock market values, currency values, and a live Dow Jones chart.

Frequency of use:   medium

overview

This control is modeled after Yahoo's Market Summary and Currency Rates display (http://finance.yahoo.com). It is similar, although we think we have a better looking chart...

The control is built with two ASP.NET AJAX UpdatePanels each with their own ASP.NET AJAX Timers located inside their respective UpdatePanels. The Chart UpdatePanel is set to refresh every 30 seconds whereas the UpdatePanel with Market and Currency values is set to refresh every 2 seconds.

Market and Currency values are simulated on the server using custom random number generators. However, it would not be hard to replace these with valid real-time values (e.g. using a paid real-time stock data Web Service). When a market value moves up, it highlights with a green background for .5 seconds. When it moves down, it highlights with a red background for .5 seconds. If there are no changes or the differences are insignificant, no highlighting occurs.

The Chart displays the market fluctuations over the last 6-7 hours. Once a minute a new image is rendered on the server (painted onto an in-memory bitmap using GDI+). The image is then cached and being streamed to browsers that are monitoring the market. After one minute, the image is re-rendered with the latest data and cached again.

Our servers are not optimized to handle a large load of long running real-time streaming quotes. Therefore, the timers on each browser are configured to stop after 10 minutes. However, a button will appear allowing you to run for 10 more minutes.

ajax pattern in action

Below you see the Streaming Quotes control in action. We suggest you watch for a while and see the market values, currency rates, and associated chart being updated in real-time.

Notice the red/green highlighting. This feature can be of great value to day-traders who trade over the web and need to be notified of market fluctuations in real-time as they occur.

US markets are open less than 8 hours/day. Since our website has a global audience, we decided to simulate 24 hours/day giving everyone a chance to see the control in action. Finally, the time reported on the chart is US Eastern Time (New York).


Example: Real-time streaming quotes


Dow Jones


  Market Summary
 NEW Streaming Quotes
 SYMBOL LAST CHANGE 
 Dow
 Nasdaq
 S&P 500
 10-Yr Bond
 NYSE Volume
 Nasdaq Volume
 
  Currency Rates
 1$ is worth...
 USD to Euro
 USD to ¥en ¥
  Real-time currency rates are © Forex Systems




source code


The source code of this control, as well as many other controls, will be made available as part of our Design Pattern Framework.

Please check back for future updates.