ChartDirector 7.0 (ASP/COM/VB Edition)
Finance Chart Custom Symbols
Source Code Listing
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' 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, 2014, with each row representing one
' day, and counting week days only (jump over Sat and Sun)
Call rantable.setDateCol(0, DateSerial(2014, 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)
' Custom data series should be of the same length as the OHLC data series
ReDim buySignal(UBound(closeData))
ReDim sellSignal(UBound(closeData))
'
' The following is just an arbitrary algorithm to create some meaningless buySignal and sellSignal.
' They are just for demonstrating the charting engine. Please do not use them for actual trading.
'
sma5 = cd.ArrayMath(closeData).movAvg(5).result()
sma20 = cd.ArrayMath(closeData).movAvg(20).result()
For i = 0 To UBound(sma5)
buySignal(i) = cd.NoValue
sellSignal(i) = cd.NoValue
If i > 0 Then
If (sma5(i - 1) <= sma20(i - 1)) And (sma5(i) > sma20(i)) Then
buySignal(i) = lowData(i)
End If
If (sma5(i - 1) >= sma20(i - 1)) And (sma5(i) < sma20(i)) Then
sellSignal(i) = highData(i)
End If
End If
Next
' Create a FinanceChart object of width 640 pixels
Set c = cd.FinanceChart(640)
' Add a title to the chart
Call c.addTitle("Finance Chart with Custom Symbols")
' 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
Set mainChart = c.addMainChart(240)
' Add buy signal symbols to the main chart, using cyan (0x00ffff) upward pointing arrows as symbols
Set buyLayer = mainChart.addScatterLayer(Empty, buySignal, "Buy", cd.ArrowShape(0, 1, 0.4, 0.4), _
11, &H00ffff&)
' Shift the symbol lower by 20 pixels
Call buyLayer.getDataSet(0).setSymbolOffset(0, 20)
' Add sell signal symbols to the main chart, using purple (0x9900cc) downward pointing arrows as
' symbols
Set sellLayer = mainChart.addScatterLayer(Empty, sellSignal, "Sell", cd.ArrowShape(180, 1, 0.4, _
0.4), 11, &H9900cc)
' Shift the symbol higher by 20 pixels
Call sellLayer.getDataSet(0).setSymbolOffset(0, -20)
' 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 candlestick symbols to the main chart, using green/red for up/down days
Call c.addCandleStick(&H66ff66, &Hff6666)
' Add a volume indicator chart (75 pixels high) after the main chart, using green/red/grey for
' up/down/flat days
Call c.addVolIndicator(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)
' Output the chart
Set viewer = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(c, cd.SVG)
%>
<!DOCTYPE html>
<html>
<head>
<title>Finance Chart Custom Symbols</title>
<!-- Include ChartDirector Javascript Library to support chart interactions -->
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
Finance Chart Custom Symbols
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div style="font:10pt verdana; margin-bottom:1.5em">
<a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
</div>
<!-- ****** Here is the chart image ****** -->
<%= viewer.renderHTML() %>
</body>
</html>
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, 2014, with each row representing one
' day, and counting week days only (jump over Sat and Sun)
Call rantable.setDateCol(0, DateSerial(2014, 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)
' Custom data series should be of the same length as the OHLC data series
ReDim buySignal(UBound(closeData))
ReDim sellSignal(UBound(closeData))
'
' The following is just an arbitrary algorithm to create some meaningless buySignal and
' sellSignal. They are just for demonstrating the charting engine. Please do not use them for
' actual trading.
'
Dim sma5()
sma5 = cd.ArrayMath(closeData).movAvg(5).result()
Dim sma20()
sma20 = cd.ArrayMath(closeData).movAvg(20).result()
Dim i As Long
For i = 0 To UBound(sma5)
buySignal(i) = cd.NoValue
sellSignal(i) = cd.NoValue
If i > 0 Then
If (sma5(i - 1) <= sma20(i - 1)) And (sma5(i) > sma20(i)) Then
buySignal(i) = lowData(i)
End If
If (sma5(i - 1) >= sma20(i - 1)) And (sma5(i) < sma20(i)) Then
sellSignal(i) = highData(i)
End If
End If
Next
' 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 with Custom Symbols")
' 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
Dim mainChart As XYChart
Set mainChart = c.addMainChart(240)
' Add buy signal symbols to the main chart, using cyan (0x00ffff) upward pointing arrows as
' symbols
Dim buyLayer As ScatterLayer
Set buyLayer = mainChart.addScatterLayer(Empty, buySignal, "Buy", cd.ArrowShape(0, 1, 0.4, 0.4 _
), 11, &H00ffff&)
' Shift the symbol lower by 20 pixels
Call buyLayer.getDataSet(0).setSymbolOffset(0, 20)
' Add sell signal symbols to the main chart, using purple (0x9900cc) downward pointing arrows as
' symbols
Dim sellLayer As ScatterLayer
Set sellLayer = mainChart.addScatterLayer(Empty, sellSignal, "Sell", cd.ArrowShape(180, 1, _
0.4, 0.4), 11, &H9900cc)
' Shift the symbol higher by 20 pixels
Call sellLayer.getDataSet(0).setSymbolOffset(0, -20)
' 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 candlestick symbols to the main chart, using green/red for up/down days
Call c.addCandleStick(&H66ff66, &Hff6666)
' Add a volume indicator chart (75 pixels high) after the main chart, using green/red/grey for
' up/down/flat days
Call c.addVolIndicator(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)
' Output the chart
Set viewer.Picture = c.makePicture()
End Sub