Finance Chart (2)

This example demonstrates combining various ChartDirector features to create full-featured finance charts. The chart in this example includes candlestick, moving averages, Donchian channel, volume data, MACD and Stochastic indicators. You may use techniques demonstrated in this example to create additional indicators of your choice.

This example assumes the source data comes from a database table with 6 columns for time stamp, high value, low value, open value, close value, and volume. These data are then used to devire additional indicators such as moving averages, Donchian channel, MACD and Stochastic.

For simplicity and to allow this example to run without connecting to a real database, a RanTable object is used to simulate the database table. RanTable is a ChartDirector utility class used for creating tables with random numbers.

Data Preparation

This example draws a 100 days finance chart. Because only weekdays are used in finance charts, the 100 days cover approximately four and a half month.
To compute moving averages, we need to obtain data before the first day in the chart. For example, to compute 20 days moving averages for the first day, we need extra 19 days of data before the first day. The same is true for any indicators that are based on some moving windows, such as Donchian channel, MACD and Stochastic indicators.
So to draw a 100 days chart, we need more than 100 days of data. In this example, we simulate getting 130 days of data from the database. This should be more than enough for all the indicators demonstrated in this example.

Overall Chart Design

The chart in this example is created as a MultiChart containing four XYChart objects. The upper chart (candlestick + volume) is actually two XYChart objects.
The x-axis labels are devired from the time stamp column of the random table. However, the random table contains 130 days of data, and we need only 100 days in the labels, so ArrayMath.trim is used to trim off the excess data. Also, instead of one label per day, it is better to show labels only on the first available day of the month. This is achieved by fitering the time stamps with ArrayMath.selectStartOfMonth.
The volumn data is trimmed from 130 days to 100 days using ArrayMath.trim.
The high, low, open, close data are not trimmed yet, as we still need the extra data to compute moving averages and various indicators.

Top Chart

The candlestick portion of the chart is created using XYChart.addCandleStickLayer.
The moving averages are computed using ArrayMath.movAvg and drawn as lines using XYChart.addLineLayer.
The Donchian channel is defined as the zone between the high and low prices for the last n days (n = 20 in this example). The upper and lower bounds of the Donchian channel are computed using ArrayMath, and drawn as lines using XYChart.addLineLayer. The region between the upper and lower bounds is colored using XYChart.addInterLineLayer.
Add labels to the x-axis using Axis.setLabels2, then move the x-axis to the top of the plot area using XYChart.setXAxisOnTop.

Volume Chart

The plot area background, border and grid line colors are set to Transparent using XYChart.setPlotArea. This is to facilitate merging the volume chart to the bottom of the candlestick chart.
The volumn chart displays volume data in red if the day is an "up" day (current day's closing price > previous day's closing price), in green if the day is a "down" day, and in grey if the closing prices are unchanged.
To achieve the above effect, the volume data is splitted into 3 series for up, down and unchanged days. First, we compute the changes in closing prices using ArrayMath.delta. Then we filter the volumne data depending on whether the price changes are positive, negative or zero, using ArrayMath.selectGTZ, ArrayMath.selectLTZ and ArrayMath.selectEQZ.
The three series are then plotted as three bar layers, with three different colors (red, green and grey).
The y-axis is set to the right side using XYChart.setYAxisOnRight to avoid overlapping with the y-axis of the candlestick chart.

Middle Chart

MACD is defined as the difference between the 12 days and 26 days exponential average (smoothing factor = 0.15 and 0.075). The MACD is computed using ArrayMath, and is drawn as a line using XYChart.addLineLayer.
The MACD histogram is defined as the difference between the MACD with its 9 days exponential average (smoothing factor = 0.2). Traditionally, the exponential average is drawn as a line, and the difference is drawn as bars. In this example, both quantities are computed using ArrayMath and is drawn using !XYChart.addLineLayer and XYChart.addBarLayer.
No x-axis labels are needed in the middle chart, but we still need the grid lines. So we add the labels to the x-axis anyway using Axis.setLabels, and set the label and tick colors to Transparent using Axis.setColors.

Bottom Chart

Stochastic is defined as (close - moving_low) / (moving_high - moving_low) expressed as a percentage. In this example, we use 14 days as the period for moving computations.
The Stochastic indicator is computed using ArrayMath and drawn as a line using XYChart.addLineLayer.
Traditional, for fast Stochastic, a 3 days moving average of the Stochastic indicator is also drawn. The 3 days moving average is computed using ArrayMath and drawn as a line using XYChart.addLineLayer.
Add labels to the x-axis using Axis.setLabels2.
Set the x-axis to indented mode using Axis.setIndent. This is to make sure the x-axis is synchronized with the x-axis of the top and middle chart. Please refer to Axis.setIndent on details of what is an indented axis.