ChartDirector 7.0 (ASP/COM/VB Edition)

Custom Symbols




This example demonstrates loading external image files as data symbols by using DataSet.setDataSymbol2.

Source Code Listing

[Web Version (in ASP)] aspdemo\customsymbolline.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' The data for the chart data0 = Array(600, 800, 1200, 1500, 1800, 1900, 2000, 1950) data1 = Array(300, 450, 500, 1000, 1500, 1600, 1650, 1600) ' The labels for the chart labels = Array("1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002") ' Create a XYChart object of size 450 x 250 pixels, with a pale yellow (0xffffc0) background, a ' black border, and 1 pixel 3D border effect. Set c = cd.XYChart(450, 250, &Hffffc0, 0, 1) ' Set the plotarea at (60, 45) and of size 360 x 170 pixels, using white (0xffffff) as the plot area ' background color. Turn on both horizontal and vertical grid lines with light grey color (0xc0c0c0) Call c.setPlotArea(60, 45, 360, 170, &Hffffff, -1, -1, &Hc0c0c0, -1) ' Add a legend box at (60, 20) (top of the chart) with horizontal layout. Use 8pt Arial Bold font. ' Set the background and border color to Transparent. Call c.addLegend(60, 20, False, "Arial Bold", 8).setBackground(cd.Transparent) ' Add a title to the chart using 12pt Arial Bold/white font with a dark blue (000060) background. Call c.addTitle("Information Resource Usage", "Arial Bold", 12, &Hffffff).setBackground(&H000060) ' Set the labels on the x axis Call c.xAxis().setLabels(labels) ' Reserve 8 pixels margins at both side of the x axis to avoid the first and last symbols drawing ' outside of the plot area Call c.xAxis().setMargin(8, 8) ' Add a title to the y axis Call c.yAxis().setTitle("Population") ' Add a line layer to the chart Set layer = c.addLineLayer2() ' Add the first line using small_user.png as the symbol. Call layer.addDataSet(data0, &Hcf4040, "Users").setDataSymbol2(Server.MapPath("small_user.png")) ' Add the first line using small_computer.png as the symbol. Call layer.addDataSet(data1, &H40cf40, "Computers").setDataSymbol2(Server.MapPath( _ "small_computer.png")) ' Set the line width to 3 pixels Call layer.setLineWidth(3) ' 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='Number of {dataSetName} at {xLabel}: {value}'") %> <!DOCTYPE html> <html> <head> <title>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;"> 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>

[Windows Version (in Visual Basic)] vbdemo\customsymbolline.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' The data for the chart Dim data0() data0 = Array(600, 800, 1200, 1500, 1800, 1900, 2000, 1950) Dim data1() data1 = Array(300, 450, 500, 1000, 1500, 1600, 1650, 1600) ' The labels for the chart Dim labels() labels = Array("1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002") ' Create a XYChart object of size 450 x 250 pixels, with a pale yellow (0xffffc0) background, a ' black border, and 1 pixel 3D border effect. Dim c As XYChart Set c = cd.XYChart(450, 250, &Hffffc0, 0, 1) ' Set the plotarea at (60, 45) and of size 360 x 170 pixels, using white (0xffffff) as the plot ' area background color. Turn on both horizontal and vertical grid lines with light grey color ' (0xc0c0c0) Call c.setPlotArea(60, 45, 360, 170, &Hffffff, -1, -1, &Hc0c0c0, -1) ' Add a legend box at (60, 20) (top of the chart) with horizontal layout. Use 8pt Arial Bold ' font. Set the background and border color to Transparent. Call c.addLegend(60, 20, False, "arialbd.ttf", 8).setBackground(cd.Transparent) ' Add a title to the chart using 12pt Arial Bold/white font. Use a 1 x 2 bitmap pattern as the ' background. Call c.addTitle("Information Resource Usage", "arialbd.ttf", 12, &Hffffff).setBackground( _ c.patternColor(Array(&H000040, &H000080), 2)) ' Set the labels on the x axis Call c.xAxis().setLabels(labels) ' Reserve 8 pixels margins at both side of the x axis to avoid the first and last symbols ' drawing outside of the plot area Call c.xAxis().setMargin(8, 8) ' Add a title to the y axis Call c.yAxis().setTitle("Population") ' Add a line layer to the chart Dim layer As LineLayer Set layer = c.addLineLayer2() ' Add the first line using small_user.png as the symbol. Call layer.addDataSet(data0, &Hcf4040, "Users").setDataSymbol2("small_user.png") ' Add the first line using small_computer.png as the symbol. Call layer.addDataSet(data1, &H40cf40, "Computers").setDataSymbol2("small_computer.png") ' Set the line width to 3 pixels Call layer.setLineWidth(3) ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='Number of {dataSetName} at {xLabel}: {value}'") End Sub