JViews Demo: Stock Viewer

The following is an interactive, web based Stock Viewer demo built with JViews Enterprise. 

About This Demo

This example shows how to generate server-side charts in a DHTML thin-client environment. A servlet retrieves quotes from the Yahoo finance Web site and generates the corresponding stock prices chart and various financial indicators on the fly. Charts are displayed by Views Charts faces components that render client-side DHTML.

How to Use This Demo

This example allows you to display the stock quotes of one or several companies, as well as several technical market indicators. Two kinds of charts are used to display the stock data:

• The upper chart, which displays the stock data of the company being analyzed. Several other companies can be displayed in overlay, as well as indicators such as moving averages.
• Two lower charts, each of them displaying one technical indicator (Volume, RSI, MACD, and so on).

Loading Quotes

The loading of quotes is specified by the controls available in the query panel:

• The primary symbol field lets you specify the company ticker symbol.
• The secondary symbols field lets you optionally specify a space-separated list of symbols that will be plotted against the primary symbol.
• The duration combo box lets you choose the time span for the query.
• The frequency combo box lets you choose the frequency of the data. Two choices are available: Daily and Weekly.

Quotes are automatically loaded when the duration or the frequency of the query is modified. However, an explicit reload request must be made after changing the ticker symbols. To request an explicit reload of the stock data, select the Draw button on the toolbar.

Technical Indicators

The Indicators controls let you specify the technical indicators that must be displayed by the corresponding charts. These indicators are split into two categories:

• The upper indicators are drawn within the chart displaying the stock quotes. You can add as many indicators as you want through the Indicators checkbox set next to the upper chart.
• The lower indicators are drawn in the lower charts. Each chart can display only one indicator. A combo box containing a list of available indicators is available for each of these charts and lets you choose the indicator that must be displayed (Volume, MACD, RSI, and so on).

Controlling the Visible Range

By Fixed Zoom Factor

To perform a zoom by a fixed zoom factor (x2/x.5), use the following toolbar buttons:

• To zoom in by 2.
• To zoom out by 2.
• To fit the zoom level to the chart contents and reset the zoom history.

Using Interactors

• A Zoom interactor can be set on the upper chart. To enable the zoom interactor, click the corresponding toolbar button. To perform a zoom, simply click the left mouse button and drag the mouse over the desired time interval. The y-range of the zoomed data window is automatically computed so that it contains all the data displayed within the specified time frame.
• A Pan interactor can also be set on the upper chart. To enable the pan interactor, click the corresponding toolbar button. To pan the chart data window, click the left mouse button within the chart area and drag the mouse along the x-axis.

Note: All these interactions are disabled when a local zoom is set.

The Zoom History

Whenever a zoom is performed, the previous zoom level is stored in the zoom history. You can browse the zoom history with the following toolbar buttons:

• To go back to the previous zoom level.
• To move forward to the next zoom level.
• To fit the zoom level to the chart contents and reset the zoom history.

Using Threshold Lines

Threshold lines let you specify upper and lower price limits for the primary symbol within the main chart. You can activate and deactivate the threshold lines with the toolbar button.

The threshold limits can be edited by clicking within the scale annotation of the threshold bar to move and drag the annotation along the y-axis.

When threshold lines are activated, the rendering style of the data points depends on their price value:

• A green color is used for values above the upper limit.
• A red color is used for values below the lower limit.
• An orange color is used for values between the two limits.

Controlling Display Properties

The following properties are accessible through the vertical toolbar.

The Overview Representation toolbar lets you choose the chart representation of the primary symbol when it is in overview mode. This mode is set when the visible time range exceeds the duration of approximately three months for daily data, and approximately one year for weekly data. Four representation types are available:

• Line
• Area
• Stair
• Bar

The Logarithmic Price Axis button ( ) lets you specify whether the y-scale of the quote chart is logarithmic or linear.