Finance Chart (1)

This example demonstrates combining various ChartDirector features to create full-featured finance charts. The chart in this example includes HLOC, moving averages, Bollinger band, volume data, and RSI. 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, Bollinger band and RSI.

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 Bollinger band and RSI.
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 three 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 HLOC portion of the chart is created using XYChart.addHLOCLayer.
The moving averages are computed using ArrayMath.movAvg and drawn as lines using XYChart.addLineLayer.
The Bollinger band is defined as closeData +/- movStdDev * 2, where movStdDev is a moving standard deviation of the close data. The upper and lower bounds of the Bollinger band 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.

Middle Chart

The bars in the middle 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).
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

RSI is defined as the average up changes for the last 14 days, divided by the average absolute changes for the last 14 days, expressed as a percentage. The RSI is computed using ArrayMath, and is drawn as a line using XYChart.addLineLayer.
A red mark line is added to the chart at y = 70, and a blue mark line at y = 30, using Axis.addMark.
Fill the region where the RSI is above the y = 70 mark line with red using XYChart.addInterLineLayer. Similarly, fill the region where the RSI is below the y = 30 mark line with blue using XYChart.addInterLineLayer.
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.