ChartDirector 7.0 (ASP/COM/VB Edition)

High-Low-Open-Close Chart




This example demonstrates a multi-color high-low-open-close chart.

Source Code Listing

[Web Version (in ASP)] aspdemo\hloc.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' ' Sample data for the HLOC chart. ' highData = Array(2043, 2039, 2076, 2064, 2048, 2058, 2070, 2033, 2027, 2029, 2071, 2085, 2034, _ 2031, 2056, 2128, 2180, 2183, 2192, 2213, 2230, 2281, 2272) lowData = Array(1931, 1921, 1985, 2028, 1986, 1994, 1999, 1958, 1943, 1944, 1962, 2011, 1975, _ 1962, 1928, 2059, 2112, 2103, 2151, 2127, 2123, 2152, 2212) openData = Array(2000, 1957, 1993, 2037, 2018, 2021, 2045, 2009, 1959, 1985, 2008, 2048, 2006, _ 2010, 1971, 2080, 2116, 2137, 2170, 2172, 2171, 2191, 2240) closeData = Array(1950, 1991, 2026, 2029, 2004, 2053, 2011, 1962, 1987, 2019, 2040, 2016, 1996, _ 1985, 2006, 2113, 2142, 2167, 2158, 2201, 2188, 2231, 2242) ' The labels for the HLOC chart labels = Array("Mon 1", "Tue 2", "Wed 3", "Thu 4", "Fri 5", "Mon 8", "Tue 9", "Wed 10", "Thu 11", _ "Fri 12", "Mon 15", "Tue 16", "Wed 17", "Thu 18", "Fri 19", "Mon 22", "Tue 23", "Wed 24", _ "Thu 25", "Fri 26", "Mon 29", "Tue 30", "Wed 31") ' Create a XYChart object of size 600 x 350 pixels Set c = cd.XYChart(600, 350) ' Set the plotarea at (50, 25) and of size 500 x 250 pixels. Enable both the horizontal and vertical ' grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(50, 25, 500, 250).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle("Universal Stock Index on Jan 2001") ' Add a custom text at (50, 25) (the upper left corner of the plotarea). Use 12pt Arial Bold/blue ' (4040c0) as the font. Call c.addText(50, 25, "(c) Global XYZ ABC Company", "Arial Bold", 12, &H4040c0) ' Add a title to the x axis Call c.xAxis().setTitle("Jan 2001") ' Set the labels on the x axis. Rotate the labels by 45 degrees. Call c.xAxis().setLabels(labels).setFontAngle(45) ' Add a title to the y axis Call c.yAxis().setTitle("Universal Stock Index") ' Draw the y axis on the right hand side of the plot area Call c.setYAxisOnRight(True) ' Add a HLOC layer to the chart using green (008000) for up days and red (ff0000) for down days Set layer = c.addHLOCLayer3(highData, lowData, openData, closeData, &H008000, &Hff0000) ' Set the line width to 2 pixels Call layer.setLineWidth(2) ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='{xLabel} Jan 2001<*br*>High:{high}<*br*>Open:{open}<*br*>Close:{close}<*br*>Low:{low}'") %> <!DOCTYPE html> <html> <head> <title>Simple HLOC Chart</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;"> Simple HLOC Chart </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>

[Windows Version (in Visual Basic)] vbdemo\hloc.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' ' Sample data for the HLOC chart. ' Dim highData() highData = Array(2043, 2039, 2076, 2064, 2048, 2058, 2070, 2033, 2027, 2029, 2071, 2085, 2034, _ 2031, 2056, 2128, 2180, 2183, 2192, 2213, 2230, 2281, 2272) Dim lowData() lowData = Array(1931, 1921, 1985, 2028, 1986, 1994, 1999, 1958, 1943, 1944, 1962, 2011, 1975, _ 1962, 1928, 2059, 2112, 2103, 2151, 2127, 2123, 2152, 2212) Dim openData() openData = Array(2000, 1957, 1993, 2037, 2018, 2021, 2045, 2009, 1959, 1985, 2008, 2048, 2006, _ 2010, 1971, 2080, 2116, 2137, 2170, 2172, 2171, 2191, 2240) Dim closeData() closeData = Array(1950, 1991, 2026, 2029, 2004, 2053, 2011, 1962, 1987, 2019, 2040, 2016, _ 1996, 1985, 2006, 2113, 2142, 2167, 2158, 2201, 2188, 2231, 2242) ' The labels for the HLOC chart Dim labels() labels = Array("Mon 1", "Tue 2", "Wed 3", "Thu 4", "Fri 5", "Mon 8", "Tue 9", "Wed 10", _ "Thu 11", "Fri 12", "Mon 15", "Tue 16", "Wed 17", "Thu 18", "Fri 19", "Mon 22", "Tue 23", _ "Wed 24", "Thu 25", "Fri 26", "Mon 29", "Tue 30", "Wed 31") ' Create a XYChart object of size 600 x 350 pixels Dim c As XYChart Set c = cd.XYChart(600, 350) ' Set the plotarea at (50, 25) and of size 500 x 250 pixels. Enable both the horizontal and ' vertical grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(50, 25, 500, 250).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle("Universal Stock Index on Jan 2001") ' Add a custom text at (50, 25) (the upper left corner of the plotarea). Use 12pt Arial ' Bold/blue (4040c0) as the font. Call c.addText(50, 25, "(c) Global XYZ ABC Company", "arialbd.ttf", 12, &H4040c0) ' Add a title to the x axis Call c.xAxis().setTitle("Jan 2001") ' Set the labels on the x axis. Rotate the labels by 45 degrees. Call c.xAxis().setLabels(labels).setFontAngle(45) ' Add a title to the y axis Call c.yAxis().setTitle("Universal Stock Index") ' Draw the y axis on the right hand side of the plot area Call c.setYAxisOnRight(True) ' Add a HLOC layer to the chart using green (008000) for up days and red (ff0000) for down days Dim layer As HLOCLayer Set layer = c.addHLOCLayer3(highData, lowData, openData, closeData, &H008000, &Hff0000) ' Set the line width to 2 pixels Call layer.setLineWidth(2) ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='{xLabel} Jan 2001 High:{high} Open:{open} Close:{close} Low:{low}'") End Sub