ChartDirector 6.0 (ASP/COM/VB Edition)

Finance Chart (1)




This example demonstrate creating a full-featured finance chart, with HLOC, moving averages, Bollinger band, volume bars, RSI and Momentum indicators.

This example employs the FinanceChart library add-on to allow complex financial charts to be composed easily. In this example, the key steps are:

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

Source Code Listing

[Web Version (in ASP)] aspdemo\finance.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' This script can draw different charts depending on the chartIndex
chartIndex = CInt(Request("img"))

' Create a finance chart demo containing 100 days of data
noOfDays = 100

' To compute moving averages starting from the first day, we need to get extra data points before
' the first day
extraDays = 30

' In this exammple, we use a random number generator utility to simulate the data. We set up the
' random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as the seed.
Set rantable = cd.RanTable(9, 6, noOfDays + extraDays)

' Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row representing one
' day, and counting week days only (jump over Sat and Sun)
Call rantable.setDateCol(0, DateSerial(2002, 9, 4), 86400, True)

' Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open value starts
' from 100, and the daily change is random from -5 to 5.
Call rantable.setHLOCCols(1, 100, -5, 5)

' Set the 6th column as the vol data from 5 to 25 million
Call rantable.setCol(5, 50000000, 250000000)

' Now we read the data from the table into arrays
timeStamps = rantable.getCol(0)
highData = rantable.getCol(1)
lowData = rantable.getCol(2)
openData = rantable.getCol(3)
closeData = rantable.getCol(4)
volData = rantable.getCol(5)

' Create a FinanceChart object of width 640 pixels
Set c = cd.FinanceChart(640)

' Add a title to the chart
Call c.addTitle("Finance Chart Demonstration")

' Set the data into the finance chart object
Call c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays)

' Add the main chart with 240 pixels in height
Call c.addMainChart(240)

' Add a 5 period simple moving average to the main chart, using brown color
Call c.addSimpleMovingAvg(5, &H663300)

' Add a 20 period simple moving average to the main chart, using purple color
Call c.addSimpleMovingAvg(20, &H9900ff)

' Add HLOC symbols to the main chart, using green/red for up/down days
Call c.addHLOC(&H008000, &Hcc0000)

' Add 20 days bollinger band to the main chart, using light blue (9999ff) as the border and
' semi-transparent blue (c06666ff) as the fill color
Call c.addBollingerBand(20, 2, &H9999ff, &Hc06666ff)

' Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using green/red/grey for
' up/down/flat days
Call c.addVolBars(75, &H99ff99, &Hff9999, &H808080)

' Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The main RSI line is
' purple (800080). Set threshold region to +/- 20 (that is, RSI = 50 +/- 25). The upper/lower
' threshold regions will be filled with red (ff0000)/blue (0000ff).
Call c.addRSI(75, 14, &H800080, 20, &Hff0000, &H0000ff)

' Append a 12-days momentum indicator chart (75 pixels high) using blue (0000ff) color.
Call c.addMomentum(75, 12, &H0000ff)

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite c.makeChart2(cd.PNG)
Response.End
%>

[Windows Version (in Visual Basic)] vbdemo\finance.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' Create a finance chart demo containing 100 days of data
    Dim noOfDays As Long
    noOfDays = 100

    ' To compute moving averages starting from the first day, we need to get extra data points
    ' before the first day
    Dim extraDays As Long
    extraDays = 30

    ' In this exammple, we use a random number generator utility to simulate the data. We set up the
    ' random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as the seed.
    Dim rantable As RanTable
    Set rantable = cd.RanTable(9, 6, noOfDays + extraDays)

    ' Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row representing one
    ' day, and counting week days only (jump over Sat and Sun)
    Call rantable.setDateCol(0, DateSerial(2002, 9, 4), 86400, True)

    ' Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open value
    ' starts from 100, and the daily change is random from -5 to 5.
    Call rantable.setHLOCCols(1, 100, -5, 5)

    ' Set the 6th column as the vol data from 5 to 25 million
    Call rantable.setCol(5, 50000000, 250000000)

    ' Now we read the data from the table into arrays
    Dim timeStamps()
    timeStamps = rantable.getCol(0)
    Dim highData()
    highData = rantable.getCol(1)
    Dim lowData()
    lowData = rantable.getCol(2)
    Dim openData()
    openData = rantable.getCol(3)
    Dim closeData()
    closeData = rantable.getCol(4)
    Dim volData()
    volData = rantable.getCol(5)

    ' Create a FinanceChart object of width 640 pixels
    Dim c As FinanceChart
    Set c = cd.FinanceChart(640)

    ' Add a title to the chart
    Call c.addTitle("Finance Chart Demonstration")

    ' Set the data into the finance chart object
    Call c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays)

    ' Add the main chart with 240 pixels in height
    Call c.addMainChart(240)

    ' Add a 5 period simple moving average to the main chart, using brown color
    Call c.addSimpleMovingAvg(5, &H663300)

    ' Add a 20 period simple moving average to the main chart, using purple color
    Call c.addSimpleMovingAvg(20, &H9900ff)

    ' Add HLOC symbols to the main chart, using green/red for up/down days
    Call c.addHLOC(&H008000, &Hcc0000)

    ' Add 20 days bollinger band to the main chart, using light blue (9999ff) as the border and
    ' semi-transparent blue (c06666ff) as the fill color
    Call c.addBollingerBand(20, 2, &H9999ff, &Hc06666ff)

    ' Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using green/red/grey
    ' for up/down/flat days
    Call c.addVolBars(75, &H99ff99, &Hff9999, &H808080)

    ' Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The main RSI line
    ' is purple (800080). Set threshold region to +/- 20 (that is, RSI = 50 +/- 25). The upper/lower
    ' threshold regions will be filled with red (ff0000)/blue (0000ff).
    Call c.addRSI(75, 14, &H800080, 20, &Hff0000, &H0000ff)

    ' Append a 12-days momentum indicator chart (75 pixels high) using blue (0000ff) color.
    Call c.addMomentum(75, 12, &H0000ff)

    ' Output the chart
    Set viewer.Picture = c.makePicture()

End Sub